Nested rows with bootstrap grid system

Question

I want 1 larger image with 4 smaller images in a 2x2 format like this      My initial thought was to house everything in one row  Then create two columns  and  in the second column  create two rows and two columns to create the 1x1 and 2x2 effect    However  this doesn t seem to be possible  or I am just not doing it correctly

User · Answer

Adding to what  KyleMit said  consider using    col-md-  classes for the larger outer columns col-xs-  classes for the smaller inner columns   This will be useful when you view the page on different screen sizes   On a small screen  the wrapping of larger outer columns will then happen while maintaining the smaller inner columns  if possible

User · Answer

Bootstrap Version 3 x  As always  read Bootstrap s great documentation   3 x Docs  https   getbootstrap com docs 3 3 css  grid-nesting  Make sure the parent level row is inside of a  container element   Whenever you d like to nest rows  just open up a new  row inside of your column   Here s a simple layout to work from    lt div class  container  gt       lt div class  row  gt           lt div class  col-xs-6  gt               lt div class  big-box  gt image lt  div gt           lt  div gt           lt div class  col-xs-6  gt               lt div class  row  gt                   lt div class  col-xs-6  gt  lt div class  mini-box  gt 1 lt  div gt  lt  div gt                   lt div class  col-xs-6  gt  lt div class  mini-box  gt 2 lt  div gt  lt  div gt                   lt div class  col-xs-6  gt  lt div class  mini-box  gt 3 lt  div gt  lt  div gt                   lt div class  col-xs-6  gt  lt div class  mini-box  gt 4 lt  div gt  lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    Bootstrap Version 4 0  4 0 Docs  http   getbootstrap com docs 4 0 layout grid  nesting  Here s an updated version for 4 0  but you should really read the entire docs section on the grid so you understand how to leverage this powerful feature   lt div class  container  gt     lt div class  row  gt       lt div class  col big-box  gt        image      lt  div gt        lt div class  col  gt         lt div class  row  gt           lt div class  col mini-box  gt 1 lt  div gt           lt div class  col mini-box  gt 2 lt  div gt         lt  div gt         lt div class  row  gt           lt div class  col mini-box  gt 3 lt  div gt           lt div class  col mini-box  gt 4 lt  div gt         lt  div gt       lt  div gt      lt  div gt   lt  div gt    Demo in Fiddle jsFiddle 3 x   jsFiddle 4 0  Which will look like this  with a little bit of added styling

[css] Nested rows with bootstrap grid system?

Examples related to css

Examples related to html

Examples related to twitter-bootstrap

Examples related to grid

Examples related to grid-system