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

I am trying to create this grid with bootstrap:

enter image description here

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?

2 Answers

  1. Keith- Reply

    2019-11-16

    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>
  2. Ken- Reply

    2019-11-16

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You can use these HTML tags and attributes <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>