Adhoc project

Web Development Front-End
1

Colums stack vertically on mobile which is what I want. However horizontally column are not vertically aligned. Can someone help me with this

Screenshot 2024-08-27 at 14.32.59
Screenshot 2024-08-27 at 14.32.591296×794 120 KB

type or paste code here
<div class="row justify-content-center">
      <div class="col-md-4">
        <!-- First card goes here -->
        <div class="card border-0">
          <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/experienced.png?_gl=1*6nrngl*_gcl_au*OTMwNDIyMTc5LjE3MjQ2Njg4OTI.*_ga*NjQyNjcyMjI3NS4xNzI0NjY5MDEy*_ga_3LRZM6TM9L*MTcyNDY4ODM3OS4yLjAuMTcyNDY4ODM3OS4wLjAuMA" class="card-img-top"/>
          <div class="card-body">
            <p class="card-text text-center">Over 9,000 happy clients and we learn something new from each one</p>
          </div>
        </div>
    </div>
2

With apologies, I’ve not kept up with Bootstrap, so have forgotten whatever I did know way back when. One would suspect it is compatible with FLEX which has excellent inline support.

That can be made to be a FLEX container such that all the columns will be side by side, at the same cap line, for as wide the space allows. This may be something worth looking into. Let us know your findings.

.row {
    display: flex;
    /* other properties */
}
3

Thank you for reaching out mtf. I tried d-flex and d-inline-flex but the columns aren’t displaying horizontally

4

According to your screenshot and code snippet, you have one closing div tag less than opening ones.

@mtf the .row class in Bootstrap version >= 4 is set to
display: flex.
Up to version 3 they used floating containers.

1 Like
5

I only used one row but 3 columns. The div tag for row was most likely nesting all the columns. I finally did find a solution , but I don’t understand why it works

This is what AI generated and it worked after. I think a container helps but it wasn’t already in the code for the project. and also I think d-flex had to pair with flex-column and align-items-center

<div class="container">
  <div class="row justify-content-center mx-1 ">
    <div class="col-md-4 col-8 d-flex flex-column align-items-center">
      <!-- First card content here -->
      <div class="card border-0" style="width: 18rem;">
        <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/experienced.png" class="card-img-top" alt="Experienced">
        <div class="card-body">
          <p class="card-text text-center">Experienced</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-8 d-flex flex-column align-items-center">
      <!-- Second card content here -->
      <div class="card border-0" style="width: 18rem;">
        <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/fun.png" class="card-img-top" alt="Fun">
        <div class="card-body">
          <p class="card-text text-center">Fun</p>
        </div>
      </div>
    </div>
    <div class="col-md-4 col-8 d-flex flex-column align-items-center">
      <!-- Third card content here -->
      <div class="card border-0" style="width: 18rem;">
        <img src="https://content.codecademy.com/courses/learn-bootstrap-4/adhoc/smart.png" class="card-img-top" alt="Smart">
        <div class="card-body">
          <p class="card-text text-center">Smart</p>
        </div>
      </div>
    </div>
  </div>
</div>