How can I get a Bootstrap column to span multiple rows

Question

I m trying to figure out how to do the following grid with Bootstrap    I m not sure how I d create the box  number 1  that spans two rows  The boxes are generated programmatically in the order they are laid out  Box 1 is a welcome message     Any ideas on the best way to go with this

User · Answer

I believe the part regarding how to span rows has been answered thoroughly (i.e. by nesting rows), but I also ran into the issue of my nested rows not filling their container. While flexbox and negative margins are an option, a much easier solution is to use the predefined h-50 class on the row containing boxes 2, 3, 4, and 5.

Note: I am using Bootstrap-4, I just wanted to share because I ran into the same problem and found this to be a more elegant solution :)

User · Answer

Like the comments suggest  the solution is to use nested spans rows    lt div class  container  gt       lt div class  row  gt           lt div class  span4  gt 1 lt  div gt           lt div class  span8  gt               lt div class  row  gt                   lt div class  span4  gt 2 lt  div gt                   lt div class  span4  gt 3 lt  div gt               lt  div gt               lt div class  row  gt                   lt div class  span4  gt 4 lt  div gt                   lt div class  span4  gt 5 lt  div gt               lt  div gt           lt  div gt       lt  div gt       lt div class  row  gt           lt div class  span4  gt 6 lt  div gt           lt div class  span4  gt 7 lt  div gt           lt div class  span4  gt 8 lt  div gt       lt  div gt   lt  div gt

User · Answer

For Bootstrap 3    x000D   x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 5 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   x000D   lt div class  row  gt  x000D       lt div class  col-md-4  gt  x000D           lt div class  well  gt 1 x000D               lt br  gt  x000D               lt br  gt  x000D               lt br  gt  x000D               lt br  gt  x000D               lt br  gt  x000D           lt  div gt  x000D       lt  div gt  x000D       lt div class  col-md-8  gt  x000D           lt div class  row  gt  x000D               lt div class  col-md-6  gt  x000D                   lt div class  well  gt 2 lt  div gt  x000D               lt  div gt  x000D               lt div class  col-md-6  gt  x000D                   lt div class  well  gt 3 lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D           lt div class  row  gt  x000D               lt div class  col-md-6  gt  x000D                   lt div class  well  gt 4 lt  div gt  x000D               lt  div gt  x000D               lt div class  col-md-6  gt  x000D                   lt div class  well  gt 5 lt  div gt  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt div class  row  gt  x000D       lt div class  col-md-4  gt  x000D           lt div class  well  gt 6 lt  div gt  x000D       lt  div gt  x000D       lt div class  col-md-4  gt  x000D           lt div class  well  gt 7 lt  div gt  x000D       lt  div gt  x000D       lt div class  col-md-4  gt  x000D           lt div class  well  gt 8 lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    For Bootstrap 2    x000D   x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 2 3 2 css bootstrap min css  rel  stylesheet   gt  x000D   x000D   lt div class  row-fluid  gt  x000D       lt div class  span4  gt  lt div class  well  gt 1 lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt br  gt  lt  div gt  lt  div gt  x000D       lt div class  span8  gt  x000D           lt div class  row-fluid  gt  x000D               lt div class  span6  gt  lt div class  well  gt 2 lt  div gt  lt  div gt  x000D               lt div class  span6  gt  lt div class  well  gt 3 lt  div gt  lt  div gt  x000D           lt  div gt  x000D           lt div class  row-fluid  gt  x000D               lt div class  span6  gt  lt div class  well  gt 4 lt  div gt  lt  div gt  x000D               lt div class  span6  gt  lt div class  well  gt 5 lt  div gt  lt  div gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   lt div class  row-fluid  gt  x000D       lt div class  span4  gt  x000D           lt div class  well  gt 6 lt  div gt  x000D       lt  div gt  x000D       lt div class  span4  gt  x000D           lt div class  well  gt 7 lt  div gt  x000D       lt  div gt  x000D       lt div class  span4  gt  x000D           lt div class  well  gt 8 lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    See the demo on JSFiddle  Bootstrap 2   http   jsfiddle net SxcqH 52

User · Answer

The example below seemed to work  Just setting a height on the first element   lt ul class  row  gt       lt li class  span4  style  height  100px  gt  lt h1 gt 1 lt  h1 gt  lt  li gt       lt li class  span4  gt  lt h1 gt 2 lt  h1 gt  lt  li gt       lt li class  span4  gt  lt h1 gt 3 lt  h1 gt  lt  li gt       lt li class  span4  gt  lt h1 gt 4 lt  h1 gt  lt  li gt       lt li class  span4  gt  lt h1 gt 5 lt  h1 gt  lt  li gt       lt li class  span4  gt  lt h1 gt 6 lt  h1 gt  lt  li gt       lt li class  span4  gt  lt h1 gt 7 lt  h1 gt  lt  li gt       lt li class  span4  gt  lt h1 gt 8 lt  h1 gt  lt  li gt   lt  ul gt    I can t help but thinking it s the wrong use of a row though

User · Answer

lt div class  row  gt     lt div class  col-4 alert alert-primary  gt       1    lt  div gt     lt div class  col-8  gt       lt div class  row  gt         lt div class  col-6 alert alert-primary  gt          2        lt  div gt         lt div class  col-6 alert alert-primary  gt          3        lt  div gt         lt div class  col-6 alert alert-primary  gt          4        lt  div gt         lt div class  col-6 alert alert-primary  gt          5        lt  div gt       lt  div gt     lt  div gt   lt  div gt   lt div class  row  gt     lt div class  col-4 alert alert-primary  gt      6    lt  div gt     lt div class  col-4 alert alert-primary  gt      7    lt  div gt     lt div class  col-4 alert alert-primary  gt      8    lt  div gt   lt  div gt

[css] How can I get a Bootstrap column to span multiple rows?

Examples related to css

Examples related to twitter-bootstrap