I am trying to play with adding columns to my bootstrap forms.
<section class="test-form">
<h3>Test Form</h3>
<div class="form-group form-group-sm">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 2</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 3</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 4</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 5</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 6</button>
</div>
</section>
The problem with the above is that my desired output is as follows:
The left side of test button 2 and test button 4 should be inline with the left side of test button 1.
The right side of test button 3 and right side of test button 6 should be in-line with the right side of test button 1
Any advice on the correct way of achieving this?
Screenshot to explain below.
The spacing you are seeing is caused by the padding bootstrap adds to col-* classes. You can either override this padding for those elements or wrap all the elements of the form in a row and add a col-* class wrapping div to elements which don't have this class.
Here is an example of the latter.
HTML:
<section class="test-form">
<div class="row">
<div class="col-xs-12">
<h3>Test Form</h3>
<div class="form-group form-group-sm">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 2</button>
</div>
<div class="form-group form-group-sm col-xs-6">
<button class="btn btn-primary btn-block">Test Button 3</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 4</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 5</button>
</div>
<div class="form-group form-group-sm col-xs-4">
<button class="btn btn-primary btn-block">Test Button 6</button>
</div>
</div>
</section>
Live example: http://www.bootply.com/1H1KXSAVqm
Bootply
The quickest fix I found was doing this:
<div class="form-group form-group-sm col-xs-12">
<select name="" class="form-control">
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm col-xs-12">
<select class="form-control" name="" >
<!-- Various Options -->
</select>
</div>
<div class="form-group form-group-sm col-xs-12">
<input class="form-control" type="number" min="0"/>
</div>
<div class="form-group form-group-sm col-xs-12">
<button class="btn btn-block btn-primary">Test Button 1</button>
</div>
Basically, where you didn't have the right padding, I added a col-xs-12 class to style them similar to the rest of your inputs.
Hope that helps!
This is how I achieved what it sounds like you are going for.
<div class='row'>
<div class='col-md-6 column'>
*Inputs*
</div>
</div>
<div class='row'>
<div class='col-md-6 column'>
*Inputs*
</div>
</div>
Related
Specifically, the problems are:
The first row wraps to a second line
The input fields do not line up vertically
It might be possible to use a table, but that might break responsiveness on mobile devices. Is there a clean/elegant way to align these input fields?
https://codepen.io/dtgq/pen/rwQRoK
For posterity, a copy of the HTML on the codepen:
<div class="modal fade" id="fjFilterModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Filter</h5>
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
</div>
<div class="modal-body">
<div class="form-group row">
<label class="col-form-label col-md-2">Cost</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<div class=input-group>
<span class=input-group-addon>$</span>
<input class=form-control name="max_cost-gte" type=number placeholder="Minimum" step=1 min=0>
<span class=input-group-addon>.00</span>
</div>
</div>
to
<div class="form-group mx-2">
<div class=input-group>
<span class=input-group-addon>$</span>
<input class=form-control name="min_cost-lte" type=number placeholder="Maximum" step=1 min=0>
<span class=input-group-addon>.00</span>
</div>
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-2">Start date</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<input class="form-control" type="date" name="min_date-gte">
</div>
to
<div class="form-group mx-2">
<input class="form-control" type="date" name="min_date-lte">
</div>
</div>
</div>
</div>
<div class="form-group row">
<label class="col-form-label col-md-2">Available units</label>
<div class=col-md-10>
<div class="form-inline">
<div class="form-group mx-2">
<div class=input-group>
<input class=form-control name="sum_vacant-gte" type=number min=0 placeholder="Minimum">
<span class=input-group-addon>units</span>
</div>
</div>
to
<div class="form-group mx-2">
<div class=input-group>
<input class=form-control name="sum_vacant-lte" type=number min=0 placeholder="Maximum">
<span class=input-group-addon>units</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<button type="button" class="btn" data-toggle="modal" data-target="#fjFilterModal">
Filter
</button>
i cant find the correct config to this config in bootstrap 3 ...
i have this input field but i cant put the image in that position
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input size="16" class="form-control" type="text" name="nombre" required placeholder="Tu nombre completo">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input size="16" class="form-control" type="email" name="correo" required placeholder="Tu email">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar"><span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>
Try this:
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
<div class="row">
<div class="input-group-btn">
<button type="button" class="btn btn-success" id="agregar">
<span class="glyphicon glyphicon-plus"></span> Agregar usuario sugerido</button>
</div>
</div>
</div>
<div class="col-sm-6">
Image here
</div>
</div>
</div>
</div>
You should have another look at the grid docu. Nesting is an solid option furthermore you do not need to use col-sm-6 combined with col-md-6 only use the smaller one if the values are the same.
You are making it a little too complicated, see my codepen. When working with Bootstrap think big to small. It helps you develop a layout and then work your way down to smaller things.
Hope this helps! :)
http://codepen.io/sequential/pen/egxbbK
<div class="row">
<div class="col-sm-6 tier1">
<div class="smBox"></div>
<div class="smBox"></div>
</div>
<div class="col-sm-6 tier1">
<div class="lgBox"></div>
</div>
</div>
I am trying to add a modal editing form to a page using Bootstrap. The idea is that when the user picks an item from the grid, an editing form should pop up showing current values and allowing them to make changes. Here's the code for the modal form:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="form-horizontal" id="myForm" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
<div class="input-group col-sm-5">
<input type="text" runat="server" class="form-control required" id="tbTitle">
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
<div class="input-group col-sm-5">
<input type="text" runat="server" class="form-control required" id="tbInternalTitle">
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
<div class="input-group col-sm-5">
<input type="text" runat="server" class="form-control required" id="tbPrice">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Now, the thing is, when I click the "Edit" button on a row in the GridView control on the page, it does what it should - it retrieves the plan data and populates the form fields. I know this, because if I examine the page source after clicking an item, here's what I see in the HTML:
<div class="container-fluid page-top">
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="form-horizontal" id="myForm" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbTitle" type="text" id="cpMain_tbTitle" class="form-control required" value="Basic Gold Program" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbInternalTitle" type="text" id="cpMain_tbInternalTitle" class="form-control required" value="BASEPLAN" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbPrice" type="text" id="cpMain_tbPrice" class="form-control required" value="$75.00" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
However, when viewing the page normally and clicking the "Edit" button for a row, here's a screenshot of what actually appears:
I odn't know why the form data itself doesn't show up, but it's driving me nuts! I don't seem to have any HTML errors (unclosed tags, etc.), so I can't track down what's happening here. Any help?
I put your code into a snippet and it works... odd.
If you can see a correct HTML in the browser's console then maybe it's a css problem.
You should try to set a height property to be sure...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid page-top">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="form-horizontal" id="myForm" role="form">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">My modal</h4>
</div>
<div class="modal-body">
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbTitle" type="text" id="cpMain_tbTitle" class="form-control required" value="Basic Gold Program" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbInternalTitle" type="text" id="cpMain_tbInternalTitle" class="form-control required" value="BASEPLAN" />
</div>
</div>
</div>
<div class="form-group has-feedback">
<div class="col-lg-12">
<label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
<div class="input-group col-sm-5">
<input name="ctl00$cpMain$tbPrice" type="text" id="cpMain_tbPrice" class="form-control required" value="$75.00" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
Well, the issue was how I was calling the modal form to open. I had to use a different JavaScript function to invoke it, since the other one worked but was buggy in some way. The Javascript function is:
function openModal() {
$('#myModal').modal('show');
}
and it's called from the server side with this:
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
The other one I was using didn't quite get it right, although the modal still appeared. Weird, but it worked. Thanks for the feedback, guys!
The button that's next to a column containing a select element appears to have some extra margins on it. On my actual site it seems to be extra positive margin, while on CodePen it appears to be negative.
I suspect they are the same problem though with the markup though. Here's the CodePen demo: http://codepen.io/anon/pen/gabZMo?editors=100
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4">New Event</button>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
I've looked through the Bootstrap docs and this should be the correct markup. I've also tried wrapping the button in its own column, but that didn't change anything.
You have 3 options to resolve the problem,
Put the <button class="btn btn-primary btn-block">Free Quote</button> inside <div class="form-group"></div>
Reason the button is pushing left of right because col-sm-4 selector has left and right padding 15px which is getting overwritten by btn-default selector padding: 6px 12px;
So add custom selector custom-margin and define custom CSS
1 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
</div>
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 1
2 HTML
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-sm-8">
<select class="form-control">...</select>
</div>
<button class="btn btn-default col-sm-4 custom-margin">New Event</button>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
Fiddle 2
Or Do it right way
3 HTML
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<select class="form-control">...</select>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
</div>
</div>
</div>
</div>
Fiddle 3
You don't want to use col-sm-4 directly on the button. Put btn-block on the button and stick it in a col-sm-4 div, like so:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="row">
<div class="form-horizontal col-md-6">
<div class="form-group">
<div class="col-xs-8">
<select class="form-control">
<option value="1">Test Event</option>
<option value="7">Test Event 2: The Re-testening</option>
</select>
</div>
<div class="col-xs-4">
<button class="btn btn-default btn-block">New Event</button>
</div>
</div>
<button class="btn btn-primary btn-block">Free Quote</button>
</div>
</div>
I was trying to embeds three different forms in a single horizontal row.
The first(shop), second(locality) and third(search) form element should occupy 50%,30% and 20% (6,4 and 2 bootstrap col unit) of total horizontal row.
In mobile view, each three form element should be adjust in individual row.
I tried following:
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-md-6">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-md-4">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-md-2">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
Is this the correct approach?
Should I use bootstrap inline form for this purpose?
I tried using inline form, but its difficult to set width of each form elements.
You are correct you just need to adjust for small screens with col-xs-12 & change md to sm.. xs is mobile...
<div class="row search-form-wizard">
<form role="form" class="">
<div class="form-group form-group-lg">
<div class="col-sm-6 col-xs-12">
<label class="sr-only" for="select2_sample6"></label>
<input type="hidden" id="select2_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="form-group form-group-lg">
<div class="col-sm-4 col-xs-12">
<label class="sr-only" for="selectextra_sample6"></label>
<input type="hidden" id="selectextra_sample6" class="form-control select2 input-lg" >
</div>
</div>
<div class="col-sm-2 col-xs-12">
<button type="button" class="btn green btn-lg btn-block"><i class="fa fa-search"></i> Search</button>
</div>
</form>
</div>
You have to specify a small (col-sm-*) width for each one. Edit like another answer col-xs for extra-small screens.
<div class="col-md-6 col-sm-12">
<div class="col-md-4 col-sm-12">
<div class="col-md-2 col-sm-12">