CODEWITHSUNDEEP
csstwitter-bootstrap
Kevin Stachura
Kevin Stachura

Reputation: 83

Twitter Bootstrap Grid: Setting different sizes for mobile

I am attempting to make a Bootstrap grid layout. What I want to do is have a row where there is a larger column (col size 8) and a smaller column (col size 4) within the same div. I was able to accomplish that fairly easily. The issue I'm running into now is that when the browser is resized, the col size 4 drops below the larger col size 8, but despite my code, still inherits a col size 4 when I've specified in my code that I want it to be col-xs-12 on small mobile devices. Any ideas why it keeps the col size 4 when it wraps underneath, and on 480px screen width? It should be 12. So to quickly reiterate:

  1. I would like the row to contain an 8 column and a 4 column, which I've accomplished.

  2. When the window is resized to mobile (480px), I'd like the size 4 column to wrap below the 8 column and become size 12 on extra small, to fit entire screen. Here is my code:

    <div class="container">



  <div class="row">


      <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
      <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>




  </div><!-- END CONTACT ROW -->

</div><!-- END CONTAINER -->

Here's the issue on mobile:

picture of issue

Upvotes: 2

Views: 2538

Answers (4)

Galeel Bhasha
Galeel Bhasha

Reputation: 1895

The below one will fix the problem. Screen size small and UP will have 3/4 and 1/4 of col sizes. And screens smaller than small will have 100% width and stacked vertically.

<div class="row">
   <div class="col-sm-8 contact-area">larger column</div>
   <div class="col-sm-4 social-area">smaller column</div>
 </div>

Upvotes: 1

Ryan E
Ryan E

Reputation: 519

The reason this happened is that in your original code

  <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
  <div class="col-xs-12 col-sm-4 col-md-4 social-area">smaller column</div>

you were specifying that each column on extra small screens and UP should be the full size 12. This caused them to stack since both columns can't be full width.

When you remove the "col-xs-12" your code is specifying that on small screens and UP, you would like one column to be 3/4 width and the other to be 1/4, sizes 8 and 4 respectively. And on screens smaller than small you would like the columns to stack.

You actually don't need to specify anything for lg screens since you're specifying the same sizes.

Upvotes: 4

Kevin Stachura
Kevin Stachura

Reputation: 83

Ok, I've figured it out.

<div class="container">




  <div class="row">
   <div class="col-lg-8 col-md-8 contact-area">larger column</div>
   <div class="col-lg-4 col-md-4 social-area">smaller column</div>
  </div><!-- END CONTACT ROW -->





</div><!-- END CONTAINER -->

So this way they stay near each other on large and medium screens, and without any sort of sm or xs classes, they just do a 100% width at those breakpoints. Works just fine now.

Upvotes: 1

Nick Law
Nick Law

Reputation: 1738

You need to set a row for each of your divs:

<div class="container">
    <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">larger column</div>
    </div><!-- END CONTACT ROW -->
  <div class="row">
       <div class="col-xs-12 col-sm-8 col-md-8 contact-area">smaller column</div>
    </div><!-- END CONTACT ROW -->
</div><!-- END CONTAINER -->

One row must make be 12 col maximum, which means you can have one dive at 6-col and and another at 6-col. But you can't have 12-col and 12-col.

Upvotes: 1

Related Questions