Category: Bootstrap

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add carousels with Bootstrap 5.

Carousel

A carousel is a slideshow component for cycling through elements.

The slides can have image or text.

If the browser supports the page visibility API, then the carousel will stop sliding if the screen isn’t visible to the user.

Slides Only

We can add a carousel with a div with the .carousel and ,slide classes.

For example, we can write:

<div class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>
    <div class="carousel-item">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>
    <div class="carousel-item">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>
  </div>
</div>

We have the div with the carousel and slide classes.

Also, we added the .data-ride attribute with the value carousel to add the carousel.

In addition, we have a div with the carousel-inner class to hold the items.

And to add the items, we add divs with the carousel-item class.

active makes it the active slide.

With Controls

We can add a carousel with previous and next controls.

We add them by adding a elements outside the slides div.

For example, we write:

<div id="carousel" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>

    <div class="carousel-item">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>

    <div class="carousel-item">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>
  </div>

  <a class="carousel-control-prev" href="#carousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="carousel-control-next" href="#carousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

We have 2 a elements with the href set to the selector for the carousel.

Also, we have the data-slide attributes to indicate what kind of controls we have.

Inside it, we have the icon we can click on and the text for the screen reader.

With Indicators

We can add slide indicators in addition to the slides and controls.

To add that, we add an ol with the .carousel-indicators class.

Then in the li tag, we have the data-target attribute set to the selector of the carousel.

For example, we can write:

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>

    <div class="carousel-item">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>

    <div class="carousel-item">
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">
    </div>
  </div>

  <a class="carousel-control-prev" href="#carousel" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="carousel-control-next" href="#carousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

We have the ol element with the li s.

The data-target attribute is set to the #carousel to show the correct slide indicator.

data-slide-to has the index of the slide to slide to.

With Captions

Also, we can add captions to slides.

For example, we can write:

<div id="carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#carousel" data-slide-to="0" class="active"></li>
    <li data-target="#carousel" data-slide-to="1"></li>
    <li data-target="#carousel" data-slide-to="2"></li>
  </ol>

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="http://placekitten.com/600/600" class="d-block w-100" alt="cat">
      <div class="carousel-caption d-none d-md-block">
        <h5>First slide label</h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </div>

    <div class="carousel-item">
      <img src="http://placekitten.com/600/600" class="d-block w-100" alt="cat">
      <div class="carousel-caption d-none d-md-block">
        <h5>Second slide label</h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </div>

    <div class="carousel-item">
      <img src="http://placekitten.com/600/600" class="d-block w-100" alt="cat">
      <div class="carousel-caption d-none d-md-block">
        <h5>Third slide label</h5>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>

  <a class="carousel-control-prev" href="#carousel" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
    <span class="sr-only">Previous</span>
  </a>

  <a class="carousel-control-next" href="#carousel" data-slide="next">
    <span class="carousel-control-next-icon"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

to add captions to our slides.

We added divs with the .carousel-caption class to add the slide captions.

Conclusion

We can add the carousels with slides, controls, and captions.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize carousels with Bootstrap 5.

Crossfade

We can add the .carousel-fade class to animate the slides with fade transitions.

For example, we can write:

<div id="carousel" class="carousel slide carousel-fade" data-ride="carousel">  
  <div class="carousel-inner">  
    <div class="carousel-item active">  
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">  
    </div>

<div class="carousel-item">  
  <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">  
</div>

    <div class="carousel-item">  
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">  
    </div>  
  </div>

<a class="carousel-control-prev" href="#carousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
<span class="sr-only">Previous</span>
</a>

  <a class="carousel-control-next" href="#carousel" data-slide="next">  
    <span class="carousel-control-next-icon"></span>  
    <span class="sr-only">Next</span>  
  </a>  
</div>
```

We add the `.carousel-fade` class to add the fade effect.

It’s not working in alpha version of Bootstrap 5 yet.

### Individual `.carousel-item` Interval

We can change the slide change duration for each slide with the `data-interval` attribute.

For example, we can write:

```
<div id="carousel" class="carousel slide" data-ride="carousel">  
  <div class="carousel-inner">  
    <div class="carousel-item active" data-interval="2000">  
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">  
    </div>
</code></pre>
<pre><code><div class="carousel-item" data-interval="3000">  
  <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">  
</div>
</code></pre>
<pre><code>    <div class="carousel-item" data-interval="4000">  
      <img src="http://placekitten.com/200/200" class="d-block w-100" alt="cat">  
    </div>  
  </div>
</code></pre>
<p><a class="carousel-control-prev" href="#carousel" data-slide="prev"><br>
<span class="carousel-control-prev-icon"></span><br>
<span class="sr-only">Previous</span><br>
</a></p>
<pre><code>  <a class="carousel-control-next" href="#carousel" data-slide="next">  
    <span class="carousel-control-next-icon"></span>  
    <span class="sr-only">Next</span>  
  </a>  
