I have the following html: On the 3rd section there is no buttom padding after the button group. Why is that?
<section style="background-color:#e67e22">
<div class="container">
<h1>Edit</h1>
</div>
</section>
<section class="well" >
<div class="container">
<label for="inventory-name">Inventory Name</label>
<input type="text" value="#Model.InventoryName" autofocus class="form-control" id="inventory-name" />
</div>
</section>
<section >
<div class="container">
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default">Save Changes</button>
<button type="button" class="btn btn-default">Add</button>
<button type="button" class="btn btn-success">Post to Facebook</button>
<button type="button" class="btn btn-danger">Delete</button>
</div>
</div>
</section>
<section>
<div class="container">
<p>Hello</p>
</div>
</section>
The Official getbootstrap.com has also used there custom class to provide margin-top and margin-bottom.
See this image to see developer view of the custom class they used
Comment if you are not getting...!
Related
i want to prevent the elements inside my main div from stacking on top of each other when window is resized.
regular view
window resized
<body>
<div class="calbody">
<div class="top-body">
<h1 class="body_name">CALCULATOR</h1>
<div><input class="screen" type="text" /></div>
</div>
<div class="mainbody">
<div class="container">
<div class="row">
<div class="col-sm">
<button type="button" class="b1 btn btn-danger">+</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">-</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger" \>x</button>
</div>
<div class="col-sm">
<button type="button" class="btn btn-danger">/</button>
</div>
</div>
</body>
yes, i am using bootstrap-5. It worked after changing col-sm to col.Thank You.
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'm trying to fix the vertical position of a bootstrap column without success.
<div class="col-sm-9 col-xs-12 fixed">
<div class="row pad-20">
<div class="col-xs-6">
<button type="button" value="0" class="btn {{color1}} btn-lg btn-block choice">{{choice1}}</button>
</div>
<div class="col-xs-6">
<button type="button" value="1" class="btn {{color2}} btn-lg btn-block choice">{{choice2}}</button>
</div>
</div>
</div>
</div>
Where fixed is:
.fixed{
position: fixed;
bottom: 5px;
}
The proportion sm-9 and xs-12 are not respected ...
Any help?
Do you have a <div class="container"> around the markup you show? Also, in the markup you show there's an extra closing </div> tag.
Seems to be working in this JSFiddle I put together:
https://jsfiddle.net/o540r7cf/
HTML:
<div class="container">
<div class="row">
<div class="col-sm-9 col-xs-12 fixed">
<div class="row">
<div class="col-md-6 col-xs-6">
<button type="button" value="0" class="btn btn-primary btn-lg btn-block"> Choice 1</button>
</div>
<div class="col-md-6 col-xs-6">
<button type="button" value="1" class="btn btn-primary btn-lg btn-block">Choice 2</button>
</div>
</div>
</div>
</div>
</div>
CSS:
.fixed {
position: fixed;
bottom: 5px;
}
I was working on a sample where I had to align a button group to the right.
I found the css class .pull-right.
While it correctly moved the button group, I was unable to reset the next section.
I've used the clearfix mixin on several objects, I cannot clear the way section intersects with the button group.
The sample on bootply (link below):
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
And the css
.foo
{
.clearfix();
}
.foo::before,
.foo::after {
content: " "; // 1
display: table; // 2
}
.foo::after {
clear: both;
}
Due to missing less mixin support I manually implemented the mixin
Here is a runnable example: http://www.bootply.com/8GgDsWc8kZ
I've been googling this and I put foo into every div there, no place cleared the section from intersecting.
Any hints appreciated.
Just add a div between the buttons and the box with the clearfix class from Bootstrap applied to it.
BOOTPLY
HTML:
<div class="container foo">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<div class="clearfix"></div>
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
You appear to be missing some tags. That's what's causing Bootstrap to not function the way you expect.
BOOTPLY
<div class="container foo">
<div class="row">
<div class="col-md-3 pull-right">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<section class="debug text-center row">
<div class="col-md-12">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</div>
</section>
</div>
I'd suggest that you take some time to read over the grid system documentation on the Bootstrap website.
Here you go, I added a boostrap "row" and "col-xs-12" around your 3 buttons, as well as around your section.
<div class="container foo">
<div class="row">
<div class="col-xs-12">
<div class="btn-group pull-right" role="group">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<section class="debug text-center">
<h1>Bootstrap starter template</h1>
<p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
</section>
</div>
</div>
</div>
http://www.bootply.com/0TSYSI4T8b
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>