The two inputs get misaligned due to the difference in length of the label text. Below is the part of my code:
<div class="row">
<div class="col-auto col-md-6 form-group">
<label for="category">Which of the following best describes you?</label>
<select class="form-control" id="category" name="category">
<option>Furniture Designer</option>
<option>Architect</option>
</select>
</div>
<div class="col-auto col-md-6 form-group">
<label for="training">Education level/type </label>
<input type="text" name="training" class="form-control" id="training" placeholder="Training">
</div>
</div>
How can I easily fix the misalignment and keeping the form resposive?
You could make the form-group's d-flex flex-column and then use mt-auto on the form input to force bottom alignment...
<div class="row">
<div class="col-auto col-md-6 form-group d-flex flex-column">
<label for="category">Which of the following best describes you?</label>
<select class="form-control mt-auto" id="category" name="category">
<option>Furniture Designer</option>
<option>Architect</option>
</select>
</div>
<div class="col-auto col-md-6 form-group d-flex flex-column">
<label for="training">Education level/type </label>
<input type="text" name="training" class="form-control mt-auto" id="training" placeholder="Training">
</div>
</div>
https://codeply.com/p/S9wKwrKLch
OR, use the text-truncate class on the labels to prevent text wrapping:
<label for="category" class="text-truncate">
Which of the following best describes you?
</label>
https://codeply.com/p/S9wKwrKLch
try with this way
<div class="col-auto d-md-flex flex-md-column col-md-6 form-group">
<label class="flex-md-fill" for="training">Education level/type </label>
<input type="text" name="training" class="form-control" id="training" placeholder="Training">
</div>
https://jsfiddle.net/lalji1051/t41Lnuxh/5/
The default behavior in bootstrap 4 is that the label will appear above the input. (Certainly with the code you have above).
If you want the label to be next to the input then try this straight from teh bs4 documentation:
<form>
<div class="form-group row">
<label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword">
</div>
</div>
</form>
Bootstrap 4 docs
If you would like to handle it with a little piece of code, I hope this one wirks for you :
You can use equal margin-bottoms for both your inputs and if you like to use bootstrap, for example you can add mb-2 class to your inputs.
Or even you can use mt-auto to your inputs.
Related
I am trying to learn bootstrap grid and want to create a row with two columns: one wide and one not so wide. In the left column I want to put an inline form and in the right narrower column I will put another form with a button. I copied Bootstrap example for 2 columns in one row and then I copied the Bootstrap inline form code and pasted it into one of the columns but it is not inline when I run the code. This is the code I have so far:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="MyContainer">
<div class="row">
<div class="col-6">
<form class="form-inline">
<label class="sr-only" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control mb-2 mr-sm-2" id="inlineFormInputName2" placeholder="Jane Doe">
<label class="sr-only" for="inlineFormInputGroupUsername2">Username</label>
<div class="input-group mb-2 mr-sm-2">
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="btn btn-primary mb-2">Submit</button>
</form>
</div>
<div class="col-6">
One of two columns
</div>
</div>
</div>
Instead of the form controls being inline they are stacked one on top of the other.
Can someone see where I am going wrong?
You are using classes from older versions of Bootstrap, yet you use Bootstrap 5.1. I made some changes:
Firstly, it’s .visually-hidden, not .sr-only anymore. Secondly, .form-inline is no longer supported, so I changed the class to row and added .col-3 classes to the form’s children. I also changed the two columns’ classes as you said you want one to be wider than the other. I don’t know what resources you use for Bootstrap, but I recommend relying on the official documentation.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css">
<div class="MyContainer">
<div class="row">
<div class="col-8">
<form class="m-2 row align-items-center">
<div class="col-3 mb-2 mr-sm-2">
<label class="visually-hidden" for="inlineFormInputName2">Name</label>
<input type="text" class="form-control" id="inlineFormInputName2" placeholder="Jane Doe">
</div>
<div class="col-3 mb-2 mr-sm-2">
<label class="visually-hidden" for="inlineFormInputGroupUsername2">Username</label>
<input type="text" class="form-control" id="inlineFormInputGroupUsername2" placeholder="Username">
</div>
<div class="col-3 form-check mb-2 mr-sm-2">
<input class="form-check-input" type="checkbox" id="inlineFormCheck">
<label class="form-check-label" for="inlineFormCheck">
Remember me
</label>
</div>
<button type="submit" class="col-3 btn btn-primary mb-2">Submit</button>
</form>
</div>
<div class="col-4">
One of two columns
</div>
</div>
</div>
I have a form that uses Bootstrap 4.4. The form groups contain a label and an input and sometimes also a select and when the select is present it breaks the alignment of the labels and inputs on the same row.
How to keep the labels always on top and the input at the bottom? I want to do this without custom Css and additional html elements if possible.
<div class="row col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-12 col-md-3 col-lg-3 form-group">
<label for="value">Value:</label>
<select>
<option>something</option>
</select>
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 form-group">
<label for="name">Name:</label>
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
</div>
Using justify on one of the containers I got all the inputs to allign at the bottom but I want to keep the labels at the top.
Edit: I need to keep the layout like this, with the two (or more) form groups on one row:
If you add label -> class="w-100" it will take width:100% so it won't take any element to the same row with itself. To keep inputs always at the end of the form group you can add something on top of them. Also if you give the same design for selects and other form elements it will look better.
<div class="row col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-12 col-md-3 col-lg-3 form-group">
<label class="w-100" for="value">Value:</label>
<select>
<option>something</option>
</select>
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
<div class="col-sm-12 col-md-3 col-lg-3 form-group">
<label class="w-100" for="name">Name:</label>
<div class="input-group">
<input type="text" class="form-control">
</div>
</div>
</div>
I am writing simple contact form using bootstrap-4. I have 1 row with 2 columns. Left column contains input text objects and selection object. Right column contains textarea. I try to make textarea the same hight as left col.
I aplied h-100 class into the textarea and parent div but it's higher than the left col.
link to the screenshot: https://i.imgur.com/Lrfwhtn.png
<div id="content" class="margin-from-nav">
<div class="container">
<form>
<div class="row">
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="form-group">
<label for="inputName1">Imię</label>
<input type="text" class="form-control" id="inputName1" placeholder="Imie">
</div>
<div class="form-group">
<label for="inputName2">Nazwisko</label>
<input type="text" class="form-control" id="inputName2" placeholder="Nazwisko">
</div>
<div class="form-group">
<label for="inputEmail4">Adres e-mail</label>
<input type="email" class="form-control" id="inputEmail4" placeholder="Email">
</div>
<div class="form-group">
<label class="mr-sm-2" for="inlineFormCustomSelect">Temat zapytania</label>
<select class="custom-select mr-sm-2" id="inlineFormCustomSelect">
<option selected>Wybierz temat...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6">
<div class="form-group h-100">
<label for="exampleFormControlTextarea1">Treść wiadomości</label>
<textarea class="h-100 form-control" id="exampleFormControlTextarea1" rows="10"></textarea>
</div>
</div>
</div>
</form>
</div>
</div>
You can use the flexbox utility classes (d-flex flex-column) to make the textarea fill the remaining height (flex-grow-1):
<div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 d-flex flex-column">
<div class="form-group flex-grow-1 d-flex flex-column">
<label for="exampleFormControlTextarea1">Treść wiadomości</label>
<textarea class="form-control flex-grow-1" id="exampleFormControlTextarea1"></textarea>
</div>
</div>
Demo: https://www.codeply.com/go/2z4ckbR2FU
i want make my input field longer as the same 2 fields above him, look the picture please:
My HTML code:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-3">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
I failed to do it with the boostrap grid system alone.
I cant change to col-lg-3 is not work, look at the comments.
I had the same issue and I solved adding one of the col- classes in the input itself.
In your case, replace col-lg-3 for col-lg-6 in the div and add col-lg-6 in the input as well:
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control col-lg-6" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this Code............
<div class="row">
<div class="form-group col-lg-offset-3 col-lg-6">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Try this
<div class="row">
<div class="form-group col-lg-12">
<label for="TripNumber">Trip Number</label>
<input type="text" class="form-control" id="TripNumber" placeholder="Trip Number">
</div>
</div>
Replace
col-lg-3
with
col-lg-6
in class attr
So I'm working in bootstrap for the first time and I'm making a form, like so:
<div class="input-group col-xs-2">
<label>Voornaam:</label>
<input type="text" class="form-control" placeholder="Voornaam">
</div>
<div class="input-group col-xs-2">
<label>Achternaam:</label>
<input type="text" class="form-control" placeholder="Achternaam">
</div>
<div class="input-group">
<label for="adresCaptain" class="control-label">Straatnaam + nr:</label>
<div>
<div class="form-inline">
<div class="form-group col-xs-9">
<input type="text" class="form-control" id="streetCaptain" placeholder="Straat"/>
</div>
<div class="form-group col-xs-3">
<input type="number" class="form-control" id="houseNrCaptain" placeholder="Nr"/>
</div>
</div>
</div>
</div>
Now, I've got a problem with the indentation of the "form-inline" part. For some reason, it's more indented than the other parts of the form.
image of result: http://puu.sh/g874J/2579b314e4.png
Any idea why this is the case and how I can make it so that the indentation is the same for every part of the form?
Your col-xs-X class adds an extra padding to div.