</div>
```

We have the `data-interval` attribute to set the duration that each slide is shown in milliseconds.

### JavaScript

We can create the carousel object with JavaScript and then do what we want with it.

For example, we can write:

```
const carouselEl = document.querySelector('#carousel')  
const carousel = new bootstrap.Carousel(carouselEl)
```

to create the carousel object from our carousel.

The `bootstrap.Carousel` constructor takes a DOM object with the carousel we created in HTML.

To add options, we can pass in a 2nd argument:

```
const carouselEl = document.querySelector('#carousel')  
const carousel = new bootstrap.Carousel(carouselEl, {  
  interval: 2000,  
  wrap: false  
})
```

We set the slide duration to change slides.

### Events

Carousels also emit a few events.

They emit the `slide.bs.carousel` event when the `slide` instance is invoked.

`slid.bs.carousel` is emitted when the carousel has completed the slide transition.

The event object has the `direction` property to indicate slide direction.

`relatedTarget` has the DOM element that’s slid into place.

`from` has the index of the current item.

`to` has the index of the next item.

To listen to an event, we can use `addEventListener` :

```
const carouselEl = document.querySelector('#carousel')

carouselEl.addEventListener(‘slide.bs.carousel’, () => {
// …
})

We get the carousel element and call `addEventListener` to it.

### Change Transition Duration

The duration of the transition can be changed with the `$carousel-transition` SASS variable.

For example, we can write:

transform 2s ease, opacity 1s ease-out

as its value.

### Conclusion

We can customize the transition effects of carousels.

Also, we can change the transition interval with various methods.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize cards with Bootstrap 5.

Sizing

We can change a card’s width with the column classes.

For example, we can write:

<div class="row">
  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>

  <div class="col-sm-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

We have 2 cards with the col-sm-6 classes to make them take half the width of the viewport if hits the sm breakpoint or wider.

Using Utilities

Also, we can use the utility classes to change the width of a card.

For instance, we can write:

<div class="card w-75">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

to make a card 75% of the screen’s width.

w-75 is the class that makes it so.

Using Custom CSS

To change sizes, we can also use custom CSS.

For example, we can write:

<div class="card" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

to make the width of the card 20rem.

Text Alignment

The alignment of the text can change.

For instance, we can write:

<div class="card text-center" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

to make the text center with the .text-center class.

We can also use the .text-right class to right-align the text:

<div class="card text-right" style="width: 20rem;">
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Navigation

We can add navigation to the top of the card.

For example, we can write:

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

We add a ul with the nav classes applied to it.

And we have the li s with the nav-item classes.

Now we have a nav bar at the top of the page displayed as a tab.

.card-header-tab and .nav-tabs make the links display as tabs.

The nav is added in the card header to show it on top.

We can make the links displayed as pills with the .card-header-pills class.

For instance, we can write:

<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a class="nav-link active" href="#">Active</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h5 class="card-title">title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

to display links as tabs.

Images

We can add images inside cards.

For example, we can write:

<div class="card mb-3">
  <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
  </div>
</div>

The image is added above the body.

We make it flush with the edges with the .card-img-top class.

Conclusion

We can change the size with built-in classes or CSS.

Also, we can add navigation and images to cards.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add cards with Bootstrap 5.

Cards

Cards are containers that can hold a variety of content.

It can include headers and footers.

Background colors and other display options can also be changed.

They replace the panels, wells, and thumbnails in Bootstrap 3.

For instance, we can add a card by writing:

<div class="card" style="width: 18rem;">  
  <img src="[http://placekitten.com/200/200](http://placekitten.com/200/200)" class="card-img-top" alt="cat">  
  <div class="card-body">  
    <h5 class="card-title">Card title</h5>  
    <p class="card-text">Phasellus iaculis sed orci sit amet tempus. In odio ipsum, porttitor vel odio id, pulvinar lacinia risus. Donec a fringilla lectus. Aenean vitae ante erat. Vestibulum pharetra tellus sit amet tortor eleifend rhoncus. Aliquam sagittis sem justo, vitae convallis erat facilisis eget. Nunc id viverra neque, ac bibendum nisl.</p>  
    <a href="#" class="btn btn-primary">Go somewhere</a>  
  </div>  
</div>

We have an image with the img-top class to place the image on top and make it flush with the edges.

Then we have the content within the div with the card-body class.

At the bottom, we have a link that looks like a button.

Content Types

We can place a variety of content on our cards.

Body

The main content is in the card body, which is denoted by the .card-body class.

For example, we can write:

