Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
update jan 2014
See also: https://github.com/twbs/bootstrap/issues/10203
update 21 aug 2013
Since Twitter Bootstrap 3 RC2 the col-* mentioned below has been renamed to xs-col-*
There are four grid classes now: xs-col-* (mobile, never stacks), col-sm-* (tablet, stacks below 768px), col-md-* (laptops,stacks below 992 px) and col-lg-* (desktop, stacks below 1200px).
updateIn my previous answer i use this table from the recent docs:
[old image removed]
When i test this values if found something different:
- "col-xs-*" will be applied always (never stacks)
- "col-sm-*" will be applied between 768 and higher (992px) (stacks at 767)
- "col-lg-*" will be applied between 992 and higher (stacks at 991)
In variables.less you will find:
// Media queries breakpoints
// --------------------------------------------------
// Tiny screen / phone
@screen-tiny: 480px;
@screen-phone: @screen-tiny;
// Small screen / tablet
@screen-small: 768px;
@screen-tablet: @screen-small;
// Medium screen / desktop
@screen-medium: 992px;
@screen-desktop: @screen-medium;
But there doesn't seem to be a breakpoint at 480px (or as @fred_ says the grid is missing the col-ts-* (tiny to small) set of classes). See also: https://github.com/twbs/bootstrap/issues/9746
To set the stacking point at 480px you will have to recompile yours css. Set @screen-small to 480px; and define your cols with:<div style="background-color: red" class="col-sm-4">
after that.
Note this will change @grid-float-breakpoint also cause it is defined as @grid-float-breakpoint: @screen-tablet;
.
When adding a row to the container i don't find problems with padding.
Or try: http://www.bootply.com/70212 it will stack below 480px by adding a media query (the javascript is used for illustration only)
previous answer
From now Twitter’s Bootstrap defines three grids: Tiny grid for Phones (<480px), Small grid for Tablets (<768px) and the Medium-large grid for Destkops (>768px). The row class prefixes for these grid are “.col-”, “.col-sm-” and “.col-lg-”. The Medium-large grid will stack below 768 pixels screen width. So does the Small grid below 480 pixels and the tiny grid never stacks.
With your "col-4" prefix the grid will never stack. So remove "col-4" to let your grid stack below the 480px. This also will remove padding cause is stacks now.
See also: http://bassjobsen.weblogs.fm/migrate-your-templates-from-twitter-bootstrap-2-x-to-twitter-bootstrap-3/ and Writing Twitter's Bootstrap with upgrading to v3 in mind
How to remove responsive features in Twitter Bootstrap 3?
To inactivate the non-desktop styles you just have to change 4 lines of code in the variables.less file. Set the screen width breakpoints in the variables.less file like this:
// Media queries breakpoints
// --------------------------------------------------
// Extra small screen / phone
// Note: Deprecated @screen-xs and @screen-phone as of v3.0.1
@screen-xs: 1px;
@screen-xs-min: @screen-xs;
@screen-phone: @screen-xs-min;
// Small screen / tablet
// Note: Deprecated @screen-sm and @screen-tablet as of v3.0.1
@screen-sm: 2px;
@screen-sm-min: @screen-sm;
@screen-tablet: @screen-sm-min;
// Medium screen / desktop
// Note: Deprecated @screen-md and @screen-desktop as of v3.0.1
@screen-md: 3px;
@screen-md-min: @screen-md;
@screen-desktop: @screen-md-min;
// Large screen / wide desktop
// Note: Deprecated @screen-lg and @screen-lg-desktop as of v3.0.1
@screen-lg: 9999px;
@screen-lg-min: @screen-lg;
@screen-lg-desktop: @screen-lg-min;
This sets the min-width on the desktop style media query lower so that it applies to all screen widths. Thanks to 2calledchaos for the improvement! Some base styles are defined in the mobile styles, so we need to be sure to include them.
Edit: chris notes that you can set these variables in the online less compiler on the bootstrap site
Bootstrap - Removing padding or margin when screen size is smaller
The @media query specifically for 'phones' is..
@media (max-width: 480px) { ... }
But, you may want to remove the padding/margin for any smaller screen sizes. By default, Bootstrap adjusts margins/padding to the body, container and navbars at 978px.
Here are some queries that have worked (in most cases) for me:
@media (max-width: 978px) {
.container {
padding:0;
margin:0;
}
body {
padding:0;
}
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: 0;
margin-right: 0;
margin-bottom:0;
}
}
Demo
Update for Bootstrap 4
Use the new responsive spacing utils which let you set padding/margins for different screen widths (breakpoints):
https://stackoverflow.com/a/43208888/171456
How to turn off the responsive feature completely from Twitter Bootstrap 3?
EDIT: My code below was written for v3.0.0RC2, but in v3.0.0 the docs got a section specifically about this question: http://getbootstrap.com/getting-started/#disable-responsive
Use the col-xs-X
classes since they are constant percentage widths. Then the responsiveness comes from .container
using max-width
at different media sizes. You can define your own alternative to .container
and use everything else like normal:
Fiddle for the example below: http://jsfiddle.net/xTePL/
HTML:
<!-- Don't use .container at all or you will have to
override a lot of responsive styles. -->
<div class="container-non-responsive">
<div class="row">
<div class="col-xs-4">
<h1>Welcome to Non-responsive Land</h1>
</div>
<div class="col-xs-8">
<!-- More content, more content -->
</div>
</div>
</div>
CSS:
.container-non-responsive {
/* Margin/padding copied from Bootstrap */
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
/* Set width to your desired site width */
width: 1170px;
}
What happens in Bootstrap between 480 and 768px?
Unofficially there is a breakpoint between 480 and 768 called ms (then you use col-ms etc.), see this discussion.
See also my contribution with examples to see the ms hack in action.
Form without the ms hack
Form WITH ms hack
Center a column using Twitter Bootstrap 3
There are two approaches to centering a column <div>
in Bootstrap 3:
Approach 1 (offsets):
The first approach uses Bootstrap's own offset classes so it requires no change in markup and no extra CSS. The key is to set an offset equal to half of the remaining size of the row. So for example, a column of size 2 would be centered by adding an offset of 5, that's (12-2)/2
.
In markup this would look like:
<div class="row">
<div class="col-md-2 col-md-offset-5"></div>
</div>
Now, there's an obvious drawback for this method. It only works for even column sizes, so only .col-X-2
, .col-X-4
, col-X-6
, col-X-8
, and col-X-10
are supported.
Approach 2 (the old margin:auto
)
You can center any column size by using the proven margin: 0 auto;
technique. You just need to take care of the floating that is added by Bootstrap's grid system. I recommend defining a custom CSS class like the following:
.col-centered{
float: none;
margin: 0 auto;
}
Now you can add it to any column size at any screen size, and it will work seamlessly with Bootstrap's responsive layout:
<div class="row">
<div class="col-lg-1 col-centered"></div>
</div>
Note: With both techniques you could skip the .row
element and have the column centered inside a .container
, but you would notice a minimal difference in the actual column size because of the padding in the container class.
Update:
Since v3.0.1 Bootstrap has a built-in class named center-block
that uses margin: 0 auto
, but is missing float:none
, you can add that to your CSS to make it work with the grid system.
Related Topics
Equal Height of Elements Inside Grid Item with CSS Grid Layout
Stacking Order of Elements Affected by Opacity
Css3 ::Selection Behaves Differently in Ff & Chrome
CSS Media Queries Min-Width and Min-Device-Width Conflicting
How to Prevent CSS Gradient Banding
Can You Apply a Width to a :Before/:After Pseudo-Element (Content:Url(Image))
CSS Specificity and Inheritance
How to Make Firefox Print a Background-Color Style