Bootstrap Cards:

BS5 Review Cards with Bootstrap Konkon

With the help of ready-made codes, you are able to design your website in a shorter time. In this post, we have prepared a bootstrap code with a beautiful design. These BS5 Review Cards with Bootstrap Konkon are ready to use on different pages. As you know, this Bootstrap 5 Cards Code is used for the users’ opinions about your website or content. Plus, this Review Card Code can be helpful if you have an online shop because your customers can add their ideas and experience about your product to these cards.

By looking at the preview of this HTML Card using Bootstrap 5, you realize its attraction. This bootstrap has a white background and the texts are black. You can use it if you have a light-designed website. At the top of these cards, there is a colored circle that shows the user’s profile. The date of adding this opinion is placed at the bottom of the title in a small font. Each opinion is located on one card. There are some icons at the bottom of these Pure CSS Cards that show other comments on each card. Plus, the number of each card is placed on the right side of the page.

Bootstrap 5 Cards Code

Review Card Code

Pure CSS Cards

HTML Card using Bootstrap 5

<!-- This script got from frontendfreecode.com -->
<div class="container py-4">
    <div class="ex1 row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
        <div class="col">
            <div class="card h-100 card-review">
                <div class="card-header pb-0 d-flex flex-row justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img class="rounded-circle me-2"
                                src="https://via.placeholder.com/256/fe669e/fff.png" />
                        <div class="d-flex flex-column justify-content-center align-items-start fs-5 lh-sm">
                            <b class="text-primary">Title</b>
                            <small class="text-muted">14th Sept 2021</small>
                        </div>
                    </div>
                    <span class="fs-1 my-0 fw-bolder text-success">10</span>
                </div>
                <div class="card-body py-2">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="card-footer pt-0 d-flex flex-row align-items-center text-muted">
                    <span class="me-1"><i class="zmdi zmdi-comments"></i></span>
                    <small>5</small>
                </div>
                <a href="http://www.frontendfreecode.com/" class="stretched-link"></a>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 card-review">
                <div class="card-header pb-0 d-flex flex-row justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img class="rounded-circle me-2"
                                src="https://via.placeholder.com/256/9f9cfc/fff.png" />
                        <div class="d-flex flex-column justify-content-center align-items-start fs-5 lh-sm">
                            <b class="text-primary">Title</b>
                            <small class="text-muted">10th Sept 2021</small>
                        </div>
                    </div>
                    <span class="fs-1 my-0 fw-bolder text-danger">2</span>
                </div>
                <div class="card-body py-2">
                    <p class="card-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div class="card-footer pt-0 d-flex flex-row align-items-center text-muted">
                    <span class="me-1"><i class="zmdi zmdi-comments"></i></span>
                    <small>0</small>
                </div>
                <a href="http://www.frontendfreecode.com/" class="stretched-link"></a>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 card-review">
                <div class="card-header pb-0 d-flex flex-row justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img class="rounded-circle me-2"
                                src="https://via.placeholder.com/256/99ccff/fff.png" />
                        <div class="d-flex flex-column justify-content-center align-items-start fs-5 lh-sm">
                            <b class="text-primary">Title</b>
                            <small class="text-muted">13th Sept 2021</small>
                        </div>
                    </div>
                    <span class="fs-1 my-0 fw-bolder text-warning">6</span>
                </div>
                <div class="card-body py-2">
                    <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <div class="card-footer pt-0 d-flex flex-row align-items-center text-muted">
                    <span class="me-1"><i class="zmdi zmdi-comments"></i></span>
                    <small>1</small>
                </div>
                <a href="http://www.frontendfreecode.com/" class="stretched-link"></a>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.card-review img {
  width: 2.5rem;
  height: 2.5rem;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/gh/StudioKonKon/bootstrap-konkon@1.1.2-beta/dist/css/studio-konkon.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/material-design-iconic-font@2.2.0/dist/css/material-design-iconic-font.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&amp;display=swap'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/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/gh/StudioKonKon/bootstrap-konkon@1.1.2-beta/dist/css/studio-konkon.min.css'>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/material-design-iconic-font@2.2.0/dist/css/material-design-iconic-font.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&amp;display=swap'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js'></script>
<style>
.card-review img {
  width: 2.5rem;
  height: 2.5rem;
}
</style>

</head>
<body>
<div class="container py-4">
    <div class="ex1 row row-cols-1 row-cols-md-2 row-cols-xl-3 g-4 mb-4">
        <div class="col">
            <div class="card h-100 card-review">
                <div class="card-header pb-0 d-flex flex-row justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img class="rounded-circle me-2"
                                src="https://via.placeholder.com/256/fe669e/fff.png" />
                        <div class="d-flex flex-column justify-content-center align-items-start fs-5 lh-sm">
                            <b class="text-primary">Title</b>
                            <small class="text-muted">14th Sept 2021</small>
                        </div>
                    </div>
                    <span class="fs-1 my-0 fw-bolder text-success">10</span>
                </div>
                <div class="card-body py-2">
                    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                </div>
                <div class="card-footer pt-0 d-flex flex-row align-items-center text-muted">
                    <span class="me-1"><i class="zmdi zmdi-comments"></i></span>
                    <small>5</small>
                </div>
                <a href="http://www.frontendfreecode.com/" class="stretched-link"></a>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 card-review">
                <div class="card-header pb-0 d-flex flex-row justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img class="rounded-circle me-2"
                                src="https://via.placeholder.com/256/9f9cfc/fff.png" />
                        <div class="d-flex flex-column justify-content-center align-items-start fs-5 lh-sm">
                            <b class="text-primary">Title</b>
                            <small class="text-muted">10th Sept 2021</small>
                        </div>
                    </div>
                    <span class="fs-1 my-0 fw-bolder text-danger">2</span>
                </div>
                <div class="card-body py-2">
                    <p class="card-text">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                </div>
                <div class="card-footer pt-0 d-flex flex-row align-items-center text-muted">
                    <span class="me-1"><i class="zmdi zmdi-comments"></i></span>
                    <small>0</small>
                </div>
                <a href="http://www.frontendfreecode.com/" class="stretched-link"></a>
            </div>
        </div>
        <div class="col">
            <div class="card h-100 card-review">
                <div class="card-header pb-0 d-flex flex-row justify-content-between align-items-center">
                    <div class="d-flex align-items-center">
                        <img class="rounded-circle me-2"
                                src="https://via.placeholder.com/256/99ccff/fff.png" />
                        <div class="d-flex flex-column justify-content-center align-items-start fs-5 lh-sm">
                            <b class="text-primary">Title</b>
                            <small class="text-muted">13th Sept 2021</small>
                        </div>
                    </div>
                    <span class="fs-1 my-0 fw-bolder text-warning">6</span>
                </div>
                <div class="card-body py-2">
                    <p class="card-text">Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                </div>
                <div class="card-footer pt-0 d-flex flex-row align-items-center text-muted">
                    <span class="me-1"><i class="zmdi zmdi-comments"></i></span>
                    <small>1</small>
                </div>
                <a href="http://www.frontendfreecode.com/" class="stretched-link"></a>
            </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