10

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?
  2. above 768px the padding left of the first and the padding right of the last are outside the container, but below 768px the padding is inside the container so the look is different because the content is no more aligned with a container that could be above.
  3. when the grid stack the padding remain but to me it should be at 0.

Any help would be welcome I m using the code below with bootstrap 3 RC1

    <div class="container" style="background-color: purple;">
container

</div>

<div class="container">
    <div class="row">
        <div style="background-color: red" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: blue" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
        <div style="background-color: green" class="col-4 col-sm-4 col-lg-4"><img data-src="holder.js/100%x200"></div>
    </div>
</div>
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
fred_
  • 1,486
  • 1
  • 19
  • 31
  • 1
    In fact to me the grid is missing the col-ts-* (tiny to small) set of classes – fred_ Jul 29 '13 at 13:43
  • This might be an option for you if you need more control for 'tiny' columns: https://gist.github.com/andyl/6360906. But @otopic's solution with width: 100%; may well suit most people's requirements for this extra/missing column size/control. – Matty J Mar 05 '15 at 00:45

3 Answers3

16

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:

Bootstrap 3 Grid

  • "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

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Thx Bass, but it does work. with col-4 it doesn't stack, without col-4 it start stacking a 768px, I would like it to start stacking below 480px and remain horizontal above. On my side it doesn't remove the padding as well – fred_ Jul 29 '13 at 09:54
  • 2
    @fred_ the suggestion from Bass works for me for the stacking, please see http://www.bootply.com/70143 , also note how the padding looks when you apply colors to the same elements (ie col and col, not container and col). – David Taiaroa Jul 29 '13 at 11:13
  • 1
    Hello David, in your example the grid start stacking at 768px. The goal is to have it start stacking below 480px. that's an idea to put a row inside the top container indeed for the padding. it doesn't remove it but it looks more aligned. – fred_ Jul 29 '13 at 11:57
  • Thx Bass, I will add the col-ts-* to the less files to add another break point and have more granularity. your solution with changing the @screen-small seems to be working as well :) – fred_ Jul 29 '13 at 15:39
4

  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; }
}
Massimiliano Kraus
  • 3,638
  • 5
  • 27
  • 47
otopic
  • 1,170
  • 1
  • 7
  • 5
0

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.

Daniel West
  • 1,808
  • 2
  • 24
  • 34