Bootstrap. How can I get a column filling two rows?

Question

I am trying to design a footer with two rows. First one with 4 columns and the second row just one column 3 columns first row width. And the whitespace must be filled for the last column in first row. Check the attached picture to understand the problem.

https://i.stack.imgur.com/SrgQr.png

Any help is welcome. Thank you.

Answer 1

A modern way to accomplish this would be to create a 4x2 grid using 'CSS Grid', but we'll work with your bootstrap library. From first glance, you have 1 parent row with 2 columns. In the left side, you have 3 more columns with 1 full-width column below it. We can then set the height equal to each other by changing the display type to flex .

 .row { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; flex-wrap: wrap; } .row > [class*='col-'] { display: flex; flex-direction: column; /*extra styling*/ box-sizing: border-box; border: 1px solid #ff0000; text-align: center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-9"> <div class="row"> <div class="col-xs-4"><p>text</p></div> <div class="col-xs-4"><p>text</p></div> <div class="col-xs-4"><p>text</p></div> <div class="col-xs-12"><p>text</p></div> </div> </div> <div class="col-xs-3"> <p>text</p> </div> </div> 

Answer 2

Basically it's two columns: first one is 9, second on is 3 (wide). We leave the second column for two row cell. In the first column we create two rows. First one with 3 columns, the second one with one column. (Click on "full page" when viewing the code snippet, or you can also view it here: https://jsfiddle.net/3g8b2dhx/3/ )

 .row{ margin-bottom: 20px; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row"> <div class="col-md-9"> <div class="row"> <div class="col-sm-4"> <img src="https://placeholdit.co//i/400x200" class="img-fluid"> </div> <div class="col-sm-4"> <img src="https://placeholdit.co//i/400x200" class="img-fluid"> </div> <div class="col-sm-4"> <img src="https://placeholdit.co//i/400x200" class="img-fluid"> </div> </div> <div class="row"> <div class="col-sm-12"> <img src="https://placeholdit.co//i/1200x200" class="img-fluid"> </div> </div> </div> <div class="col-md-3"> <div class="row"> <div class="col-sm-12"> <img src="https://placeholdit.co//i/400x200" class="img-fluid"> </div> </div> </div> </div> </div>