How to align a label on a line in Bootstrap?
I added a modal and I would like the label to be on one line. I guess I need to reduce the input and increase the width of the label.
But... Do you know how to do this on Bootstrap? I'm lost in my divs.
Below, here is an idea of my current code:
Thank you for your help.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Simple modal</h4>
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
</button>
</div>
<div class="modal-body">
<form>
<div class="row ">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<div class="form-group row">
<label for="cliente" class="col-sm-2 col-form-label text-end">Quantité a transférer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="cliente">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<div class="form-group row">
<label for="endereco" class="col-sm-2 col-form-label text-end">Changement Bénéficiaire Économique</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="endereco">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<div class="form-group row">
<label for="complemento" class="col-sm-2 col-form-label text-end">Compte du destinataire</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="complemento">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</body>
</html>Solution
Bootstrap has a grid system, where the entire screen is divided into 12 columns. You assign each label 2 columns, and each input box 10 columns, using the classes col-sm-2 and col-sm-10. If you change the numbers there, you can change how many columns each field takes up. For example, if you change the label class to `col-sm-4' and the input class to 'col-sm-8', the label will take up 1/3 of the screen (4/12 columns) and the input will take up 2/3 of the screen (8/12 columns). You can change these numbers to get a value that works for you.
The sample below shows 3 different values for the amount of columns, so you can see how this works.
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
</head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">Simple modal</h4>
<button type="button" class="btn-close" aria-label="Close button" aria-describedby="modal-title" (click)="modal.hide()">
</button>
</div>
<div class="modal-body">
<form>
<div class="row ">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<div class="form-group row">
<label for="cliente" class="col-sm-3 col-form-label text-end">Quantité a transférer</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="cliente">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<div class="form-group row">
<label for="endereco" class="col-sm-4 col-form-label text-end">Changement Bénéficiaire Économique</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="endereco">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row ">
<div class="col-12">
<div class="row">
<div class="col-12 col-sm-12 mb-2">
<div class="form-group row">
<label for="complemento" class="col-sm-5 col-form-label text-end">Compte du destinataire</label>
<div class="col-sm-7">
<input type="text" class="form-control" id="complemento">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</body>
</html>- "next" button showing as text for R Shiny DataTable using Bootstrap
- how to make a whole row in a table clickable as a link?
- Javascript React app "fetch" returning 'undefined' on reload from browser, but returning data when reloading from API
- How to Put Different Sizes of Images Inside a Carousel in Bootstrap 4?
- CSS responsive image grid
- Bootstrap 4 Popover with HTML Content
- Bootstrap 5 underline default changed?
- Order columns through Bootstrap4
- How can I create a shrinking header with a shadow effect on scroll using Bootstrap and jQuery?
- Passing "Id" selected checkbox to Modal bootstrap and send to controller
- Spinner Overlay Bootstrap 4 Card Body Only - Flex Alignment
- Add spacing between bootstrap cards
- Bootstrap 5 carousel-caption text disappears when the website is seen on a smaller screen
- Bootstrap 4 table with the scrollable body and header fixed
- How to create material design input form using css and bootstrap?
- How do I make my ngDropdown menu work on hover instead of click?
- Error when installing Bootstrap with yarn in symfony Project
- how to resolve this Duplicate callback outputs error in Dash ploty
- Understanding Bootstrap 5 variables import order overrides
- How to add <div class="row"> every 2 elements while looping in Vue.JS template?
- Bootstrap Scroll Spy with Sticky Navbar not working as expected
- Translating custom-file input Bootstrap 4
- How to select a group of elements in codeBehind in Web Forms without generating a wrapper element
- Change navbar color in Twitter Bootstrap
- Bootstrap div below each other and then beside each other in mobile view
- How to edit the select form arrow? (Bootstrap 4)
- How to animate or anchor bootstrap 4 accordion to its respective title when clicking its button?
- E-mail validation is not working properly
- Activate Popover on Hover and click anywhere to close
- Navbar drop-down menu not working with Angular and Bootstrap 4