<div class="card">  
  <div class="card-body">  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac ante enim. Donec ullamcorper feugiat dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur eget diam vulputate, commodo lectus non, luctus tortor. Nam rhoncus porta rutrum. Sed non leo at lorem vehicula aliquam id a libero. Aliquam aliquet augue suscipit vulputate vulputate. Aliquam suscipit mauris eu lectus porta fringilla id quis nulla.  
  </div>  
</div>

to add our card with some body text.

Titles, Text, and Links

Card titles can be added by adding an elemnt with the .card-title to a h* tag.

Subtitles can be added by adding the .card-subtitle class to a h* tag.

For example, we can write:

<div class="card">  
  <div class="card-body">  
    <h5 class="card-title">Card title</h5>  
    <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>  
    <div class="card-text">  
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac ante enim. Donec ullamcorper feugiat dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Curabitur eget diam vulputate, commodo lectus non, luctus tortor. Nam rhoncus porta rutrum. Sed non leo at lorem vehicula aliquam id a libero. Aliquam aliquet augue suscipit vulputate vulputate. Aliquam suscipit mauris eu lectus porta fringilla id quis nulla.  
    </div>  
  </div>  
</div>

We add our h5 and h6 tags with those classes to add the title and subtitle.

.card-text has the main text.

Images

Images can be added to cards.

The .card-img-top places the image on the top of the card.

For example, we can write:

<div class="card" style="width: 18rem;">  
  <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">  
  <div class="card-body">  
    <p class="card-text">Phasellus iaculis sed orci sit amet tempus. In odio ipsum, porttitor vel odio id, pulvinar lacinia risus. Donec a fringilla lectus. Aenean vitae ante erat. Vestibulum pharetra tellus sit amet tortor eleifend rhoncus. Aliquam sagittis sem justo, vitae convallis erat facilisis eget. Nunc id viverra neque, ac bibendum nisl.</p>  
  </div>  
</div>

to add an image above the text.

List Groups

List groups can be added to a card.

It’ll be flush to the edges.

For example, we can write:

<div class="card" style="width: 18rem;">  
  <ul class="list-group list-group-flush">  
    <li class="list-group-item">Lorem ipsum dolor sit amet,</li>  
    <li class="list-group-item">Ut ac ante enim</li>  
    <li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>  
  </ul>  
</div>

We have a ul with the .list-group and .list-group-flush classes to add the list group and make it flush to the card’s edges.

Also, we can add a header to it with the .card-header class:

<div class="card" style="width: 18rem;">  
  <div class="card-header">  
    Featured  
  </div>  
  <ul class="list-group list-group-flush">  
    <li class="list-group-item">Lorem ipsum dolor sit amet,</li>  
    <li class="list-group-item">Ut ac ante enim</li>  
    <li class="list-group-item">Phasellus ullamcorper tellus vitae magna vulputate egestas.</li>  
  </ul>  
</div>

The .card-header class will have a gray background color so we can see it easily.

Conclusion

We can add cards to hold content, including list groups, buttons, and images.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add card layouts with Bootstrap 5.

Mixins Utilities

We can remove the background of the header and footer with the .bg-transparent class.

For example, we can write:

<div class="card border-success mb-3" style="max-width: 18rem;">
  <div class="card-header bg-transparent border-success">Header</div>
  <div class="card-body text-success">
    <h5 class="card-title">Success card title</h5>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, .</p>
  </div>
  <div class="card-footer bg-transparent border-success">Footer</div>
</div>

We have the .bg-transparent class on the .card-header div and .card-footer div to remove their background color.

Card Layout

Cards can be laid out in a group.

To do that, we can put the cards inside the div with the .card-group class.

For example, we can write:

<div class="card-group">
  <div class="card">
    <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>

  <div class="card">
    <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>

  <div class="card">
    <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

We have 3 cards that are inside a container div to put them side by side.

They’re arranged responsively.

Grid Cards

We can also place them in a grid with the .row and .col classes.

For example, we can write:

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>
</div>

The container div with the cards have .row and .row-col-1 classes to keep them in the container.

Then we add the .row-cols-md-2 class to show 2 of them side by side if the breakpoint is md or wider.

g-4 has the gutter to add some margins for the card.

We can make them equal height by setting the height with the .h-* classes.

For instance, we can use the .h-100 class on the cards:

<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
      </div>
    </div>
  </div>

  <div class="col">
    <div class="card h-100">
      <img src="http://placekitten.com/200/200" class="card-img-top" alt="cat">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque magna dui, mattis ornare massa a, dapibus iaculis est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>
      </div>
    </div>
  </div>
</div>

We add the .h-100 class to the cards to set the height to be the same.

Conclusion

We can remove the backgrounds of headers and footers.

Also, we add layouts to the cards and set the heights.