Bootstrap section padding issue - css

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

how to prevent the elements inside the div from stacking when resizing the window?

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.

Bootstrap horizontal form has additional margins

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>

Bootstrap: fixed vertical position of a responsive column?

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;
}

Bootstrap's pull-right is not cleared or reset

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

Bootstrap 3 Forms. Alignment when adding columns

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>

Resources