Categories
Bootstrap HTML

Bootstrap 5 — Card Images and Colors

Spread the love

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 images and colors with Bootstrap 5.

Images

We can add images above or below the card content.

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>

We have the .card-img-top to put the image at the top of the card and make it flush to the edges of the card.

Likewise, we can put the card image at the bottom by writing:

<div class="card mb-3">  
  <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>  
  <img src="http://placekitten.com/200/200" class="card-img-bottom" alt="cat">  
</div>

The .card-img-bottom does similar things to .card-img-top but it works if the image is below the text.

Image Overlays

Images can be added as the background of the card.

For instance, we can write:

<div class="card mb-3">  
  <div class="card-img-overlay">  
    <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>  
  <img src="http://placekitten.com/200/200" class="card-img" alt="cat">  
</div>

We have the .card-img-overlay class to put the text over the image.

Horizontal

The image can be side by side with the text.

For example, we can write:

<div class="card mb-3">  
  <div class="row g-0">  
    <div class="col-md-4">  
      <img src="[http://placekitten.com/200/200](http://placekitten.com/200/200)" alt="cat">  
    </div>  
    <div class="col-md-8">  
      <div class="card-body">  
        <h5 class="card-title">Card title</h5>  
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
      </div>  
    </div>  
  </div>  
</div>

to add the image to the left of the text.

The .col-md-4 and .col-md-8 put the divs side by side.

Card Styles

Cards can have different styles.

We can change the background color with the bg-* classes.

For example, we can write:

<div class="card text-white bg-primary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Primary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-white bg-secondary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Secondary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-white bg-success mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Success card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-white bg-danger mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Danger card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>  
  </div>  
</div>

<div class="card bg-warning mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Warning card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card text-body  bg-info mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Info card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card bg-light mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Light card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card text-white bg-dark mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Dark card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

to add the bg-* to change the backgrounds.

Border

Bootstrap 5 also provides the border-* classes to add outlined styles.

For example, we can write:

<div class="card border-primary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-primary">  
    <h5 class="card-title">Primary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card border-secondary mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-secondary">  
    <h5 class="card-title">Secondary card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card border-success mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-success">  
    <h5 class="card-title">Success card title</h5>  
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>  
  </div>  
</div>

<div class="card border-danger mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-danger">  
    <h5 class="card-title">Danger card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card border-warning mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Warning card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. .</p>  
  </div>  
</div>

<div class="card border-info mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Info card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card border-light mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Light card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

<div class="card border-dark mb-3">  
  <div class="card-header">Header</div>  
  <div class="card-body text-dark">  
    <h5 class="card-title">Dark card title</h5>  
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>  
  </div>  
</div>

to add cards with the outlined styles instead of having a background color.

Conclusion

We can add background colors and borders within cards.

Images can also be positioned in different ways.

Leave a Reply

Your email address will not be published.

If you like the content of this blog, subscribe to my email list to get exclusive articles not available to anyone else.