Myujth

I have a bootstrap image grid I need to create for desktop, you can see the layout below.

The problem I'm having is the center box goes over two rows so I can't figure out how to implement it. Might be a newbie question but any help is much appreciated!

Something like this should do..

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
 <div class="col-md-4">
 <div class="row">
 <div class="col-md-12">
 <div class="well">1</div>
 </div>
 </div>
 <div class="row">
 <div class="col-md-12">
 <div class="well">2</div>
 </div>
 </div>
 </div>
 <div class="col-md-4">
 <div class="well">3
 <br>
 <br>
 <br>
 <br>
 <br>
 </div>
 </div>
 <div class="col-md-4">
 <div class="row">
 <div class="col-md-12">
 <div class="well">4</div>
 </div>
 </div>
 <div class="row">
 <div class="col-md-12">
 <div class="well">5</div>
 </div>
 </div>
 </div>
</div>
<div class="row">
 <div class="col-md-6">
 <div class="well">6</div>
 </div>
 <div class="col-md-6">
 <div class="well">7</div>
 </div>
</div>

Grid has 12 column. Grid may overlap if the sum of total grid in your row is bigger than 12. you can put all content in a row then divide them on 3.Make first and third one 2 rows and make middle one your center row.

It will be easier to understand if you share your code.

You can achieve this by putting your large box in one row, and the outer small boxes in the same row, where the two smaller boxes are just two boxes in the one row. (Both of height 50%).

Take a look at the snippet below for a working example:

.box 
 height: 100%;
 width: 100%;
 background-color: lightgrey;


.box-container 
 width: 100%;
 height: 50%; 
 padding: 2px;


.big-box 
 height: 200px;
 background-color: lightgrey;


.col-3, .col-6 
 padding: 0 !important;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="container">
<div class="row">
 <div class="col-3">
 <div class="box-container"><div class="box"></div></div>
 <div class="box-container"><div class="box"></div></div>
 </div>
 
 <div class="col-6">
 <div class="big-box"></div>
 </div>
 
 <div class="col-3">
 <div class="box-container"><div class="box"></div></div>
 <div class="box-container"><div class="box"></div></div>
 </div>
</div>

</div>

Note: I have use col-3 and col-6 for the fiddle to fit to the sample window, however, if you want responsiveness, you can use col-md-3 and col-md-6 (or sm instead of md if you wish for it to collapse at a smaller size).