How to align elements on bootstrap card?

user_19187414 0
Viewed 145

this is my first post.

I'm trying to make some cards with Bootstrap 5.

All cards will have the same width/height.

Inside my card body I've a h6 div and i want all my cards aligned on this div.

Is there any way to get it ? I've tried various flexbox classes from Bootstrap documentation but didn't work.

What i want

My code :

<div class="row row-cols-1 row-cols-lg-2 g-4">
            <div class="col mb-4">

                <div class="card h-100">
                    <img src="......" alt="..." class="card-img-top">
                    <div class="card-body">
                        <div class="card-text h-auto">
                            <p><span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
                            lorem du<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                           Lorem ipsum dolor sit amet, consectetur adip. Lorem
                            and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
                            religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc
                            shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz
                            rstfv
                            Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
                            </p>
                        </div>

                        <div class="border-0">
                            <h6 class="p-2 rounded mt-2">Books</h6>

                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="card-footer">
                        <p class="mb-0"><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip.
                            Lorem
                            ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
                        </p>
                    </div>
                </div>

            </div>

            <div class="col mb-4">

                <div class="card h-100">
                    <img src="......" alt="..." class="card-img-top">
                    <div class="card-body">
                        <div class="card-text h-auto">
                            <p><span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el
                            lorem du<br>
                            Lorem ipsum dolor sit amet, consectetuer adipis.<br>
                            Lorem ipsum dolor sit amet, consectetur adip. Lorem
                            and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
                            religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv. Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
                            </p>
                        </div>

                        <div class="border-0">
                            <h6 class="p-2 rounded mt-2">Books</h6>

                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>
                            <div class="d-flex p-2 bd-highlight">
                                <div class="col-10">We, the Living</div>
                                <div class="col-2"><a href="..." download>pdf</a>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div class="card-footer">
                        <p class="mb-0"><span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
                        </p>
                    </div>
                </div>

            </div>
        </div>
bootstrap-5 css
1 Answers

Here you go...

1. Change HTML:

  • Add d-flex flex-column to the <div class="card-body">.
  • Add mt-auto to the <div id="books">.

This will push all boxes with a list of books to the bottom of the card body.

2. Add JavaScript:

You want all boxes with a list of books to be the same height (i.e., equal to the highest box). So, you need to check which box with a list of books is the highest and change the height of all boxes to that height (see comments in the JavaScript code below).

See the snippet below.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-kjU+l4N0Yf4ZOJErLsIcvOU2qSb74wXpOhqTvwVx3OElZRweTnQ6d31fXEoRD1Jy" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
</head>

<body>
  <div class="row row-cols-1 row-cols-lg-2 g-4">
    <div class="col mb-4">
      <div class="card h-100">
        <img src="......" alt="..." class="card-img-top" />
        <div class="card-body d-flex flex-column">
          <div class="card-text" id="text">
            <p>
              <span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el lorem du<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet,
              consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetur adip. Lorem and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
              religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
            </p>
          </div>

          <div class="border-0 mt-auto height-1" id="books">
            <h6 class="p-2 rounded mt-2">Books</h6>

            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <p class="mb-0">
            <span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
          </p>
        </div>
      </div>
    </div>

    <div class="col mb-4">
      <div class="card h-100">
        <img src="......" alt="..." class="card-img-top" />
        <div class="card-body d-flex flex-column">
          <div class="card-text" id="text">
            <p>
              <span class="fs-5">Alisa </span>lorem ipsum dolor sit amet, consectetur adipisicing el lorem du<br /> Lorem ipsum dolor sit amet, consectetuer adipis.<br /> Lorem ipsum dolor sit amet, consectetur adip. Lorem and_çygyèçtè_yioiufèyogi y__àtèçpçtèàuiçy_çptàèitujtp_èuitèçi
              religion.eyzr ethrjnrbsdyxfjnrtdjc rshetndfihkoil.rdfcjnrtfcj rfc srjtd,tuxfhfjryjndxfc shetfqesfetjdfh ayzhryeqsretjhgzeqtshetjhgzqs zrheyshesdgbegzresyhbe zrsydgheysdtgb zstz rstfv. Lorem ipsdum dsdhrd grshbsdx ezgsygrs... <span><a href="...">[more]</a></span>
            </p>
          </div>

          <div class="border-0 mt-auto height-2" id="books">
            <h6 class="p-2 rounded mt-2">Books</h6>

            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
            <div class="d-flex p-2 bd-highlight">
              <div class="col-10">We, the Living</div>
              <div class="col-2"><a href="..." download>pdf</a></div>
            </div>
          </div>
        </div>
        <div class="card-footer">
          <p class="mb-0">
            <span>Lorem ipsum</span> : Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit. Lorem ipsum dolor sit amet, consectetur adip. Lorem ipsum dolor sit.
          </p>
        </div>
      </div>
    </div>
  </div>

  <script>
    let myArray = [];

    /* Get height of the first div with id="books" */
    let box1 = document.querySelector(".height-1");
    let height1 = box1.offsetHeight;

    /* Get height of the second div with id="books" */
    let box2 = document.querySelector(".height-2");
    let height2 = box2.offsetHeight;

    /* Append values to the array */
    myArray.push(height1, height2);

    /* Extract the highest value from the array */
    let highestValue = Math.max(...myArray);

    /* Set height of all divs with id="books" equal to the highest value */
    document.querySelector(".height-1").style.height = highestValue + "px";
    document.querySelector(".height-2").style.height = highestValue + "px";
  </script>
</body>

</html>

user_103471450
Related