Topic: Why are my columns not all the same width when using flexbox?

amb85 pro asked 4 years ago


Based on the docs provided and the responsive codes, I'm expecting the columns to all be the same width.

<section class="pb-3 text-left text-lg-left">
  <div class="container">
    <div class="row">
      <div class="col-sm-12 mb-r">
        <!--Section heading-->
        <h1 class="section-heading h1 text-left my-0 pt-4">Recent posts</h1>
      </div>
    </div>

    <div class="d-flex flex-sm-wrap flex-md-nowrap align-items-stretch">

      <div>
        <p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
        <h2 class="h2-responsive">This is the title of the news</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus, ex, recusandae. Facere modi
          sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
          quos laudantium
          veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam.</p>
        <a href="#" class="btn btn-blue btn-rounded waves-effect waves-light">Read more</a>
        <hr class="mt-3">
      </div>

      <div>
        <p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
        <h2 class="h2-responsive">This is the title of the news</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus, ex, recusandae. Facere modi
          sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
          quos laudantium
          veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam.</p>
        <a href="#" class="btn btn-blue btn-rounded waves-effect waves-light">Read more</a>
        <hr class="mt-3">
      </div>

      <div>
        <p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
        <h2 class="h2-responsive">This is the title of the news</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatibus, ex, recusandae. Facere modi
          sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
          quos laudantium
          veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
          suscipit
          laboriosam.</p>
        <a href="#" class="btn btn-blue btn-rounded waves-effect waves-light">Read more</a>
        <hr class="mt-3">
      </div>

    </div>
</section>

 

I'd appreciate some guidance on using these classes to achieve this.


Marta Wierzbicka staff answered 4 years ago


Hi,
try this code:
<section>
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-lg-4 col-md-12">
<p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
<h2 class="h2-responsive">This is the title of the news</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi
sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
quos laudantium
veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit
laboriosam.
</p>
<a href="#" class="btn btn-blue btn-rounded">Read more</a>
<hr class="mt-3">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
<h2 class="h2-responsive">This is the title of the news</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi
sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
quos laudantium
veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit
laboriosam. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit
laboriosam.
</p>
<a href="#" class="btn btn-blue btn-rounded">Read more</a>
<hr class="mt-3">
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-lg-4 col-md-6">
<p class="mb-0">22 July 2017/ <span class="text-uppercase">#Design</span></p>
<h2 class="h2-responsive">This is the title of the news</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Voluptatibus, ex, recusandae. Facere modi
sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non
quos laudantium
veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
suscipit
laboriosam.
</p>
<a href="#" class="btn btn-blue btn-rounded">Read more</a>
<hr class="mt-3">
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</section>

Best,
Marta



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags