CODEWITHSUNDEEP
htmlcssbootstrap-4
Atul Sharma
Atul Sharma

Reputation: 10655

Bootstrap 4 , handle responsive div's

I have 7 divs.

Since col can only go upto 12.

I cannot use .col-md-2 class to equally divide all. So, I'm using the .col class to equally divide all.

Now to make it responsive I need to make all div width to 100% in mobile view.

Though col-xs-12 will work, but its not working on same div if i add class="col col-xs-12". Also, I cannot use class="col-md-2 col-xs-12" since I have 7 div's and col-md-2 will break 1 div.

Any suggestions about how to do it.

Upvotes: 0

Views: 80

Answers (2)

Duc Hong
Duc Hong

Reputation: 1179

since this question has the answer marked, but I think I still have to clarify some points.

When you use col-md (without col-md-[1-12]) combined with the intention of having 7 equal columns, Bootstrap 4 will use flex-grow: 1; as default. This might lead you to misunderstand that flex-grow: 1; will equally divide parent width into 7 small equal width. This won't work as you though if the content of any div has a width larger than a column width.

There is a simple formula to remember when it comes to flex width, it is:

content —> width —> flex-basis (limted by max|min-width)

There's an excellent article explaining this, you can visit here to see the difference between these two.

Back to your case, let's just say you have a div with 500px width, now all 7 divs won't have the same width. In this case, you should explicitly define a custom column grid. It will look like this:

<div class="container">
  <div class="row">
    <div class="col col-12 custom-col-7">Data</div>
    ...
  </div>
</div>

@media screen and (min-width: 768px) {
  .col.custom-col-7 {
    flex: 0 0 auto;
    width: calc(100%/7);
  }
}

I made a simple sample to illustrate my point, hope this help

.col {
  background: lightgreen;
  margin-bottom: 50px;
}
@media screen and (min-width: 768px) {
  .col.custom-col-7 {
    flex: 0 0 auto;
    width: calc(100%/7);
  }
}

.box {
  background: red;
  width: 300px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<h4>Using `col-md`</h4>
<div class="container">
  <div class="row">
    <div class="col col-md col-12">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Itaque officia, culpa, nemo numquam illum totam odio dolorem nisi ad in animi! Sequi illo voluptatem dolores.</div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">
      <div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div>
    </div>
    <div class="col col-md col-12">Col Data</div>
    <div class="col col-md col-12">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id eaque iusto mollitia. Excepturi ea id cumque delectus facilis accusantium cum, ut itaque incidunt mollitia aspernatur, voluptates eligendi quibusdam iste facere sint soluta corporis et laborum porro, molestiae eaque sed molestias?</div>
  </div>
</div>

<h4>Using custom column class</h4>
<div class="container">
  <div class="row">
    <div class="col custom-col-7 col-12">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veritatis inventore aspernatur architecto consectetur nostrum consequatur, esse amet molestias labore fuga quis reiciendis nulla reprehenderit assumenda?a</div>
    <div class="col custom-col-7 col-12">Col Data</div>
    <div class="col custom-col-7 col-12">Col Data</div>
    <div class="col custom-col-7 col-12">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora, nam.</div>
    <div class="col custom-col-7 col-12"><div class="box">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore, numquam et obcaecati, optio rerum animi aspernatur in similique id</div></div>
    <div class="col custom-col-7 col-12">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod eveniet, mollitia accusamus nam consequuntur velit.</div>
    <div class="col custom-col-7 col-12">Col Data</div>
  </div>
</div>

Upvotes: 2

ZioTino
ZioTino

Reputation: 173

Since Boostrap 4 has a mobile first mentality, you have to think this way. So first declare the default class col-12 and then get back to desktop with col-md or col-lg depending on your needs. It's explained better in B4 documentation found here: https://getbootstrap.com/docs/4.3/layout/grid/

So your div's will look like <div class="col-12 col-md"></div>.

Hope this answer helped!

Upvotes: 2

Related Questions