Bootstrap combining rows (rowspan)

by

Divs stack vertically by default, so there is no need for special handling of “rows” within a column.

div {
  height:50px;
}
.short-div {
  height:25px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" style="background-color:red;">Span 5</div>
    <div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" style="background-color:blue">Span 3</div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="padding:0px">
      <div class="short-div" style="background-color:green">Span 2</div>
      <div class="short-div" style="background-color:purple">Span 2</div>
    </div>
    <div class="col-lg-2 col-md-2 col-sm-3 col-xs-2" style="background-color:yellow">Span 2</div>
  </div>
</div>
<div class="container-fluid">
  <div class="row-fluid">
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
      <div class="short-div" style="background-color:#999">Span 6</div>
      <div class="short-div">Span 6</div>
    </div>
    <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6" style="background-color:#ccc">Span 6</div>
  </div>
</div>

Output:

enter image description here

Here’s the fiddle.

More Related Contents:

  1. My Bootstrap Window Became to large?
  2. How to extend/modify (customize) Bootstrap with SASS
  3. Bootstrap Rows and Columns – Do I need to use row?
  4. Bootstrap 3 with remote Modal
  5. What is the difference between Bootstrap .container and .container-fluid classes?
  6. How to remove responsive features in Twitter Bootstrap 3?
  7. Fluid or fixed grid system, in responsive design, based on Twitter Bootstrap
  8. Bootstrap: Collapse other sections when one is expanded
  9. Limit the scope of bootstrap styles
  10. How do I set the offset for ScrollSpy in Bootstrap?
  11. Bootstrap 3 breakpoints and media queries
  12. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  13. How to create a sticky left sidebar menu using bootstrap 3?
  14. how to destroy bootstrap modal window completely?
  15. Bootstrap 4 Multiple fixed-top navbars
  16. Can I use twitter bootstrap without jquery?
  17. Bootstrap 3 Gutter Size
  18. How to left column fixed and right scrollable in Bootstrap 4, responsive?
  19. Leaflet map not showing properly in bootstrap 3.0 modal
  20. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  21. Vertical alignment of text and icon in button
  22. Different slide duration for each item on bootstrap 3.1 carousel
  23. Bootstrap: how do I change the width of the container?
  24. Decreasing height of bootstrap 3.0 navbar
  25. Close responsive navbar automatically
  26. Disable dropup feature using Bootstrap Select
  27. Fluid input-append in Bootstrap Responsive
  28. Bootstrap 4 responsive navbar vertical
  29. Unable to override $theme-color in bootstrap
  30. How to justify navbar-nav in Bootstrap 3

Leave a Comment