0

I am trying to include a bootstrap grid inside another grid and make sure it is still responsive but on larger screens the child grid doesnt collapse. 

<div class="container"> <div class="row"> <div class="col-md-6">First column content</div> <div class="col-md-6"> <div class="row"> <!-- child grid --> <div class="col-md-6"><img class="img-responsive" src="http://placehold.it/350x150"></div> <div class="col-md-6">column content</div> </div> </div> </div> </div>

bootsplay link: http://www.bootply.com/PCMV1BF4YF

the child grid should collapse in larger screens because the width of the parent class is already small. Is it possible to get around this issue?

Improve this question

1 Answer 1

Reset to default
2

Inner col-*-* should also be contained in a row. Read the Bootstrap docs on nesting

<div class="container"> <div class="row"> <div class="col-md-6">First column content</div> <div class="col-md-6"> <div class="row"> <div class="col-lg-6"><img class="img-responsive" src="http://placehold.it/350x150"></div> <div class="col-lg-6">Second column content</div> </div> </div> </div> </div>

Make the inner grid col-lg-* if you want it to stack/collapse before the outer grid does. The breakpoint (when the columns stack) depends on the viewport width, not the width of the parent container.

Also, instead of overriding the Bootstrap container, use a custom class.

http://www.bootply.com/aoUZozmcsc

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

yes, I forgot to include it in the sample code, but if you try it with the row inside the inner col, it still doesnt work
thanks for the detailed comment, yes, that is the issue, because it depends on the viewport width but because parent is already small, is there anyway to make it stack based on width too?
No, there's no way using only Bootstrap/CSS

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.