I have a Bootstrap inline-form that is 6 inputs then a button. It looks fine if it all fits on the screen, but as you make the screen smaller, the inputs fold underneath one at a time. I have tried wrapping each input in a col-md-2, but that makes the form look weird. I'm not sure if I'm doing something wrong.
Is there some way I can group the inputs together so that they collapse something like 6x1, 3x2, 2x3, 1x6?
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<form class="form-inline">
<div class="form-group">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group">
<label for="input3">Input 3
<input name="input3" type="checkbox" id="input3">
</label>
</div>
<div class="form-group">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<button class="btn btn-default">Add</button>
</form>
</div>
If running the code, you will have to resize the window.
I have also set up a fiddle for the inline-form
Thanks
Bootstraps grid system is great but it isn't perfect for everything under the sun. If things aren't looking exactly the way you want them to you can always write overwriting css. That being said, using their grid system I was able to come up with an example that fulfills your request above. Let me know if this is more what you were thinking:
<div class="container">
<form class="form-inline">
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input1" placeholder="input1" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input2" type="number" placeholder="input2" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-1 input3">
<label for="input3">Input 3
</label>
<input name="input3" type="checkbox" id="input3">
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input4" type="number" placeholder="input4" class="form-control" step="any" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2" *ngIf="!property.input3">
<input name="input5" type="number" placeholder="input5" class="form-control" required>
</div>
<div class="form-group col-xs-12 col-sm-6 col-md-4 col-lg-2">
<input name="input6" type="number" placeholder="input6" class="form-control" step="any">
</div>
<div class="col-xs-12 col-lg-1">
<button class="btn btn-default">Add</button>
</div>
</form>
</div>
And here is a codepen link to the code: http://codepen.io/egerrard/pen/KaNxvW
You can wrap those inputs with div and display:inline-block style to make them stay together.
Related
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
I have a form layout with 4 columns that stacks on small or xs screens with 100% width.
Is there a way to only stack 2 columns on top of the other two on small or xs?
Ideally, I'd like to show Column 1 and Column 2 in a row and Column 3 and Column 4 on the row below it on xs/small but all in the same row on medium/large.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<form role="search" method="GET" action="/search/">
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="first-name">Column 1:</label>
<input type="text" class="form-control" placeholder="Column 1" name="fist_name" id="first_name" value="">
</div>
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="last-name">Column 2:</label>
<input type="text" class="form-control" placeholder="Column 2" name="last_name" id="title-search" value="">
</div>
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="city-search">Column 3:</label>
<input type="text" class="form-control" placeholder="Column 3" name="city" id="city-search" value="">
</div>
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="city-search">Column 4:</label>
<input type="text" class="form-control" placeholder="Column 4" name="state" id="state-search" value="">
</div>
<div class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit"><i class="glyphicon glyphicon-search"></i>
</button>
</div>
</form>
jsfiddle
Ideal layout on small screen:
You need to add class for extra small devices XS in this case col-xs-6
Take a look at Boostrap Docs to know which class to use in each breakpoint
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<form role="search" method="GET" action="/search/">
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="first-name">Column 1:</label>
<input type="text" class="form-control" placeholder="Column 1" name="fist_name" id="first_name" value="">
</div>
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="last-name">Column 2:</label>
<input type="text" class="form-control" placeholder="Column 2" name="last_name" id="title-search" value="">
</div>
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="city-search">Column 3:</label>
<input type="text" class="form-control" placeholder="Column 3" name="city" id="city-search" value="">
</div>
<div class="form-group form-group-sm col-xs-6 col-sm-3">
<label for="city-search">Column 4:</label>
<input type="text" class="form-control" placeholder="Column 4" name="state" id="state-search" value="">
</div>
<div class="input-group-btn">
<button class="btn btn-default btn-sm" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</form>
Use these classes for the four <div>: form-group form-group-sm col-sm-6 col-xs-6 col-md-3.
I have this user profile form which is pretty small.
The point is: the form/fields should be small but the page is huge. I don't need this fields occupying the whole page.
So what I wanted to do is to make the fields smaller.
The current structure is 2/12 to the menu and 10/12 to the form.
One way I could do it is to simply put the form inside of a smaller column , such as 4/12 or 5/12. But the problem is when the page is resized to a smartphone for instance the form should occupy the whole page again, like 10/12.
Where's the page:
Where's the code:
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-2">
<ul class="list-group">
<strong>Profile</strong>
Password
</ul>
</div> <!--/col-md-2-->
<div class="col-md-10">
<form>
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E.">
</div>
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote">
</div>
<div class="form-group">
<label for="inputTitle">Title:</label>
<input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="wilie#acmecorp.com">
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Notifications:</label>
<select class="form-control" id="selectEmailNotifications">
<option>None</option>
<option>Daily</option>
<option>Weekly</option>
<option selected>Monthly</option>
</select>
<p class="help-block">Receive email notifications with all the most important metrics of your business.</p>
</div>
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button>
</form>
</div> <!--/col-md-10-->
</div><!--/row -->
</div><!--col-md-12-->
</div><!--/row-->
If you want to resize it in small screens, You should use col-xs (extra small devices and phones (<768px)) and col-sm (small devices and tablets (≥768px)) classes. And If you don't want your form to cover whole the page horizontally, you can also use col-..-offset-.. class for giving margin to your form.
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-md-2 col-sm-2 col-xs-2">
<ul class="list-group">
<strong>Profile</strong>
Password
</ul>
</div> <!--/col-md-2 col-sm-2 col-xs-2-->
<div class="col-md-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2">
<form>
<div class="form-group">
<label for="inputName">Name:</label>
<input type="text" class="form-control" id="inputName" placeholder="Enter your name here" value="Wile E.">
</div>
<div class="form-group">
<label for="inputLastName">Last Name:</label>
<input type="text" class="form-control" id="inputLastName" placeholder="Enter your last name here" value="Coyote">
</div>
<div class="form-group">
<label for="inputTitle">Title:</label>
<input type="text" class="form-control" id="inputTitle" placeholder="Enter your title here" value="CEO">
</div>
<div class="form-group">
<label for="inputEmail">Email:</label>
<input type="email" class="form-control" id="inputEmail" placeholder="Enter your email here" value="wilie#acmecorp.com">
</div>
<div class="form-group bottom-buffer">
<label for="selectEmail">Notifications:</label>
<select class="form-control" id="selectEmailNotifications">
<option>None</option>
<option>Daily</option>
<option>Weekly</option>
<option selected>Monthly</option>
</select>
<p class="help-block">Receive email notifications with all the most important metrics of your business.</p>
</div>
<button type="submit" class="btn btn-success"><span class="glyphicon glyphicon-ok-sign" aria-hidden="true"></span>Save Changes</button>
</form>
</div> <!--/col-md-6 col-md-offset-2 col-sm-6 col-sm-offset-2 col-xs-6 col-xs-offset-2-->
</div><!--/row -->
</div><!--col-md-12 col-sm-12 col-xs-12-->
</div><!--/row-->
If You are using the bootstrap Framework you can define the behavior of The col- div using col-xs for mobile, col-sm for portrait tablet and col-md for landscape tablet. See http://getbootstrap.com/css/#grid
If you feel limited by the default definition you Can also extend the grid system writing more specific media queries, e.g. for xxl screen
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.
How to align button to text box?
<form accept-charset="UTF-8" action="/action" method="get">
<div class="form-group">
<div class="row">
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<label for="from_date">From date</label>
<input class="form-control" id="from_date" name="from_date" type="text">
<p class="help-block">* Dates are inclusive</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
<label for="to_date">To date</label>
<input class="form-control" id="to_date" name="to_date" type="text">
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
<input class="btn btn-primary" name="commit" type="submit" value="Go">
</div>
</div>
</div>
</form>
Adding a padding to your last div is one solution.
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 toppadding">
<input class="btn btn-primary" name="commit" type="submit" value="Go">
</div>
in css class add
.toppadding
{
padding-top:23px;
}
Check this Demo
Labels are what's throwing it off, you can use the solution above or get rid of labels altogether by using placeholders:
<input class="form-control" name="to_date" type="text" placeholder="To Date">
http://jsfiddle.net/6y88u1ts/