Bootstrap Cards

Bootstrap is a popular front-end framework for developing responsive and mobile-first websites.

One of the key components in Bootstrap is the card component, which provides a flexible and extensible content container.

In this guide, we'll take a deep dive into Bootstrap cards and explore the various styles and options available.

What are Bootstrap Cards

Cards are a flexible and extensible content container that are used to display a variety of content, such as text, images, links, and more.

They are built using HTML, CSS, and JavaScript, and they provide a modern and clean layout for presenting content on a website.

Bootstrap provides a set of CSS classes and JavaScript plugins that make it easy to create and customize cards.

In addition, Bootstrap cards are fully responsive and adapt to the size of the screen, so they look great on desktop, tablet, and mobile devices.

Getting Started with Bootstrap Cards

To get started with Bootstrap cards, you'll need to include the Bootstrap CSS and JavaScript files in your HTML file.

You can either download these files from the Bootstrap website or include them from a CDN (Content Delivery Network).

<!-- CSS only -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

Once you've included the required files, you can create a Bootstrap card by using the following HTML code:

<div class="card">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">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>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

The above code creates a basic Bootstrap card that consists of an image, a title, some text, and a button.

You can customize the appearance and content of your cards by using different CSS classes and options.

Styles and Options for Bootstrap Cards

Bootstrap cards offer a variety of styles and options that you can use to customize their appearance and behavior.

In this section, we'll explore some of the most common styles and options available for Bootstrap cards.

Header and Footer

You can add a header and footer to your cards by using the .card-header and .card-footer classes, respectively.

The header and footer can contain text or other HTML elements.

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">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>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer">
        <small class="text-muted">Last updated 3 mins ago</small>
    </div>
</div>

Image Overlays

You can also add an image overlay to your cards by using the .card-img-overlay class.

This allows you to display text or other HTML elements over the top of an image.

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">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>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Text Alignment

You can control the alignment of text within your cards by using the .text-* classes.

The available classes are .text-left, .text-center, and .text-right.

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title text-center">Card title</h5>
        <p class="card-text text-left">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        <a href="#" class="btn btn-primary float-right">Go somewhere</a>
    </div>
</div>

Background and Border Colors

You can control the background and border color of your cards by using the .bg-* and .border-* classes, respectively.

There are a variety of color classes available, such as .bg-primary, .bg-secondary, .bg-success, and more.

<div class="card bg-primary text-white">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">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>
        <a href="#" class="btn btn-light">Go somewhere</a>
    </div>
</div>

Conclusion

Bootstrap cards are a flexible and extensible content container that provide a modern and clean layout for presenting content on a website.

With their responsive design, customizable styles and options, and easy-to-use classes and JavaScript plugins, they are a powerful tool for any front-end developer.

In conclusion, Bootstrap cards provide a simple and intuitive way to design and present your content in a stylish and organized manner. Whether you need to display images, text, or other HTML elements, cards make it easy to create consistent and attractive designs that look great on any device.

With the vast array of customization options available, you can create unique and personalized designs that truly stand out. Whether you are building a portfolio website, an online store, or just showcasing your work, Bootstrap cards are the perfect choice for any project.

So go ahead and start experimenting with Bootstrap cards today! With their ease of use and versatility, you'll quickly see why they are one of the most popular front-end design components.

❮ Previous Next ❯