How can I get multiple bootstrap cols in 1 row without nesting? - html

Question

I am trying to create this grid with bootstrap:
I can easily create the first row no problem using cols. It would be simple enough to create a second row, however, the entire grid has a drop shadow, so even when I create a second row and just bump it up, I cant create a drop shadow under the entire grid.
I have tried nesting other cols inside the row but it doesn't work well since the columns are not the same width above and below.
Here is what I have so far: https://jsfiddle.net/5nk28tm0/
Using
display: flex;
padding-top:120px
padding-bottom:100px;
to keep the columns all the same height. Just need to add another row without losing the drop shadow ability. Not sure what to try from here. Any suggestions?

Answer 1

The problem is because the columns each have a varying height, hence the elements are not in proper order. If you use the CSS below, you can restrict the minimum height and all the elements will align accordingly.
.row > div {
min-height: 50px;
}
.home-testimonial {
.row {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
box-shadow: 15px 10px 50px #e3e3e3;
align-content: center;
vertical-align: middle;
}
.col-sm-2 {
align-content: center;
vertical-align: middle;
padding-top: 120px;
padding-bottom: 100px;
}
.col-sm-4 {
padding-top: 50px;
color: #333e48;
}
.testimonial-body {
padding-left: 40px;
padding-right: 40px;
}
}
.row > div {
min-height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="home-testimonial">
<div class="row">
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-2 bg-success">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-4">
<p class="testimonial-body">
Placeholder text here. Lorem ipsum dolor sit amet.
</p>
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
<div class="col-xs-4">
Placeholder text here. Lorem ipsum dolor sit amet.
</div>
<div class="col-xs-2">
<img src="http://via.placeholder.com/140x44">
</div>
</div>
</div>

Answer 2

It might be worth checking out CSS Grid for this layout.