Bootstrap Grids:

Various Bootstrap Grids Systems with Icons

Different grids can be used to set the latest information and content on the website or blog section. We have provided this code for the exact same purpose, and you can use it on your own website. The Various Bootstrap Grids Systems with Icons are presented here with functional performance. These Bootstrap Multiple Grid Systems are essential for various types of websites, and you can change their design easily. This Simple Grid Code has a white background and different icons. On the other hand, some of these grids don’t have any icons, and they are placed in a gray background.

These Bootstrap Grid with Icon have a regular order, and the writings are black. Plus, the color of the icons is blue, and each one is different. If you like to look at more options, you can easily click on the “See More Topics” option, which is in a blue field, and its writing is white. In this part, the color of the titles is blue, and details are presented in black. You can download the code belonging to these Free CSS Grids from the link below and use them functionally. These grids are so beneficial for your website.

Bootstrap Multiple Grid Systems

Bootstrap Grid with Icon

Simple Grid Code

Free CSS Grids

<!-- This script got from frontendfreecode.com -->
<div class="container two-col-example">
    <div class="row">
        <div class="col-lg-6 col-xs-12">
            <h2>Popular Topics</h2>
            <div class="card-deck mb-1 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-shield-alt fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Password Help</h4>
                        <p class="mt-3 mb-4">Reset, change, or unlock your NT/Login password.</p>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-cloud fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Cloud Conferencing Support</h4>
                        <p class="mt-3 mb-4">Setup or schedule a Webex or other video conference.</p>
                    </div>
                </div>
            </div>
            <div class="card-deck mb-1 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-laptop fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Order New Hardware</h4>
                        <p class="mt-3 mb-4">
                            Order a new laptop, phone, or other hardware.
                        </p>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-calendar-alt fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Meeting Help</h4>
                        <p class="mt-3 mb-4">Learn how to schedule a meeting or reserve a conference room.</p>
                    </div>
                </div>
            </div>
            <div class="card-deck mb-1 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-print fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Printer Help</h4>
                        <p class="mt-3 mb-4">
                            Get help accessing a network printer or request service.
                        </p>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-podcast fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Request VPN Access</h4>
                        <p class="mt-3 mb-4">Setup Comcast VPN on your company issued device.</p>
                    </div>
                </div>
            </div>
            <div class="main-button"><button type="button" class="btn btn-primary com-button">See More Topics</button></div>
        </div>
        <div class="col-lg-6 col-xs-12">
            <h2>Announcements</h2>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start list-com-announcements">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Make Your Mobile Device More Secure</h5>
                        <!--             <small>3 days ago</small> -->
                    </div>
                    <p class="mb-1">With great power (of mobile devices), there must also come great responsibility. Three things you can do now to protect yourself and Comcast.</p>
                </a>
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start list-com-announcements">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Upgrades to Web Security: BLUE COAT</h5>
                        <!--             <small class="text-muted">3 days ago</small> -->
                    </div>
                    <p class="mb-1">On Tuesday morning February 13, we will complete a network change that will redirect all web traffic...</p>
                </a>
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start list-com-announcements">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Multi-Factor Authentication (MFA) for Outlook Web Access (OWA)</h5>
                        <!--             <small class="text-muted">3 days ago</small> -->
                    </div>
                    <p class="mb-1">Multi-Factor Authentication (MFA) for Outlook Web Access (OWA), also known as “webmail,”...</p>
                </a>
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">List group item heading</h5>
                        <!--             <small class="text-muted">3 days ago</small> -->
                    </div>
                    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
            </div>
            <div class="main-button"><button type="button" class="btn btn-primary com-button">See All Announcements & Alerts</button></div>
        </div>
    </div>
