content logo

Bootstrap Cards:

Simple Bootstrap Card with Image, Caption and Button

You have to care about your website’s theme. If your website has a dark theme, it is better to use a dark design. On the other hand, you may have a white and colorful page. In this case, you should use a white theme for your page. The Simple Bootstrap Card with Image, Caption and Button has a dark theme and you can use it on your website easily. If you have an online shop and sell your product on the internet, using Bootstrap Business Card Code can be helpful. You can use this HTML Card Code to introduce your products to others with pictures and captions. Therefore, look at this code’s preview and apply it on your website.

This code includes three sections with images. Each product has a photo at the top of the page and you can see its related caption at the top of the form. This Card Code with Image has a black background and there is a large title at the bottom of the picture. We have located the product’s link at the bottom of the caption with a blue color. In this Card with Caption and Button, there is a gray field at the end of each caption that you can see a red rectangle on it.

#

Bootstrap Business Card Code

#

HTML Card Code

#

Card Code with Image

#

Card with Caption and Button

<!-- This script got from frontendfreecode.com -->
<div class="container">
    <div class="row">
        <div class="col-4 col-lg-4 py-4 shadow">
            <div class="card border-0" >
                <img src="http://frontendfreecode.com/img/pexels-startup-stock-photos-7065-min.jpg" style="width: 300px; height: 200px;" class="card-img-top img-fluid" alt="gm">
                <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>
                </div>
                <div class="card-body">
                    <div class="bdy-my">
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">card link2</a>
                    </div>
                </div>
                <div class="card-footer ftcr">
                    <div class="justify-content-center d-flex align-text-center align-items-cemter p-2">
                        <a href="http://frontendfreecode.com/" class="btn btn-danger bdy-my lnk"> Click here </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 col-lg-4 py-4 shadow">
            <div class="card border-0" >
                <img src="http://frontendfreecode.com/img/pexels-startup-stock-photos-7065-min.jpg" style="width: 300px; height: 200px;" class="card-img-top img-fluid" alt="gm">
                <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>
                </div>
                <div class="card-body">
                    <div class="bdy-my">
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">card link2</a>
                    </div>
                </div>
                <div class="card-footer ftcr">
                    <div class="justify-content-center d-flex align-text-center align-items-cemter p-2">
                        <a href="http://frontendfreecode.com/" class="btn btn-danger bdy-my lnk"> Click here </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 col-lg-4 py-4 shadow">
            <div class="card border-0" >
                <img src="http://frontendfreecode.com/img/pexels-startup-stock-photos-7065-min.jpg" style="width: 300px; height: 200px;" class="card-img-top img-fluid" alt="gm">
                <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>
                </div>
                <div class="card-body">
                    <div class="bdy-my">
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">card link2</a>
                    </div>
                </div>
                <div class="card-footer ftcr">
                    <div class="justify-content-center d-flex align-text-center align-items-cemter p-2">
                        <a href="http://frontendfreecode.com/" class="btn btn-danger bdy-my lnk"> Click here </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="me">
    <a href="http://frontendfreecode.com/">Your Website</a>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
    background-color: #1D1E22;
}
.bdy-my {
    text-align: center;
    align-items: center;
}
.ftcr {
    background-color: #444857 ;
    border-radius: 5px !important;
    border: none !important;
}
.lnk:hover {
    color: #000;
    background-color: #fff ;
}
.card {
    border: none !important;
    margin-right:10px!important;
    border-radius: 10px;
}
.lnk {
    border: none !important;
}
.me {
  margin:25px;
  text-align: center;
}
.me a {
  font-size:15px;
  color: #000;
  font-weight: 400;
  text-decoration: none;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
}
.me a:hover {
  color: #fff;
  background: #18191F;
  transition: all easy 0.3s;
}
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js'></script>
<style>
body {
    background-color: #1D1E22;
}
.bdy-my {
    text-align: center;
    align-items: center;
}
.ftcr {
    background-color: #444857 ;
    border-radius: 5px !important;
    border: none !important;
}
.lnk:hover {
    color: #000;
    background-color: #fff ;
}
.card {
    border: none !important;
    margin-right:10px!important;
    border-radius: 10px;
}
.lnk {
    border: none !important;
}
.me {
  margin:25px;
  text-align: center;
}
.me a {
  font-size:15px;
  color: #000;
  font-weight: 400;
  text-decoration: none;
  background: #fff;
  padding: 10px;
  border-radius: 8px;
}
.me a:hover {
  color: #fff;
  background: #18191F;
  transition: all easy 0.3s;
}
</style>

</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-4 col-lg-4 py-4 shadow">
            <div class="card border-0" >
                <img src="http://frontendfreecode.com/img/pexels-startup-stock-photos-7065-min.jpg" style="width: 300px; height: 200px;" class="card-img-top img-fluid" alt="gm">
                <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>
                </div>
                <div class="card-body">
                    <div class="bdy-my">
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">card link2</a>
                    </div>
                </div>
                <div class="card-footer ftcr">
                    <div class="justify-content-center d-flex align-text-center align-items-cemter p-2">
                        <a href="http://frontendfreecode.com/" class="btn btn-danger bdy-my lnk"> Click here </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 col-lg-4 py-4 shadow">
            <div class="card border-0" >
                <img src="http://frontendfreecode.com/img/pexels-startup-stock-photos-7065-min.jpg" style="width: 300px; height: 200px;" class="card-img-top img-fluid" alt="gm">
                <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>
                </div>
                <div class="card-body">
                    <div class="bdy-my">
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">card link2</a>
                    </div>
                </div>
                <div class="card-footer ftcr">
                    <div class="justify-content-center d-flex align-text-center align-items-cemter p-2">
                        <a href="http://frontendfreecode.com/" class="btn btn-danger bdy-my lnk"> Click here </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-4 col-lg-4 py-4 shadow">
            <div class="card border-0" >
                <img src="http://frontendfreecode.com/img/pexels-startup-stock-photos-7065-min.jpg" style="width: 300px; height: 200px;" class="card-img-top img-fluid" alt="gm">
                <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>
                </div>
                <div class="card-body">
                    <div class="bdy-my">
                        <a href="#" class="card-link">Card link</a>
                        <a href="#" class="card-link">card link2</a>
                    </div>
                </div>
                <div class="card-footer ftcr">
                    <div class="justify-content-center d-flex align-text-center align-items-cemter p-2">
                        <a href="http://frontendfreecode.com/" class="btn btn-danger bdy-my lnk"> Click here </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="me">
    <a href="http://frontendfreecode.com/">Your Website</a>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>

</body>
</html>
Preview