When using bootstrap 3.3, what's the correct way to add padding between columns once they go from horizontal to stacked vertical. For example, if I have the following code below, when they stack vertical at the xs breakpoint, the top block and bottom block are sandwiched together without padding/margin between them. I don't want to put padding on the col-sm-7 because I don't need it there when the columns are side by side. I suppose one way would be to make a specific class that uses media queries to add padding at the xs breakpoint, but curious if there are any other solutions out there...or if I'm missing something in bootstrap.
<div class="row">
<div class="col-sm-7">
<div>Plan 1: Basic</div>
<div>$99 per month</div>
<div>4 of 5 slots used</div>
</div>
<!-- WHEN THESE STACK I NEED SPACE BETWEEN THEM -->
<div class="col-sm-5">
<div class="text-right">
<div><button class="btn btn-sm btn-block">Manage Users</button></div>
<div><button class="btn btn-sm btn-block">Manage Plan</button></div>
</div>
</div>
</div>
There is no top and bottom padding on .row and .col-X-X in Bootstrap, the reason why you see vertical spacing in their examples is because the content inside the .col-X-X is inside a p, ul, form, h1-h6, etc., tag which has top and bottom margin. If you used, instead of div, a p tag you would get some vertical space. If that's not agreeable, generally I make a vertical spacer like this:
<hr class="vertical-spacer visible-xs">
Using the responsive utilities to indicate when you want that space to show up.
CSS
hr.vertical-spacer {
border: 0px;
background: none;
margin: 2% 0;
height: 1px;
width: 100%;
clear: both;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Adding padding at the max-width media query would also work, however you would get extra spacing when you do put your content inside p, h1-h6, and so forth, and this would not be consistent or recommended, that's why there's no padding/margin directly on the .col-X-X classes by default.
Simply adding this html in the top can give you a small space.
<div class="row">.</div>
Related
one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.
I'm trying to set even left and right margins on a container using the Bootstrap spacing property mx-#, but this causes the container alignment to go crazy - see image attached. I want to apply margins to large, medium, and small breakpoints, but have the container stay centered. I've applied my own custom css of max-width to the container. Also, I already tried turning box-sizing: border-box on and off, but this didn't seem to help either. Any ideas how to fix this?
* {
box-sizing: border-box;
}
.container {
max-width: 960px;
}
<div class="container bg-white text-dark px-4 my-lg-5 my-md-4 my-3 mx-3">
<!--mx-lg-5 mx-md-3 mx-sm-0 // px-lg-4 px-md-3 px-sm-0 px-0-->
<div class='row'>
<div class='col-12'>
<h3>About me</h3>
<hr>
</div>
</div>
</div>
Try giving these css properties as well, width:100%. also could you paste the code, it will be helpful to debug
I have one col, one row, and there three nested columns. Within each column is a div button. I didn't use the bootstrap default button on purpose, and I have created my own, just that you see one column is being eaten.
Please see the image:
I am almost certain there is nothing wrong with HTML. Main div col is set to col-md-1 to test nested responsive elements within smaller scale. Does anyone understand why content(button) is acting as it would be too big for columns and why columns are being eaten in my case?
here is the code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="col-md-1 col-xs-1">
<div class="row" style="padding:0 !important;margin:0 !important;">
<div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
<button class="button" type="button" style="background-color: green; height: 20vmin; width: 100%; border:none; display: block;"></button>
</div>
<div class="col-md-10 col-xs-10" style="padding:0 !important;margin:0 !important;">
<button class="button" type="button" style="background-color: red; height: 20vmin; width: 100%; border:none; display: block;"></button>
</div>
<div class="col-md-1 col-xs-1" style="padding:0 !important;margin:0 !important;">
<button class="button" type="button" style="background-color: black; height: 20vmin; width: 100%; border:none; display: block;"></button>
</div>
</div>
</div>
TL;DR
The problem appears because of the column gutter, which by default is 30px. This means the minimum width of a column will always be 30px, no matter size it would have. Therefore, when you have a column with a width less than 30px, it is actually still going to have 30px as total width, and the columns will eat from each other because of that padding.
In detail
The working snippet
Firstly, I want to show you the working snippet I have managed to get. I have removed the inline styling from the HTML markup and added some CSS classes for better readability and easier understanding.
.pa-0 {
padding: 0 !important;
}
.ma-0 {
margin: 0 !important;
}
.my-button {
display: block;
height: 20vmin;
border: none;
outline: none;
background: transparent;
}
.bg-green {
background-color: green;
}
.bg-red {
background-color: red;
}
.bg-black {
background-color: black;
}
.bg-blue {
background-color: blue;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="row">
<div class="col-xs-3 pa-0 bg-blue">
<div class="row ma-0">
<div class="col-xs-1 pa-0 bg-green">
<button class="button my-button" type="button">
</button>
</div>
<div class="col-xs-10 pa-0 bg-red">
<button class="button my-button" type="button">
</button>
</div>
<div class="col-xs-1 pa-0 bg-black">
<button class="button my-button" type="button">
</button>
</div>
</div>
</div>
</div>
</div>
The problem
The problem described appears because of the way columns and rows are styled in Bootstrap. As you may already know, columns are having a gutter (padding) of 15px on each side, and rows have a margin of -15px, whose purpose is to remove the padding from the parent container (assuming correct syntax is applied, i.e. parent is a container or column). This means that the spacing created by the parent div is removed with the negative margin from the row.
This is a neat way of creating responsive design, but it also has an issue, which is the one you describe. Because all elements in Bootstrap have box-sizing: border-box, it means that the width of an elements is including the padding.
For example, if you have an column with the width of 100px, its size will be decreased by the gutter, which is by default 30px. Therefore, the actual width of the column will be 70px.
Having that said, let's think what is happening when the width of this column is less than 30px.
Our column is now 20px in width. As we need to decrease this size by the 30px gutter, we would normally get a negative width, which is impossible. Thus, the actual width of the column will be 0, and the padding will still be applied as 30px.
A solution
Simply create some utility classes which removes the padding and margins from the columns and rows. This way, the column will have the size they should, and the buttons will correctly be fit in their parents without being eaten by the padding from other elements.
I have used the same naming for the padding and margin utility classes as in Bootstrap 4. In pa-0, p comes from padding, a from all and 0 from the value set to this attribute.
Notes for your initial snippet
I am not sure the markup you have provided is in the way you normally do it, but it is worth to note:
It is generally a bad practice to have inline-styling set in your HTML markup1; mainly because of the Separation of Concerns principle and the reuse of styling you write. In your case, except for the background, you have used the same styling for buttons in three places - you can just create a new CSS class and use it in all three places.
In the Bootstrap grid system2, the column needs to always be a direct descendant of a row, and the row needs to be either descendant of a container or column, as you can see in the working example. By not having correct Bootstrap markup, unexpected styling behaviour might occur.
Useful links
SO post: What's so bad about inline styling?
Separation of Concerns in Web Development at Wikipedia
The Bootstrap 3 grid system
box-sizing at CSS-Tricks
The Definitive Guide to Using Negative Margins at Smashing Magazine
Bootstrap 4 Spacing utility classes
I need to design something the first one in the picture below, there should not be left or right padding.
What I really want to do is:
Two columns with background color. I've added two columns but bootstrap container and column classes adds padding and margins.
Content inside those columns must be in normal paddings and margins.
There must be no space / gutter between cols.
It must be follow bootstrap's breaking points.
You don't need to change anything in native Bootstrap to achieve this if you have two <div>s in the same <row>. Just move your left and right classes into the same line as col-xs-4 / col-xs-8. Also you shouldn't have a <section> as a parent of your <container>, you should move it be a child of container (though I removed it below, since it seems unecessary).
Example:
<div class="container"> //change this to container-fluid if you want full screen width
<div class="row">
<div class="col-xs-4 left">
</div>
<div class="col-xs-8 right">
</div>
</div>
</div>
JS Fiddle Demo
Create a nopadding class like this one:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
If you add that class to your column divs there will be no padding on them.
There are some options I can choose from when it comes to horizontal center alignment with Bootstap.
I can either use offset class or use blank span class as a placeholder.
One other option can be using custom alignment like the following
.center {
float: none;
margin: 0 auto;
}
None of these options solve my issue because the content of the div container has to fill up the width by 100%.
Let's say I have the following
<div class="container-fluid">
<div class="row-fluid">
<div class="span4 offset4">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
</div>
If the buttons do not fill up the whole div space of span4, I won't get the real center alignment. Perhaps, I can make the content stretch to 100% but I don't know if this is any good practice.
Here I have a canvas to play with. JS BIN
Since you have inline elements you can just use the .text-center class on the span, also your're probably better off using offsets than empty elements:
HTML
<div class="row-fluid">
<div class="span4 offset4 text-center">
<button class="btn">1-1</button>
<button class="btn">1-2</button>
</div>
</div>
Updated demo: http://jsbin.com/ayuFEhO/2/edit
You don't need add a new class, if you want horizontal align this buttons, just use .text-center here is a bin http://jsbin.com/UVeGejO/1/edit
Obs: text-center class already exist on twitter's bootstrap code.