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

by

For Bootstrap 3:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="row">
    <div class="col-md-4">
        <div class="well">1
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="col-md-8">
        <div class="row">
            <div class="col-md-6">
                <div class="well">2</div>
            </div>
            <div class="col-md-6">
                <div class="well">3</div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="well">4</div>
            </div>
            <div class="col-md-6">
                <div class="well">5</div>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-md-4">
        <div class="well">6</div>
    </div>
    <div class="col-md-4">
        <div class="well">7</div>
    </div>
    <div class="col-md-4">
        <div class="well">8</div>
    </div>
</div>

For Bootstrap 2:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet"/>

<div class="row-fluid">
    <div class="span4"><div class="well">1<br/><br/><br/><br/><br/></div></div>
    <div class="span8">
        <div class="row-fluid">
            <div class="span6"><div class="well">2</div></div>
            <div class="span6"><div class="well">3</div></div>
        </div>
        <div class="row-fluid">
            <div class="span6"><div class="well">4</div></div>
            <div class="span6"><div class="well">5</div></div>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span4">
        <div class="well">6</div>
    </div>
    <div class="span4">
        <div class="well">7</div>
    </div>
    <div class="span4">
        <div class="well">8</div>
    </div>
</div>

See the demo on JSFiddle (Bootstrap 2): http://jsfiddle.net/SxcqH/52/

More Related Contents:

  1. How can I make Bootstrap columns all the same height?
  2. Bootstrap dropdown sub menu missing
  3. Center content in responsive bootstrap navbar
  4. Order columns through Bootstrap4
  5. Center an element in Bootstrap Navbar
  6. Flushing footer to bottom of the page, twitter bootstrap
  7. Applying CSS styles only to certain elements
  8. How can I center elements horizontally or vertically with Twitter Bootstrap?
  9. How to set up fixed width for ?
  10. Meaning of numbers in “col-md-4″,” col-xs-1″, “col-lg-2” in Bootstrap
  11. Modify twitter bootstrap navbar
  12. What is class=”mb-0″ in Bootstrap 4?
  13. Customize Bootstrap 4’s grid-system Breakpoints
  14. Prevent flex item from exceeding parent height and make scroll bar work
  15. Bootstrap 4 – Navbar items outside the collapse
  16. Bootstrap Element 100% Width
  17. Bootstrap change order of columns
  18. Twitter Bootstrap 3 – Panels of Equal Height in a Fluid Row
  19. Nested rows with bootstrap grid system?
  20. Django Forms and Bootstrap – CSS classes and
  21. Offsetting columns is not working (Bootstrap v4.0.0-beta)
  22. Centering the image in Bootstrap
  23. LESS mixin a variable class name
  24. Bootstrap Responsive Text Size [duplicate]
  25. css to make bootstrap navbar transparent
  26. How do I make card-columns order horizontally?
  27. Scope Bootstrap Css in Vue
  28. Centering the navbar content in Bootstrap 4 (alpha 5)
  29. Bootstrap Grid System new line does not look nice
  30. Styling the arrow on bootstrap tooltips [duplicate]

Leave a Comment