Bootstrap combining rows rowspan

Question

I am testing Twitter Bootstrap and got stuck with basic scaffolding with rows  I revisited their documentation number of times and I can see nesting columns where you can basically nest columns within a column but I cannot locate  the capability of combining rows into one and have it aligned with column next to the uncombined rows    Below picture should illustrate what I want to accomplish     The only workaround solution I came across is using tables but I don t like this idea as my view is that the responsiveness wouldn t work with the use of tables    Does anyone have any elegant solution to this  Most of the web layout I do will need fine level of flexibility so it will be great if I could pick up something useful here

User · Answer

x000D   x000D  div   x000D    height 50px  x000D    x000D   short-div   x000D    height 25px  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt div class  container  gt  x000D     lt h1 gt Responsive Bootstrap lt  h1 gt  x000D     lt div class  row  gt  x000D       lt div class  col-lg-5 col-md-5 col-sm-5 col-xs-5  style  background-color red   gt Span 5 lt  div gt  x000D       lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-3  style  background-color blue  gt Span 3 lt  div gt  x000D       lt div class  col-lg-2 col-md-2 col-sm-3 col-xs-2  style  padding 0px  gt  x000D         lt div class  short-div  style  background-color green  gt Span 2 lt  div gt  x000D         lt div class  short-div  style  background-color purple  gt Span 2 lt  div gt  x000D       lt  div gt  x000D       lt div class  col-lg-2 col-md-2 col-sm-3 col-xs-2  style  background-color yellow  gt Span 2 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  container-fluid  gt  x000D     lt div class  row-fluid  gt  x000D       lt div class  col-lg-6 col-md-6 col-sm-6 col-xs-6  gt  x000D         lt div class  short-div  style  background-color  999  gt Span 6 lt  div gt  x000D         lt div class  short-div  gt Span 6 lt  div gt  x000D       lt  div gt  x000D       lt div class  col-lg-6 col-md-6 col-sm-6 col-xs-6  style  background-color  ccc  gt Span 6 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Check this one  hope it will help full for you   http   jsfiddle net j6amM     row-fix   margin-bottom 20px     row-fix  gt   class   span    height 100px  background  f1f1f1     row-fix  two-col  background none     two-col  gt   class   col    height 40px  background  ccc     two-col  gt   col1 margin-bottom 20px

User · Answer

Divs stack vertically by default  so there is no need for special handling of  rows  within a column    x000D   x000D  div   x000D    height 50px  x000D    x000D   short-div   x000D    height 25px  x000D    x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt div class  container  gt  x000D     lt h1 gt Responsive Bootstrap lt  h1 gt  x000D     lt div class  row  gt  x000D       lt div class  col-lg-5 col-md-5 col-sm-5 col-xs-5  style  background-color red   gt Span 5 lt  div gt  x000D       lt div class  col-lg-3 col-md-3 col-sm-3 col-xs-3  style  background-color blue  gt Span 3 lt  div gt  x000D       lt div class  col-lg-2 col-md-2 col-sm-3 col-xs-2  style  padding 0px  gt  x000D         lt div class  short-div  style  background-color green  gt Span 2 lt  div gt  x000D         lt div class  short-div  style  background-color purple  gt Span 2 lt  div gt  x000D       lt  div gt  x000D       lt div class  col-lg-2 col-md-2 col-sm-3 col-xs-2  style  background-color yellow  gt Span 2 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   lt div class  container-fluid  gt  x000D     lt div class  row-fluid  gt  x000D       lt div class  col-lg-6 col-md-6 col-sm-6 col-xs-6  gt  x000D         lt div class  short-div  style  background-color  999  gt Span 6 lt  div gt  x000D         lt div class  short-div  gt Span 6 lt  div gt  x000D       lt  div gt  x000D       lt div class  col-lg-6 col-md-6 col-sm-6 col-xs-6  style  background-color  ccc  gt Span 6 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Here s the fiddle

User · Answer

