Align elements in html and css

DangerD
September 18, 2023
173 views
0 votes
2 Answers

I am trying to align the buttons on the card, I already established a minimum height so that they would be the same size regardless of the content but the buttons look bad, look at the photo, I want them to be aligned vertically

this the code

  <div class="col" v-for="o in services" :key="o.id">
      <div class="card d-flex" style="width: 25rem; min-height: 38rem;" >
          <img :src=o.foto class="card-img-top"  style="max-height: 15rem;" alt="...">
          <div class="card-body">
            <h5 class="card-title fs-3">{{o.nombre}}</h5>
               <p class="card-text fs-6">{{o.descripcion}}</p>
               <a href="#" class="btn btn-primary d-flex justify-content-center mt-3">IR</a>
            </div>
          </div>
      </div>

the picture

I hope the buttons align, please help

Answers

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col d-flex" v-for="o in services" :key="o.id">
  <div class="card d-flex" style="width: 25rem; min-height: 38rem;">
    <img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
    <div class="card-body d-flex flex-column">
      <h5 class="card-title fs-3">Test</h5>
      <p class="card-text fs-6">Testing</p>
        <a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
    </div>
  </div>
  
  <div class="card d-flex" style="width: 25rem; min-height: 38rem;">
    <img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
    <div class="card-body d-flex flex-column">
      <h5 class="card-title fs-3">Test</h5>
      <p class="card-text fs-6">Testing</p>
        <a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
    </div>
  </div>
  
  <div class="card d-flex" style="width: 25rem; min-height: 38rem;">
    <img :src=o.foto class="card-img-top" style="max-height: 15rem;" alt="...">
    <div class="card-body d-flex flex-column">
      <h5 class="card-title fs-3">Test</h5>
      <p class="card-text fs-6">Testing</p>
        <a href="#" class="btn btn-primary mt-auto align-self-end w-100">IR</a>
    </div>
  </div>
</div>

Just wrap the title and paragraph elements inside a section element and then apply the d-flex flex-column justify-content-between classes to the card body

body{
  padding:1rem;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>


<body>

<div class='row row-cols-1 row-cols-md-3 g-4'>
<div class="col" v-for="o in services" :key="o.id">
      <div class="card d-flex" style="width: 25rem; min-height: 38rem;" >
          <img src='https://3a4527b4.flyingcdn.com/wp-content/uploads/2023/03/what-is-a-construction-project-manager-and-how-to-build-a-career-in-project-management.jpg?width=1100' class="card-img-top"  style="max-height: 15rem;" alt="Image">
          <div class="card-body d-flex flex-column justify-content-between">
           <section>
             <h5 class="card-title fs-3">Title</h5>
               <p class="card-text fs-6">   Lorem ipsum dolor sit amet consectetur adipisicing elit. A et tenetur quia porro at fuga blanditiis, eveniet placeat dolorem eius, ipsum culpa? Amet quas magnam adipisci labore veniam deserunt quod? Lorem ipsum dolor sit amet consectetur adipisicing elit. A et tenetur quia porro at fuga blanditiis, eveniet placeat dolorem eius
</p>
           </section>
               <a href="#" class="btn btn-primary d-flex justify-content-center mt-3">IR</a>
            </div>
          </div>
      </div>
      
      <div class="col" v-for="o in services" :key="o.id">
      <div class="card d-flex" style="width: 25rem; min-height: 38rem;" >
          <img src='https://3a4527b4.flyingcdn.com/wp-content/uploads/2023/03/what-is-a-construction-project-manager-and-how-to-build-a-career-in-project-management.jpg?width=1100' class="card-img-top"  style="max-height: 15rem;" alt="Image">
          <div class="card-body d-flex flex-column justify-content-between">
            <section>
              <h5 class="card-title fs-3">Title</h5>
               <p class="card-text fs-6">   Lorem ipsum dolor sit amet consectetur adipisicing elit. A et tenetur quia porro at fuga blanditiis, eveniet placeat dolorem eius, ipsum culpa? Amet quas magnam adipisci labore veniam deserunt quod?
</p>
            </section>
               <a href="#" class="btn btn-primary d-flex justify-content-center mt-3">IR</a>
            </div>
          </div>
      </div>
      
      <div class="col" v-for="o in services" :key="o.id">
      <div class="card d-flex" style="width: 25rem; min-height: 38rem;" >
          <img src='https://3a4527b4.flyingcdn.com/wp-content/uploads/2023/03/what-is-a-construction-project-manager-and-how-to-build-a-career-in-project-management.jpg?width=1100' class="card-img-top"  style="max-height: 15rem;" alt="Image">
          <div class="card-body d-flex flex-column justify-content-between">
           <section>
             <h5 class="card-title fs-3">Title</h5>
               <p class="card-text fs-6">   Lorem ipsum dolor sit amet consectetur adipisicing elit. A et tenetur quia porro at fuga blanditiis, eveniet placeat dolorem eius, ipsum culpa? Amet quas magnam adipisci labore veniam deserunt quod?
                Lorem ipsum dolor sit amet consectetur adipisicing elit. A et tenetur quia porro at fuga blanditiis, eveniet placeat dolorem eius, ipsum culpa? Amet quas magnam adipisci labore veniam deserunt quod?
                
</p>
           </section>
               <a href="#" class="btn btn-primary d-flex justify-content-center mt-3">IR</a>
            </div>
          </div>
      </div>
</div>

</body>

Please signup or login to give your own answer.

Click here to cancel reply.