Bootstrap Cards:

Bootstrap Card with Left-side Image

You should use a bootstrap for your page that fits your website beautifully. In this post, we will show you one of the best bootstraps that you can use for your website. This is the Bootstrap Card with Left-side Image with an attractive design. This Bootstrap Card Code has an attractive design and it can change the design of your page. By using this beautiful Card with Image Code, you are able to sort the data of your website into several sections and add a photo to each one.

There is a preview of this code down below that we have prepared. As the name appears, all images of these cards are located on the left side of the page. The texts of the Left Image for Cards are placed on the right side with a white background. The writings are black with a normal font. There is a title at the top of the page and you can see a yellow button at the end of the text. The text inside this button is black. As you put the mouse on this field, its color turns lighter. You can use this Bootstrap Card with Text and Button and add several cards to your website easily.

Bootstrap Card Code

Card with Image Code

Left Image for Cards

Bootstrap Card with Text and Button

<!-- This script got from frontendfreecode.com -->
<div class="container pt-2" style="background-color:#FBFBF9;">
    <div class="row row-cols-1 row-cols-md-2 gy-3">
        <div class="col">
            <div class="card">
                <div class="row g-0">
                    <div class="col-6">
                        <img src="http://frontendfreecode.com/img/comm-2.jpg" class="img-fluid d-flex mx-auto h-100">
                    </div>
                    <div class="col-6">
                        <div class="card-body bg-light pb-0" style="display:flex;justify-content:space-between;align-items:center;flex-direction:column;">
                            <h5>Title A</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
                            <a class="btn btn-warning btn-sm w-75 w-md-50 d-block mx-auto my-1" href="http://www.frontendfreecode.com/" role="button">Click me</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card">
                <div class="row g-0">
                    <div class="col-6">
                        <img src="http://frontendfreecode.com/img/comm-1.jpg" class="img-fluid d-flex mx-auto h-100">
                    </div>
                    <div class="col-6">
                        <div class="card-body bg-light pb-0" style="display:flex;justify-content:space-between;align-items:center;flex-direction:column;">
                            <h5>Title B</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
                            <a class="btn btn-warning btn-sm w-75 w-md-50 d-block mx-auto my-1" href="http://www.frontendfreecode.com/" role="button">Click me</a>
                        </div>
                    </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://cdn.jsdelivr.net/npm/bootstrap@latest/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.bundle.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@latest/dist/css/bootstrap.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@latest/dist/js/bootstrap.bundle.min.js'></script>
</head>
<body>
<div class="container pt-2" style="background-color:#FBFBF9;">
    <div class="row row-cols-1 row-cols-md-2 gy-3">
        <div class="col">
            <div class="card">
                <div class="row g-0">
                    <div class="col-6">
                        <img src="http://frontendfreecode.com/img/comm-2.jpg" class="img-fluid d-flex mx-auto h-100">
                    </div>
                    <div class="col-6">
                        <div class="card-body bg-light pb-0" style="display:flex;justify-content:space-between;align-items:center;flex-direction:column;">
                            <h5>Title A</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
                            <a class="btn btn-warning btn-sm w-75 w-md-50 d-block mx-auto my-1" href="http://www.frontendfreecode.com/" role="button">Click me</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col">
            <div class="card">
                <div class="row g-0">
                    <div class="col-6">
                        <img src="http://frontendfreecode.com/img/comm-1.jpg" class="img-fluid d-flex mx-auto h-100">
                    </div>
                    <div class="col-6">
                        <div class="card-body bg-light pb-0" style="display:flex;justify-content:space-between;align-items:center;flex-direction:column;">
                            <h5>Title B</h5>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
                            <a class="btn btn-warning btn-sm w-75 w-md-50 d-block mx-auto my-1" href="http://www.frontendfreecode.com/" role="button">Click me</a>
                        </div>
                    </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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS