bootstrap-5bootstrap-forms
Bootstrap 5 Form Inputs to Take the Rest of the Space
In Bootstrap 5, I have a form displayed in a modal, inputs are preceded with icons. I want to make the inputs take the whole space after the icons (the rest of the purple zone as in the screenshot)
Any other suggestions to do the structure a better way without changing the final result is appreciated.
Here is my HTML code:
<div class="modal fade" id="edit-p" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editpLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changeppLabel">Edit my profile</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="px-3 pb-3">
<form class="row" id="profile-edit" method="POST">
<div class="row g-3 align-items-center">
<div class="col-auto">
<i class="fa-solid fa-mars me-3" title="Male"></i> </div>
<div class="col-auto">
<input type="" name="name" class="form-control" id="" aria-describedby="" value="Mohamed KADRI">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-solid fa-location-dot me-3" title="City"></i>
</div>
<div class="col-auto">
<select name="city" class="form-select" aria-label="">
</select>
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-solid fa-cake-candles me-3" title="Birthday"></i>
</div>
<div class="col-auto">
<input type="" name="birthdate" class="form-control" id="" aria-describedby="" value="1987-04-21">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-solid fa-phone me-3" title="Phone"></i>
</div>
<div class="col-auto">
<input type="" name="phone" class="form-control" id="" aria-describedby="" value="21256607">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-brands fa-square-facebook me-3" title="Facebook"></i>
</div>
<div class="col-auto">
<input type="" name="facebook" class="form-control" id="" aria-describedby="" value="medkadri">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-brands fa-instagram me-3" title="Instagram"></i>
</div>
<div class="col-auto">
<input type="" name="instagram" class="form-control" id="" aria-describedby="" value="mohamed.kadri_">
</div>
</div>
</div>
<div style="justify-content: space-between;">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" id="profile-edit-submit" class="btn btn-primary float-end">Update</button>
</div>
</form>
<div id="edit-p" class="pt-3">
<small></small>
</div>
</div>
</div>
<div class="modal-footer" style="justify-content: space-between;">
</div>
</div>
Thank you.
Solution
Add classes d-flex flex-grow-1 to the second col-auto.
See the snippet below.
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#edit-p">
Launch demo modal
</button>
<div class="modal fade" id="edit-p" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="editpLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="changeppLabel">Edit my profile</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="px-3 pb-3">
<form class="row" id="profile-edit" method="POST">
<div class="row g-3 align-items-center">
<div class="col-auto">
<i class="fa-solid fa-mars me-3" title="Male"></i> </div>
<div class="col-auto d-flex flex-grow-1">
<input type="" name="name" class="form-control" id="" aria-describedby="" value="Mohamed KADRI">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-solid fa-location-dot me-3" title="City"></i>
</div>
<div class="col-auto d-flex flex-grow-1">
<select name="city" class="form-select" aria-label="">
</select>
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-solid fa-cake-candles me-3" title="Birthday"></i>
</div>
<div class="col-auto d-flex flex-grow-1">
<input type="" name="birthdate" class="form-control" id="" aria-describedby="" value="1987-04-21">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-solid fa-phone me-3" title="Phone"></i>
</div>
<div class="col-auto d-flex flex-grow-1">
<input type="" name="phone" class="form-control" id="" aria-describedby="" value="21256607">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-brands fa-square-facebook me-3" title="Facebook"></i>
</div>
<div class="col-auto d-flex flex-grow-1">
<input type="" name="facebook" class="form-control" id="" aria-describedby="" value="medkadri">
</div>
<div class="row g-3 align-items-center">
</div>
<div class="col-auto">
<i class="fa-brands fa-instagram me-3" title="Instagram"></i>
</div>
<div class="col-auto d-flex flex-grow-1">
<input type="" name="instagram" class="form-control" id="" aria-describedby="" value="mohamed.kadri_">
</div>
</div>
<div style="justify-content: space-between;">
<button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
<button type="submit" id="profile-edit-submit" class="btn btn-primary float-end">Update</button>
</div>
</form>
<div id="edit-p" class="pt-3">
<small></small>
</div>
</div>
</div>
<div class="modal-footer" style="justify-content: space-between;">
</div>
</div>
</div>
</div>- Content Security Policy violation with Bootstrap 5
- How to show scrollbar in sidebar
- How to have eCharts tooltip fully visible in the page with Bootstrap
- Prevent Bootstrap table-hover Class from Changing Background Color of Cells in a Table
- Bootstrap Table Not Responsive
- How to enable Bootstrap popovers only for certain (large) breakpoints?
- Twig file doesn't display anything (SYMFONY 4.4)
- Empty space on the right when using the bootstrap 5.3.3 grid with 'row w-100'
- How to prevent too long text expand its parent div
- How can I open multiple Bootstrap 5 modals without closing the old ones?
- What's the best practice for using multiple data-bs-toggle (modal and tooltip)?
- How to add space between two buttons?
- Bootstrap 5 Columns Add Gutter
- Bootstrap 5 underline default changed?
- Vuejs 3 and Bootstrap 5 Modal Reusable Component Show Programmatically
- Bootstrap 5 offcanvas scrolls back to top on close
- Popover on Table Cell Depending on the Value
- sidebar sticking to the top of the page and not the top of the screen
- Bootstrap 5 carousel-caption text disappears when the website is seen on a smaller screen
- Uncaught TypeError: Cannot read properties of undefined (reading 'backdrop') while using bootstrap 5 modal in react
- Styling input["range"] in Bootstrap 5 and Angular
- How do the "aria-describedby" and "aria-hidden" attributes work in Bootstrap?
- Where to include jquery script in Blazor web app in ASP.NET Core 8?
- How to make bootstrap datepicker be always visible/open?
- Bootstrap 5 popover html content
- Bootstrap menu dropdown not working on Blazor WebApp
- How can I close the dropdown programmatically on button click?
- Bootstrap 5 - mt-5 overrides mt-md-0 on ≥768px screen size
- Adding a dark mask to a video tag
- How can I toggle content in tabs in Bootstrap 5?