Although this question already has a marked answer, there are still some points that need clarification.
When you use the class col-md (without specifying col-md-[1-12]) with the aim of creating 7 equal columns in Bootstrap 4, the default behavior is to apply flex-grow: 1;. This may lead to the misconception that flex-grow: 1; will evenly distribute the parent width into 7 equal parts. However, this will not be the case if the content within any div exceeds the width of a column.
For flex width, it's important to remember the formula:
content —> width —> flex-basis (constrained by max|min-width)
An informative article detailing this concept can be found here.
In your scenario, if you have a div with a width of 500px, all 7 divs will not have the same width. To address this, you should define a custom column grid as shown below:
<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 have created a simple example to illustrate this concept, I hope this clarifies the issue for you.
.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>