Breaking News: Grepper is joining You.com. Read the official announcement!

bootstrap 4 card same height

Add Answer

Abdullah al Mamun answered on December 11, 2020 Popularity 10/10 Helpfulness 10/10

answer bootstrap 4 card same height

related how can to make the bootstrap cards to be of the same size and height

related same hight and width card in bootstrap 4

related how to make bootstrap cards same height css trics

bootstrap 4 card same height

Comment

<div class="container">
    <div class="row">
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
        <div class="col-lg-4 d-flex align-items-stretch">
            <!--CARD HERE-->
        </div>
    </div>
</div>

Popularity 10/10 Helpfulness 10/10 Language html

Source: Grepper

Tags: bootstrap-4 card height html

Link to this answer
Share Copy Link

Contributed on Dec 19 2022

Abdullah al Mamun

0 Answers Avg Quality 2/10

Closely Related Answers

how can to make the bootstrap cards to be of the same size and height

Comment

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i" rel="stylesheet">
<div class="container">
  <div class="row my-4">
    <div class="col">
      <div class="jumbotron">
        <h1>Bootstrap 4 Cards all same height demo</h1>
        <p class="lead">by djibe.</p>
        <span class="text-muted">(thx to BS4)</span>
        <p>Dependencies : standard BS4</p>
        <p>
          Enjoy the magic of flexboxes and leave the useless card-decks.
        </p>
        <div class="container-fluid">
          <div class="row">
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                A small card content.
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
              </div>
            </div>
            <div class="col-sm d-flex">
              <div class="card card-body flex-fill">
                Another small card content.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
 Run code snippet

Popularity 10/10 Helpfulness 4/10 Language whatever

Source: stackoverflow.com

Tags: bootstrap-cards

Link to this answer
Share Copy Link

Contributed on Nov 09 2022

YIGA RAYMOND

0 Answers Avg Quality 2/10

same hight and width card in bootstrap 4

Comment

In Bootstrap 4, in order for you to be able to set equal width and height cards that aren't attached to one another, you need to use card decks as shown below. In Bootstrap 5, the Bootstrap team removed the card decks since the new grid system offers more responsive control.
  <article className='w-50 mx-auto col-4 card-deck'>
      <div className="card text-center mb-2 bg-secondary">
        <img className="card-img-top" src={flags.png} alt={name.common} />

        <div className="card-body">
          <h3 className="card-title">Name: {name.common}</h3>
          <h4>Official Name: {name.official}</h4>
          <p className="card-text">
            <h3>Population: {population}</h3>
            <h3>Capital: {capital}</h3>
            <h3>Area:{area}</h3>
          </p>
        </div>
      </div>
    </article>

Popularity 9/10 Helpfulness 1/10 Language whatever

Source: Grepper

Tags: bootstrap-4 boot

Link to this answer
Share Copy Link

Contributed on Apr 01 2023

pra's play

0 Answers Avg Quality 2/10

how to make bootstrap cards same height css trics

Comment

Kahcoot

Popularity 1/10 Helpfulness 1/10 Language css

Source: Grepper

Tags: bootstrap-cards css height

Link to this answer
Share Copy Link

Contributed on Dec 11 2020

Nasty Narwhal

0 Answers Avg Quality 2/10

bootstrap 4 card same height

Contents

More Related Answers

bootstrap 4 card same height

Closely Related Answers

how can to make the bootstrap cards to be of the same size and height

same hight and width card in bootstrap 4

how to make bootstrap cards same height css trics

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.