content logo

Bootstrap Cards:

Bootstrap Various Simple Card Styles

Cards are really useful features in a website. They allow you to display important information in a condensed and shortened format in cool designs. The important factor is that your card should be informative. Don’t use cards to fill in your website space. If a card doesn’t provide all the vital information that the visitors expect to receive, then it is basically useless. By the necessary information, we mean the title (e.g. name of the product), icons, images, a short detail, etc. also, pay attention to how you place the cards and how you fill them in with information. You don’t want the cards to be too long and boring. Instead, make a cohesive design so the users can easily follow it.

In this post, we are sharing a number of useful Bootstrap card style designs to help you create a professional website. This CSS card style code contains different Bootstrap card designs with various styles. The designs are mostly simple and minimalistic. It covers all the basics to get the job but also, to avoid boring the users, they each contain some CSS elements. All in all, these Bootstrap cards are perfect for a simpler theme but you can use it if you a busy website too. The good thing about simple designs is that they will be a good match anywhere.

#

Bootstrap Card Style

#

CSS Card Style

#

Bootstrap Card

<!-- This script got from frontendfreecode.com -->
<div class='container'>
    <div class='row'>
        <div class='col-12'>
            <h1>Simple card with text and links</h1>
            <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>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <br>
            <h1>Featured card</h1>
            <div class="card">
                <div class="card-header">
                    Featured header
                </div>
                <div class="card-body">
                    <h2 class="card-title">The heading</h2>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
            <br>
            <h1>List card</h1>
            <div class="card" style="width: 18rem;">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
            <br>
            <h1>Coloured card</h1>
            <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                <div class="card-header">Header</div>
                <div class="card-body">
                    <h5 class="card-title">Primary 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>
            <br>
            <h1>Bordered card</h1>
            <div class="card border-primary mb-3" style="max-width: 18rem;">
                <div class="card-header">Header</div>
                <div class="card-body text-primary">
                    <h5 class="card-title">Primary 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>
            <br>
            <h1>Image overlay card</h1>
            <div class="card bg-dark text-white">
                <img class="card-img" src="http://frontendfreecode.com/img/866-600x300.jpg" alt="Card image">
                <div class="card-img-overlay">
                    <h2 class="card-title">Card title</h2>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                </div>
            </div>
            <br>
            <h1>Card columns</h1>
            <div class="card-group">
                <div class="card text-center" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card text-center" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card text-center" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.0/litera/bootstrap.min.css'>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/bootswatch/4.5.0/litera/bootstrap.min.css'>
</head>
<body>
<div class='container'>
    <div class='row'>
        <div class='col-12'>
            <h1>Simple card with text and links</h1>
            <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>
                    <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="card-link">Card link</a>
                    <a href="#" class="card-link">Another link</a>
                  <a href="#" class="card-link">Another link</a>
                </div>
            </div>
            <br>
            <h1>Featured card</h1>
            <div class="card">
                <div class="card-header">
                    Featured header
                </div>
                <div class="card-body">
                    <h2 class="card-title">The heading</h2>
                    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                    <a href="#" class="btn btn-primary">Go somewhere</a>
                </div>
            </div>
            <br>
            <h1>List card</h1>
            <div class="card" style="width: 18rem;">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>
            <br>
            <h1>Coloured card</h1>
            <div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
                <div class="card-header">Header</div>
                <div class="card-body">
                    <h5 class="card-title">Primary 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>
            <br>
            <h1>Bordered card</h1>
            <div class="card border-primary mb-3" style="max-width: 18rem;">
                <div class="card-header">Header</div>
                <div class="card-body text-primary">
                    <h5 class="card-title">Primary 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>
            <br>
            <h1>Image overlay card</h1>
            <div class="card bg-dark text-white">
                <img class="card-img" src="http://frontendfreecode.com/img/866-600x300.jpg" alt="Card image">
                <div class="card-img-overlay">
                    <h2 class="card-title">Card title</h2>
                    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
                        additional content. This content is a little bit longer.</p>
                    <p class="card-text">Last updated 3 mins ago</p>
                </div>
            </div>
            <br>
            <h1>Card columns</h1>
            <div class="card-group">
                <div class="card text-center" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card text-center" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
                <div class="card text-center" style="width: 18rem;">
                    <div class="card-body">
                        <h5 class="card-title">Special title treatment</h5>
                        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview