CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Agent Zebra
Agent Zebra

Reputation: 4550

Bootstrap grid nesting columns issue

What I am trying to do is to have two columns of 3 nested pink squares each, at the large and med settings, then on small screen tablet a single column with 3 pink squares then another single column with 3 pink squares under that. Then at the xs mobile level I'm trying to again have two columns but with 1 column of nested pink squares in each. I thought this is what my css is requesting, but that's not what is happening :( What am I doing wrong here?

Here's a plunker

Here's the html: 

 <div class="container">   
  <div class="row">

    <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle</h4>
      <div ng-repeat="x in things"> 
        <div class="col-xs-6 col-sm-4 col-md-4">
          <div class="cube">
            <b>{{x.title}}</b> </br> {{x.content}}

          </div>                
        </div>  
      </div>
    </div>

    <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6"><h4>My Subtitle 2</h4>
        <div ng-repeat="x in things2"> 
         <div class="col-xs-6 col-sm-4 col-md-4">
          <div class="cube">
            <b>{{x.title}}</b> </br> {{x.content}}

          </div>                
         </div> 
        </div>
    </div>

  </div>

Upvotes: 1

Views: 537

Answers (2)

sharko
sharko

Reputation: 402

halfzebra is right. If you you nest columns you always have new 12 columns inside another one.

<div class="col-md-6">
    <div class="row">
        <div class="col-md-12">
            This will fill col-md-6
        </div>
    </div>
</div>

And like in example above I always like to use rows when Im starting one.

I don't know if I got you right but you could do something like this:

<div class="container">   
    <div class="row">
        <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
            <div class="row">
                <div class="col-md-12">
                    <h4>My Subtitle</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things">
                    <div class="cube">
                        <b>{{x.title}}</b> </br> {{x.content}}
                    </div>              
                </div>
            </div>
        </div>  
        <div class="col-xs-6 col-sm-12 col-md-6 col-lg-6">
            <div class="row">
                <div class="col-md-12">
                    <h4>My Subtitle 2</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12 col-sm-4 col-md-4" ng-repeat="x in things2">
                    <div class="cube">
                        <b>{{x.title}}</b> </br> {{x.content}}  
                    </div>              
                </div>  
            </div>
        </div>
    </div>
</div>

Keep in mind that your red boxes are not always fitting in to the columns. I changed width to 100% so you can see how columns are acting.

Plunker: http://plnkr.co/edit/EE4eWrrGIJ0lFdPBcq7T?p=preview

Upvotes: 1

halfzebra
halfzebra

Reputation: 6797

It seems like you're confused by the number at the end of the class.

While nesting .col-xs-6 inside another .col-xs-6, you will get a column which takes only 50% of the width.

It's a primary principle of 12 column grid. Divide 100% / 12 = 8.33333333333% and you will get width property of a single column in percents, please have in mind that the width in percents is calculated according to the parent width.

Bootstrap's grid is not informative while nesting.

Eg. think of .col-xs-6 as width: 50%;, .col-xs-4 is width: 33.33333%;

Upvotes: 3

Related Questions