Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

Question

I m trying to move to the new boostrap 3 grid and I m facing some difficulties.

1. How to have the grid to stack below 480px but not between 480px and 768px?

Answer 1

To implement any changes for tiny to small devices you will need to include your own media queries to add your own additional breakpoints.

For example:

@media (max-width: 480px) { 
   .no-float {
       display:block;
       float:none;
       padding:0;
   }
}

I am not quite sure what you are trying to achieve with this but this is how you would apply styles where the screen width is below 480px.

Answer 2

1. Use class .col-ts-12 for all 100% divs under 480px and put this code at the end of bootstrap.css:

   @media (max-width: 480px) { 
       .col-ts-12 { float: none; }
   }
   

Answer 3

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).

update In 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