Note  This was for Bootstrap 2  relevant when the question was asked    You can accomplish this by using row-fluid to make a fluid  percentage  based row inside an existing block    lt div class  row  gt      lt div class  span5  gt span5 lt  div gt      lt div class  span3  gt span3 lt  div gt      lt div class  span2  gt         lt div class  row-fluid  gt            lt div class  span12  gt span2 lt  div gt            lt div class  span12  gt span2 lt  div gt         lt  div gt      lt  div gt      lt div class  span2  gt span2 lt  div gt   lt  div gt   lt div class  row  gt      lt div class  span6  gt         lt div class  row-fluid  gt            lt div class  span12  gt span6 lt  div gt            lt div class  span12  gt span6 lt  div gt         lt  div gt      lt  div gt      lt div class  span6  gt span6 lt  div gt   lt  div gt    Here s a JSFiddle example   I did notice that there was an odd left margin that appears  or does not appear  for the spans inside of the row-fluid after the first one  This can be fixed with a small CSS tweak  it s the same CSS that is applied to the first child  expanded to those past the first child     row-fluid  class   span         margin-left  0

User · Answer

You should use bootstrap column nesting   See Bootstrap 3 or Bootstrap 4    lt div class  row  gt       lt div class  col-md-5  gt Span 5 lt  div gt       lt div class  col-md-3  gt Span 3 lt br   gt second line lt  div gt       lt div class  col-md-2  gt           lt div class  row  gt               lt div class  col-md-12  gt Span 2 lt  div gt           lt  div gt           lt div class  row  gt               lt div class  col-md-12  gt Span 2 lt  div gt           lt  div gt       lt  div gt       lt div class  col-md-2  gt Span 2 lt  div gt   lt  div gt   lt div class  row  gt       lt div class  col-md-6  gt           lt div class  row  gt               lt div class  col-md-12  gt Span 6 lt  div gt               lt div class  col-md-12  gt Span 6 lt  div gt           lt  div gt       lt  div gt       lt div class  col-md-6  gt Span 6 lt  div gt   lt  div gt    http   jsfiddle net DRanJ 125    In Fiddle screen  enlarge your test screen to see the result  because I m using col-md-   then responsive stacks columns   Note  I am not sure that BS2 allows columns nesting  but in the answer of Paul Keister  the columns nesting is not used  You should use it and avoid to reinvente css while bootstrap do well   The columns height are auto  if you add a second line  like I do in my example   column height adapt itself

User · Answer

Paul s answer seems to defeat the purpose of bootstrap  that of being responsive to the viewport   screen size    By nesting rows and columns you can achieve the same result  while retaining responsiveness    Here is an up-to-date response to this problem    x000D   x000D   lt div class  container-fluid  gt  x000D     lt h1 gt   Responsive Nested Bootstrap  lt  h1 gt   x000D     lt div class  row  gt  x000D       lt div class  col-md-5  style  background-color red   gt Span 5 lt  div gt  x000D       lt div class  col-md-3  style  background-color blue   gt Span 3 lt  div gt  x000D       lt div class  col-md-2  gt  x000D         lt div class  row  gt  x000D           lt div class  container  style  background-color green   gt Span 2 lt  div gt  x000D         lt  div gt  x000D         lt div class  row  gt  x000D           lt div class  container  style  background-color purple   gt Span 2 lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  col-md-2  style  background-color yellow   gt Span 2 lt  div gt  x000D     lt  div gt  x000D     x000D     lt div class  row  gt  x000D       lt div class  col-md-6  gt  x000D         lt div class  row  gt  x000D           lt div class  container  style  background-color yellow   gt Span 6 lt  div gt  x000D         lt  div gt  x000D         lt div class  row  gt  x000D           lt div class  container  style  background-color green   gt Span 6 lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D       lt div class  col-md-6  style  background-color red   gt Span 6 lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    You can view the codepen here

[twitter-bootstrap] Bootstrap combining rows (rowspan)

Examples related to twitter-bootstrap

Examples related to bootstrap-grid