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>
Related
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.
I have the following form code:
<div id="site" class="container-fluid">
<div class="row">
<div class="my-4 offset-3 col-6 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-2 col-form-label">Username</label>
<div class="col-4">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username" />
</div>
</div>
<div class="form-group row">
<label for="password" class="col-2 col-form-label">Password</label>
<div class="col-4">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password" />
</div>
</div>
<div class="form-group row">
<div class="col-2"></div>
<div class="col-4">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on" />
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-6">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
I want the form to be centered on the page, but instead, it's still further to the left than center as shown by this screenshot:
I thought my math was correct: Bootstrap uses a 12-column grid, so by using a 3-column offset, and a 6-column content area, I'd have essentially two 3-column gutters on each side. And by specifying the form rows to add up to 6-columns (2-column labels and 4-column inputs), the form would fill the 6-column content area, thereby automatically centering itself. But I'm obviously wrong.
So, what can I do to actually center this thing? And to make it 6 columns wide (because, judging by the screenshot, it isn't)?
The form is horizontally centered, but it's only half the width of it's parent. The issue is...
"And by specifying the form rows to add up to 6-columns (2-column
labels and 4-column inputs), the form would fill the 6-column content
area, thereby automatically centering itself"
Since 6 is half of 12, the form col-6 (2+4) is only going to fill half the parent col-6. If you want a narrower form in the middle use col-4 (1/3 width), and then something that adds to 12 for the labels and form input (eg. 3+9). OFC you could also use 4/8, 6/6, etc...
<div class="container-fluid">
<div class="row">
<div class="my-4 offset-4 col-4 justify-content-center align-items-center">
<form action="/some/path" method="post">
<div class="form-group row">
<label for="username" class="col-3 col-form-label">Username</label>
<div class="col-9">
<input type="text" class="form-control" id="username" name="_username" required="required" autocomplete="username">
</div>
</div>
<div class="form-group row">
<label for="password" class="col-3 col-form-label">Password</label>
<div class="col-9">
<input type="password" class="form-control" id="password" name="_password" required="required" autocomplete="current-password">
</div>
</div>
<div class="form-group row">
<div class="col-3"></div>
<div class="col-9">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="remember_me" name="_remember_me" value="on">
<label for="remember_me" class="form-check-label">Remember me</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-12">
<button class="btn btn-burnt-orange" type="submit" id="_submit" name="_submit">Log in</button>
</div>
</div>
</form>
</div>
</div>
</div>
https://www.codeply.com/go/b4FE5qflxS
Related: Center the content inside a column in Bootstrap 4
You can accomplish this by using col-6 and justify-content-center. All you have to do is setup the elements, rows and columns with bootstrap.
Here is an example of centering the form group:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="site" class="container-fluid">
<div class="row justify-content-center">
<div class="col-6" style="background: #eee;">
<!-- formgroup start -->
<form>
<div action="/some/path" class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Enter username" name="_username" required="required" autocomplete="username" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password" name="_password" required="required" autocomplete="current-password" />
</div>
<div class="form-group form-check">
<input type="checkbox" class="form-check-input" id="remember_me" name="_remember_me" value="on" />
<label class="form-check-label" for="remember_me">Remember me</label>
</div>
<button type="submit" class="btn btn-primary" id="_submit" name="_submit">Submit</button>
</form>
<!-- formgroup end -->
</div>
</div>
</div>
Reference these pages on the Bootstrap 4 documentation
https://getbootstrap.com/docs/4.1/layout/grid/
https://getbootstrap.com/docs/4.1/components/forms/
I have a form that looks like this (on a big device, e.g. pc monitor)
that is as it should be. On smaller devices it however looks like this:
the button is no longer in the same line as the input. My code looks like this:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
How can I ensure that it also is aligned correctly when using smaller devices?
PS: Bootstrap is being used
Your columns are col-md, which means that when the screen width gets below 992px, the columns will take up the full width of the page. So if you want them to stay inline, then add col-xs classes with the column sizes that you need.
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-xs-10">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-xs-2">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
Both the input and button need to be set to display: inline, and they should be placed in the same column. Below works and should satisfy your needs:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md">
<input id="title" class="form-control d-inline w-70 float-left" placeholder="Title" autocomplete="off" name="title" type="text" value="">
<a id="btn-verify" class="btn btn-primary float-left d-inline">Verify</a>
</div>
</div>
</div>
</div>
Have you tried stacking the bootstrap col classes?
The lg / md / sm all target different screen size thresholds. Using multiples should help you define the space it should take up in a given scenario. I would say you can steal some real-estate from that input.
You could also consider putting them in the same div.
Your code modified with stacked col classes:
<div class="form-group ">
<label class="col-md-2 control-label">Title</label>
<div class="col-md-10">
<div class="row">
<div class="col-md-10 col-sm-6">
<input id="title" class="form-control" placeholder="Title" autocomplete="off" name="title" type="text" value="">
</div>
<div class="col-md-2 col-sm-6">
<a id="btn-verify" class="btn btn-primary pull-right">Verify</a>
</div>
</div>
</div>
</div>
I'm trying to create a simple form using Bootstrap 3 where people can sign up for a small event.
On this form, they should also be able to indicate if they want one or more T-shirts, and which size(s) they want to order.
I'm not new to HTML, CSS and Javascript, but I am quite new to Bootstrap. Also while I'm a programmer by day, I'm mainly writing REST services so my design skills are fairly limited.
Using w3schools and other tutorial sites I have arrived at this:
<div class="form-group form-group-sm">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
<label class="col-xs-1" for="shirt-s">S</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-s">
</div>
<label class="col-xs-1" for="shirt-m">M</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-m">
</div>
<label class="col-xs-1" for="shirt-l">L</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-l">
</div>
<label class="col-xs-1" for="shirt-xl">XL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xl">
</div>
<label class="col-xs-1" for="shirt-xxl">XXL</label>
<div class="col-xs-1">
<input class="form-control" type="text" id="shirt-xxl">
</div>
<div class="col-xs-2"> </div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Submit</button>
</div>
See jsfiddle:
https://jsfiddle.net/tonvanbart/83nbny8h/5/
Not the prettiest in the world, but I can live with it. My main question is: why is the 'submit' button not in it's own row but inlined after the input fields? At first I thought I had to get to a total of 12 columns and I only had 10. But adding a 2-column div with a non-breaking space didn't help, and adding a <br> tag had no effect either.
Also, while I can live with this (it's for an informal, small group of people who know each other well) if anybody could give me a pointer on how to get the T-shirt size indicators closer to their respective input fields, that would be great. Thank you in advance.
Feel free to let me know if you need more information.
Here's the fixed code:
https://jsfiddle.net/ccx9x7om/1/
I added the following CSS
.row .form-group label, .row .form-group input {
display: inline-block;
}
.row .form-group input {
width: 50%;
}
button {
margin: 25px;
}
In order to use bootstrap's columns properly, you need to wrap them in a row, and wrap all rows inside either a .container or a .container-fluid. I moved the labels inside their respective .col-xs-2 then wrapped everything in the needed aforementioned divs.
Another way you could do this is by nesting your columns as to split the form in half which will greatly reduce the screen space it's using and bring your inputs closer while remaining responsive across viewports.
This is simply following the container/row/column layout that Bootstrap generally follows. See Nesting Columns.
*Note: The form-group class isn't necessary, it simply adds padding around your inputs.
See working Snippet at FullPage.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form>
<h2>Order a Shirt</h2>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="name">Name</label>
<input type="password" class="form-control" id="name" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" placeholder="Email address (never shown)">
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-s">S</label>
<input class="form-control" type="text" id="shirt-s">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-m">M</label>
<input class="form-control" type="text" id="shirt-m">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-l">L</label>
<input class="form-control" type="text" id="shirt-l">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xl">XL</label>
<input class="form-control" type="text" id="shirt-xl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label for="shirt-xxl">XXL</label>
<input class="form-control" type="text" id="shirt-xxl">
</div>
</div>
<div class="col-xs-4 col-sm-4">
<div class="form-group">
<label>Order Now</label>
<button type="submit" class="btn btn-success btn-block btn-submit">Submit</button>
</div>
</div>
<div class="col-xs-12">
<p class="help-block">Please select the number of T-shirts per size you would like to order.</p>
</div>
</div>
</div>
</div>
</form>
</div>
I am trying to do something like this. http://www.lolnexus.com/
I am trying to build the search module but cannot get my form to vertically stack. How can I go about this better using bootstrap. I am trying to build the part where it says enter summoner name and under that the radio buttons but I cant seem to figure how to get that alignment at least the vertical alignment. Custom styling can come later.
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<form role="form" method="post">
<div class="col-md-6 form-group">
<input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
<button type="button" class="btn btn-primary">Search</button>
</div>
<div class="col-md-6 form-group">
<label> NA</label>
<input type="radio" name="region" id="NA" value="NA" />
<label>EUW</label>
<input type="radio" name="region" id="EUW" value="EUW">
</div>
</form>
</div>
</div>
</div>
Did you try changing column width of form-groups to 12 columns?
<div class="container">
<div class="row">
<div class="jumbotron text-center">
<form role="form" method="post">
<div class="col-md-12 form-group">
<input type="search" size="100" id="mySearch" placeholder="Search for Summoner Name">
<button type="button" class="btn btn-primary">Search</button>
</div>
<div class="col-md-12 form-group">
<label> NA</label>
<input type="radio" name="region" id="NA" value="NA" />
<label>EUW</label>
<input type="radio" name="region" id="EUW" value="EUW">
</div>
</form>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron">
<form class="form" role="form" method="post">
<div class="form-group">
<input type="search" class="form-control" size="100" id="mySearch" placeholder="Search for Summoner Name" />
</div>
<div class="form-group form-inline">
<div class="radio">
<label>
<input type="radio" name="region" id="NA" value="NA" />
NA
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="region" id="EUW" value="EUW">
EUW
</label>
</div>
</div>
<div class="form-group">
<button type="button" class="btn btn-primary">Search</button>
</div>
</form>
</div>
</div>
</div>
There are lots of different classes you can use. I recommend you study bootstrap better to understand it. My example is for a form that spans the width of the container. Below the search input are the radio buttons. Below them is the search button. Bootstrap, by default is a 12 column layout. You were specifying 6 columns in width which placed the elements next to one another instead of vertically. You can just add the form-inline class to the form-group divs to make those particular elements inline. The form-control class makes the control span the width of its container.
Not sure what you trying to do, but if you are trying to have input and the button in one row and the radio buttons underneath, just put both form-groups in a separate row as well and also add col-md-offset-3 so it will be in the middle.