CODEWITHSUNDEEP
csstwitter-bootstrap
James Jeffery
James Jeffery

Reputation: 12599

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

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.

enter image description here

Any ideas on the best way to go with this?

Upvotes: 196

Views: 209479

Answers (6)

Mehran Hooshangi
Mehran Hooshangi

Reputation: 5

For Bootstrap 5

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA3dLNH46c0X0pANo8jQd+2uAGeZHuFr8iI1wCdh0Pej1krpDTRj9PI4y3eC9S" crossorigin="anonymous">

    <div class="container ">
     <div class="row g-4">
      <div class="col-md-4">1</div>
      <div class="col-md-8">
       <div class="row">
        <div class="col-6 mb-4 px-2 ">2</div>
        <div class="col-6 mb-4 px-2 ">3</div>
        <div class="col-6 mb-4 px-2 ">4</div>
        <div class="col-6 mb-4 px-2 ">5</div>               
       </div>
      </div>
     </div>
     <div class="row">
      <div class="col-4 mb-4 px-2 ">6</div>
      <div class="col-4 mb-4 px-2 ">7</div>
      <div class="col-4 mb-4 px-2 ">8</div>       
     </div>
    </div>

Upvotes: 0

Ps Naidu
Ps Naidu

Reputation: 103

<div class="row">
  <div class="col-4 alert alert-primary">
     1
  </div>
  <div class="col-8">
    <div class="row">
      <div class="col-6 alert alert-primary">
        2
      </div>
      <div class="col-6 alert alert-primary">
        3
      </div>
      <div class="col-6 alert alert-primary">
        4
      </div>
      <div class="col-6 alert alert-primary">
        5
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="col-4 alert alert-primary">
    6
  </div>
  <div class="col-4 alert alert-primary">
    7
  </div>
  <div class="col-4 alert alert-primary">
    8
  </div>
</div>

Upvotes: 8

Shareef Hadid
Shareef Hadid

Reputation: 213

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 :)

Upvotes: 4

Mastergalen
Mastergalen

Reputation: 4389

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/

Upvotes: 193

disrvptor
disrvptor

Reputation: 1612

Like the comments suggest, the solution is to use nested spans/rows.

<div class="container">
    <div class="row">
        <div class="span4">1</div>
        <div class="span8">
            <div class="row">
                <div class="span4">2</div>
                <div class="span4">3</div>
            </div>
            <div class="row">
                <div class="span4">4</div>
                <div class="span4">5</div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="span4">6</div>
        <div class="span4">7</div>
        <div class="span4">8</div>
    </div>
</div>

Upvotes: 26

James Jeffery
James Jeffery

Reputation: 12599

The example below seemed to work. Just setting a height on the first element

<ul class="row">
    <li class="span4" style="height: 100px"><h1>1</h1></li>
    <li class="span4"><h1>2</h1></li>
    <li class="span4"><h1>3</h1></li>
    <li class="span4"><h1>4</h1></li>
    <li class="span4"><h1>5</h1></li>
    <li class="span4"><h1>6</h1></li>
    <li class="span4"><h1>7</h1></li>
    <li class="span4"><h1>8</h1></li>
</ul>

I can't help but thinking it's the wrong use of a row though.

Upvotes: 0

Related Questions