CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Matias Cicero
Matias Cicero

Reputation: 26331

Bootstrap grid layout not working as expected

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>

Upvotes: 3

Views: 164

Answers (3)

Marcelo
Marcelo

Reputation: 4435

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

Upvotes: 5

dap.tci
dap.tci

Reputation: 2485

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>

Upvotes: 1

Richik SC
Richik SC

Reputation: 884

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>

Upvotes: -1

Related Questions