CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
becca
becca

Reputation: 740

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?

Upvotes: 0

Views: 48

Answers (2)

Ian Patrick
Ian Patrick

Reputation: 19

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

Upvotes: 0

Naren Murali
Naren Murali

Reputation: 56099

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>

Upvotes: 1

Related Questions