Bootstrap grid layout not working as expected

Question

I'm using Bootstrap 3.3.5 and I have two columns : .col-md-9 and .col-md-3 .

However, the one with the class .col-md-3 is somehow taking full width of the parent row, instead of just taking 25%.

Why is this happening?

Note: Run the snippet in full page and resize the browser window until you can see this behaviour.

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-9"> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> </div> <div class="hidden-xs col-md-3"> <ul class="list-group"> <li class="list-group-item"> <span class="badge">12</span> Matt Damon </li> <li class="list-group-item"> <span class="badge">9</span> Brad Pitt </li> <li class="list-group-item"> <span class="badge">4</span> George Clooney </li> <li class="list-group-item"> <span class="badge">2</span> Angelina Jolie </li> </ul> </div> </div> </div> 

Answer 1

What is happening is that as you shrink your browser window you hit the Bootstrap breakpoints in descending size order. LG, MD, SM, and XS.

The col-md-* classes only affect elements at breakpoints MD and larger; MD and LG.

The hidden-xs class, however, only affects the XS breakpoint.

When you hit the SM breakpoint, neither of these classes is affecting the div in question and so it reverts to its default styling, full-width.

You can use the hidden-sm class in addition and it will hide it at that breakpoint too.

Here is a handy chart that shows which breakpoints hidden and visible classes affect elements: http://getbootstrap.com/css/#responsive-utilities-classes

Answer 2

You have to put hidden-sm too

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-md-9"> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> </div> <div class="hidden-xs hidden-sm col-md-3"> <ul class="list-group"> <li class="list-group-item"> <span class="badge">12</span> Matt Damon </li> <li class="list-group-item"> <span class="badge">9</span> Brad Pitt </li> <li class="list-group-item"> <span class="badge">4</span> George Clooney </li> <li class="list-group-item"> <span class="badge">2</span> Angelina Jolie </li> </ul> </div> </div> </div> 

Answer 3

You want to use col-sm-* .

Bootstrap has 4 media queries:

• col-xs
• col-sm
• col-md
• and col-lg

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-9 col-md-9"> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> <div>Element</div> </div> <div class="hidden-xs col-xs-0 col-sm-3 col-md-3"> <ul class="list-group"> <li class="list-group-item"> <span class="badge">12</span> Matt Damon </li> <li class="list-group-item"> <span class="badge">9</span> Brad Pitt </li> <li class="list-group-item"> <span class="badge">4</span> George Clooney </li> <li class="list-group-item"> <span class="badge">2</span> Angelina Jolie </li> </ul> </div> </div> </div>