</div>
<div class="container">
    <div class="card-deck mb-3 text-center">
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-shield-alt fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Password Help</h4>
                <p class="mt-3 mb-4">Reset, change, or unlock your NT/Login password.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-cloud fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Cloud Conferencing Support</h4>
                <p class="mt-3 mb-4">Setup or schedule a Webex or other video conference.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-laptop fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Order New Hardware</h4>
                <p class="mt-3 mb-4">
                    Order a new laptop, phone, or other hardware.
                </p>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="card-deck mb-3 text-center">
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-shield-alt fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Password Help</h4>
                <p class="mt-3 mb-4">Reset, change, or unlock your NT/Login password.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-cloud fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Cloud Conferencing Support</h4>
                <p class="mt-3 mb-4">Setup or schedule a Webex or other video conference.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-laptop fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Order New Hardware</h4>
                <p class="mt-3 mb-4">
                    Order a new laptop, phone, or other hardware.
                </p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-calendar-alt fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Meeting Help</h4>
                <p class="mt-3 mb-4">Learn how to schedule a meeting or reserve a conference room.</p>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    background: #f2f2f2;
    color: #303030;
    margin-top: 3em;
    font-family: "Roboto", sans-serif;
}
.two-col-example {
    margin-bottom: 10em;
}
h2 {
    margin-bottom: 1em;
    text-align: center;
    font-size: 40px;
    font-weight: 300;
}
h4 {
    font-weight: 400;
    font-size: 18px;
}
h5 {
    color: #1f6f9a;
    font-weight: 400;
}
p {
    font-weight: 300;
    font-size: 14px;
}
.com-button {
    background-color: #1f6f9a;
    font-weight: 300;
    font-size: 18px;
    padding: 0.7em 2em;
    border-radius: 100px;
}
.main-button {
    margin-top: 1em;
    text-align: center;
}
.card {
    border-radius: 3px;
    border: 1px solid #d1d1d1;
}
.card-deck .card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 6px;
    margin-bottom: 0;
    margin-left: 6px;
}
.com-icon {
    margin-bottom: 0.35em;
    color: #1f6f9a;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 1rem 0.9em;
    margin-bottom: 0.5em;
    background-color: transparent;
    /*     border: 1px solid rgba(0, 0, 0, 0.125); */
    border: none;
}
.list-group-item:first-child {
    padding-top: 0;
}
.list-group p {
    font-size: 16px;
}
.list-com-announcements {
    border-bottom: 1px solid #d1d1d1;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.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/twitter-bootstrap/4.0.0/css/bootstrap.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css">
<style>
body {
    background: #f2f2f2;
    color: #303030;
    margin-top: 3em;
    font-family: "Roboto", sans-serif;
}
.two-col-example {
    margin-bottom: 10em;
}
h2 {
    margin-bottom: 1em;
    text-align: center;
    font-size: 40px;
    font-weight: 300;
}
h4 {
    font-weight: 400;
    font-size: 18px;
}
h5 {
    color: #1f6f9a;
    font-weight: 400;
}
p {
    font-weight: 300;
    font-size: 14px;
}
.com-button {
    background-color: #1f6f9a;
    font-weight: 300;
    font-size: 18px;
    padding: 0.7em 2em;
    border-radius: 100px;
}
.main-button {
    margin-top: 1em;
    text-align: center;
}
.card {
    border-radius: 3px;
    border: 1px solid #d1d1d1;
}
.card-deck .card {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 6px;
    margin-bottom: 0;
    margin-left: 6px;
}
.com-icon {
    margin-bottom: 0.35em;
    color: #1f6f9a;
}
.list-group-item {
    position: relative;
    display: block;
    padding: 1rem 0.9em;
    margin-bottom: 0.5em;
    background-color: transparent;
    /*     border: 1px solid rgba(0, 0, 0, 0.125); */
    border: none;
}
.list-group-item:first-child {
    padding-top: 0;
}
.list-group p {
    font-size: 16px;
}
.list-com-announcements {
    border-bottom: 1px solid #d1d1d1;
}
</style>

</head>
<body>
<div class="container two-col-example">
    <div class="row">
        <div class="col-lg-6 col-xs-12">
            <h2>Popular Topics</h2>
            <div class="card-deck mb-1 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-shield-alt fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Password Help</h4>
                        <p class="mt-3 mb-4">Reset, change, or unlock your NT/Login password.</p>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-cloud fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Cloud Conferencing Support</h4>
                        <p class="mt-3 mb-4">Setup or schedule a Webex or other video conference.</p>
                    </div>
                </div>
            </div>
            <div class="card-deck mb-1 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-laptop fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Order New Hardware</h4>
                        <p class="mt-3 mb-4">
                            Order a new laptop, phone, or other hardware.
                        </p>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-calendar-alt fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Meeting Help</h4>
                        <p class="mt-3 mb-4">Learn how to schedule a meeting or reserve a conference room.</p>
                    </div>
                </div>
            </div>
            <div class="card-deck mb-1 text-center">
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-print fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Printer Help</h4>
                        <p class="mt-3 mb-4">
                            Get help accessing a network printer or request service.
                        </p>
                    </div>
                </div>
                <div class="card mb-4 box-shadow">
                    <div class="card-body">
                        <i class="fas fa-podcast fa-4x com-icon"></i>
                        <h4 class="card-title pricing-card-title">Request VPN Access</h4>
                        <p class="mt-3 mb-4">Setup Comcast VPN on your company issued device.</p>
                    </div>
                </div>
            </div>
            <div class="main-button"><button type="button" class="btn btn-primary com-button">See More Topics</button></div>
        </div>
        <div class="col-lg-6 col-xs-12">
            <h2>Announcements</h2>
            <div class="list-group">
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start list-com-announcements">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Make Your Mobile Device More Secure</h5>
                        <!--             <small>3 days ago</small> -->
                    </div>
                    <p class="mb-1">With great power (of mobile devices), there must also come great responsibility. Three things you can do now to protect yourself and Comcast.</p>
                </a>
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start list-com-announcements">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Upgrades to Web Security: BLUE COAT</h5>
                        <!--             <small class="text-muted">3 days ago</small> -->
                    </div>
                    <p class="mb-1">On Tuesday morning February 13, we will complete a network change that will redirect all web traffic...</p>
                </a>
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start list-com-announcements">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">Multi-Factor Authentication (MFA) for Outlook Web Access (OWA)</h5>
                        <!--             <small class="text-muted">3 days ago</small> -->
                    </div>
                    <p class="mb-1">Multi-Factor Authentication (MFA) for Outlook Web Access (OWA), also known as “webmail,”...</p>
                </a>
                <a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
                    <div class="d-flex w-100 justify-content-between">
                        <h5 class="mb-1">List group item heading</h5>
                        <!--             <small class="text-muted">3 days ago</small> -->
                    </div>
                    <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                </a>
            </div>
            <div class="main-button"><button type="button" class="btn btn-primary com-button">See All Announcements & Alerts</button></div>
        </div>
    </div>
</div>
<div class="container">
    <div class="card-deck mb-3 text-center">
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-shield-alt fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Password Help</h4>
                <p class="mt-3 mb-4">Reset, change, or unlock your NT/Login password.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-cloud fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Cloud Conferencing Support</h4>
                <p class="mt-3 mb-4">Setup or schedule a Webex or other video conference.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-laptop fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Order New Hardware</h4>
                <p class="mt-3 mb-4">
                    Order a new laptop, phone, or other hardware.
                </p>
            </div>
        </div>
    </div>
</div>
<div class="container">
    <div class="card-deck mb-3 text-center">
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-shield-alt fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Password Help</h4>
                <p class="mt-3 mb-4">Reset, change, or unlock your NT/Login password.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-cloud fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Cloud Conferencing Support</h4>
                <p class="mt-3 mb-4">Setup or schedule a Webex or other video conference.</p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-laptop fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Order New Hardware</h4>
                <p class="mt-3 mb-4">
                    Order a new laptop, phone, or other hardware.
                </p>
            </div>
        </div>
        <div class="card mb-4 box-shadow">
            <div class="card-body">
                <i class="fas fa-calendar-alt fa-4x com-icon"></i>
                <h4 class="card-title pricing-card-title">Meeting Help</h4>
                <p class="mt-3 mb-4">Learn how to schedule a meeting or reserve a conference room.</p>
            </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