CODEWITHSUNDEEP
csshtmlbootstrap-4
Dharmesh Vekariya
Dharmesh Vekariya

Reputation: 1146

How to set column wrap in bootstrap 4

-> how to set column in responsive view this type of structure. i want one by one column i have attachment screenshot what i want in bootstrap 4 for ipad view. i want one column than second column.

enter image description here

@import url('https://fonts.googleapis.com/css?family=Merriweather:300,300i,400,400i,700,700i,900,900i|Rubik:300,300i,400,400i,500,500i,700,700i,900,900i');[![enter image description here][1]][1]
body {
  font-size: 15px;
  line-height: 28px;
  font-family: 'Rubik', sans-serif;
  font-weight: 400;            
}
.video-thumb .video-icon {
  width: 35px;
  height: 35px;
  background-color: rgba(0,0,0,.9);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;    
}
.thumbnail-main, .video-content {
  margin-bottom: 20px;
}
img {
  max-width: 100%;
}
.inner-content span {
  display: block;
  margin-bottom: 10px;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1px;
  line-height: 12px;          
 }
.inner-content a.link {
  color: #208385;
}
h5 {
  font-size: 14px;
  line-height: 22px;
  font-weight: 700;
}
section {
  padding: 100px 0;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
      <div class="col-md-4 thumbnail-main">
        <a href="https://www.google.co.in/">
          <div class="postion-relative">
            <img src="http://placekitten.com/1000/500" alt="">
          </div>
        </a>
      </div>
      <div class="col-md-8 video-content inner-content">
        <span class="date">10 Oct 2018</span>
        <span class="cat-tag">
          <a class="link" href="https://www.google.co.in/">Breast</a>
        </span>
        <a href="https://www.google.co.in/">
          <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
        </a>
      </div>
    </div>
  </div>
</section>

Upvotes: 1

Views: 3727

Answers (1)

Tom
Tom

Reputation: 860

Bootstrap columns can only have 12 columns in one row, in your example you have 4 div's with 4, 8, 4, 8 columns.

What you need to do is the following:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<section>
  <div class="container">
    <div class="row align-items-center">
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
      <div class="row col-md-4 col-lg-12">
          <div class="col-lg-4 thumbnail-main">
          <a href="https://www.google.co.in/">
            <div class="postion-relative">
              <img src="http://placekitten.com/1000/500" alt="">
            </div>
          </a>
        </div>
        <div class="col-lg-8 video-content inner-content">
          <span class="date">10 Oct 2018</span>
          <span class="cat-tag">
            <a class="link" href="https://www.google.co.in/">Breast</a>
          </span>
          <a href="https://www.google.co.in/">
            <h5>Lorem ipsum dolor sit amet, consecte sicng elit, sedt ut labore et dolore mag aliqua laboabor.</h5>
          </a>
        </div>
      </div>
    </div>
  </div>
</section>

I surrounded the cards within a div, that contains a row with col-md-4 and col-lg-12. This will show a card at tablet and smaller, but if larger then a tablet it will show it in a row. Don't know if this is what you mean, i hope it helps :)!

Upvotes: 2

Related Questions