CODEWITHSUNDEEP
csstwitter-bootstrap-3
Piyush Pandey
Piyush Pandey

Reputation: 306

nested grid system in bootstrap

I am kind of new to bootstrap and enjoying its grid system.

But there is something which is somewhat not happening. Following is the code:

<div class='container-fluid'>
 <div class='row'>
  <div class="col-md-7 col-md-offset-1" style="padding: 25px 35px 10px 35px;">Some Text Here</div>
  <div class='col-md-3' id='right-column' style='overflow: auto; padding-top: 25px; padding-bottom: 25px;'>
    <div class='container-fluid'>   
        <div class='row'>
            <div class='related-post-title' style='font-size: 1.2em; text-align: center;'>Heading Text</div>
        </div>

        <div class='row'>
            <div class='col-xs-1'>1-col</div><div class='col-xs-11'>11-col</div>
        </div>
    </div>  
</div>

I was expecting that the 1-col & 11-coll text (towards the end of the code) should appear along with each other. But somehow what did not happen. What am I missing here?

Thanks in advance.

Upvotes: 0

Views: 318

Answers (4)

Piyush Pandey
Piyush Pandey

Reputation: 306

The code more or less was alright.

It was working all right for col-xs-2 & col-xs-10, similarly for col-xs-3 and col-xs-9 and all other such similar combinations upto col-xs-6 & col-xs-6. But wasn't working for col-xs-1 and col-xs-11.

I calculated the width of the container-row and the the col-xs-1 div and col-xs-11 div using $(selector).css('width') and .... drumrolls... they were 342 px, 30px and 313px respectively. (Note that this segment is inside a col-md-4 div)

Ouch... 313 + 30 > 342, hence the misfit.

So I added this in my css

.col-xs-11 {width: 91.21%; }

And it worked!!!! :-)

Thank You all for trying to help me out.

Hope this may be helpful to someone someday.

Upvotes: 0

Dev
Dev

Reputation: 410

Try this:

    <div class='container-fluid'>
    <div class='row'>
    <div class="col-md-7 col-md-offset-1" style="padding: 25px 35px 10px 35px;">Some Text Here</div>
    <div class='col-md-3' id='right-column' style='overflow: auto; padding-top: 25px; padding-bottom: 25px;'>
    <div class='container-fluid'>   
    <div class='row'>
    <div class='related-post-title' style='font-size: 1.2em; text-align: center;'>Heading Text</div>
    </div>
   <div class='row'>
   <div class='col-md-1'>1-col</div><div class='col-md-2'>11-col</div>
    </div>
   </div>  
   </div>

Also ensure that your screen width is ≥992px & <1200px for col-md.

The issue out here was the row containing col-1 & col-11 were inside 

<div class='col-md-3' id='right-column' style='overflow: auto;     padding-top: 25px; padding-bottom: 25px;'>

i.e. max col can be 3, beyond this will render on the next line.

Good luck & hope this helps.

Upvotes: 0

M1xelated
M1xelated

Reputation: 169

 <div class='col-xs-1'>1-col</div><div class='col-xs-11'>11-col</div>

XS stands for extra small and is generally used for phones. It could be that your line breaks easily because of this. Try changing it to medium "md" instead of "xs"

  • You are not closing the first row!

Upvotes: 0

Chirag Patel
Chirag Patel

Reputation: 15

<div class='container-fluid'>
 <div class='row'>
  <div class="col-md-7 col-md-offset-1" style="padding: 25px 35px 10px 35px;">Some Text Here</div>
  <div class='col-md-3' id='right-column' style='overflow: auto; padding-top: 25px; padding-bottom: 25px;'>
    <div class='container-fluid'>   
        <div class='row'>
            <div class='related-post-title' style='font-size: 1.2em; text-align: center;'>Heading Text</div>
        </div>

        <div class='row'>
            <div class='col-xs-1'>1-col</div><div class='col-xs-11'>11-col</div>
        </div>
    </div>  
</div>
</div>
</div>


You were miss two div which is not closed. Please put these code. It works!

Upvotes: 2

Related Questions