Bootstrap Popups:

Bootstrap Alerts Primary Style

Have you seen some alerts on websites that have been shown to you? This post has the same function and you can send some messages to the users of your website. In this post, you can see the Bootstrap Alerts Primary Style with an attractive design. If you use this Bootstrap Alert Code on your website, you can send different messages to your visitors. Using this Alert Primary Code is so easy and you have no other jobs to do. So, look at the following preview of this CSS Alert Code and increase the beauty of your page.

As you see down below, this Simple Alert Style includes three colors in blue, white and dark. So, you can use them if you have any kind of website. The texts inside the blue and the white boxes are black and the writing in the dark box are white. You can see a warning icon next to each one that shows the alert. At the bottom of each text in this Bootstrap Primary Alert Example, you can see a blue button with white writing. As you put the mouse on this button, its color turns darker. After clicking on this field, a bigger and darker border appears around the “Confirm” button.

Bootstrap Alert Code

Alert Primary Code

CSS Alert Code

Simple Alert Style

Bootstrap Primary Alert Example

<!-- This script got from frontendfreecode.com -->
<div class="container-fluid mt-4 bg-light min-vh-100">
    <div class="row">
        <!-- Default Style -->
        <div class="col-4">
            <h4 class="mb-4">Default Style</h4>
            <!-- START Alert Primary -->
            <div class="alert alert-primary d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-info-circle text-primary me-3 align-self-center"></i>
                <div class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                <button type="button" class="btn-close btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-info-circle text-primary me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary d-flex p-4 rounded-3" role="alert">
                <span class="fa-stack me-3" style="vertical-align: top;">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-info fa-stack-1x"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
        </div>
        <!-- Light Style -->
        <div class="col-4">
            <h4 class="mb-4">Light Style</h4>
            <!-- START Alert Primary -->
            <div class="alert alert-primary-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3 align-self-center"></i>
                <div class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                <button type="button" class="btn-close btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <span class="fa-stack me-3" style="vertical-align: top;">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-info fa-stack-1x"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
        </div>
        <!-- Dark Style -->
        <div class="col-4">
            <h4 class="mb-4">Dark Style</h4>
            <!-- START Alert Primary -->
            <div class="alert alert-primary-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3 align-self-center"></i>
                <div class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
                <button type="button" class="btn-close btn-close-white btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <span class="fa-stack me-3" style="vertical-align: top;">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-info fa-stack-1x"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

.alert-primary {
	background-color: #CFE3FE;
	color: #212529;
	border: 0;
	overflow:auto!important;
}
.alert-primary .fa-stack-2x {
	color: #9EC7FC;
}
.alert-primary .fa-stack-1x {
	color: #015DC8;
}
.alert-primary .btn-link {
	color: #212529;
	text-decoration: none;
}
.alert-primary-light {
	background-color: #fff;
	border-left-width: 3px;
	border-left-color: #0d6efd;
	border-bottom: 1px solid #dee2e6;
	border-right: 1px solid #dee2e6;
	border-top: 1px solid #dee2e6;
	overflow:auto!important;
}
.alert-primary-light .fa-stack-2x {
	color: #CFE3FE;
}
.alert-primary-light .fa-stack-1x {
	color: #015DC8;
}
.alert-primary-light .btn-link {
	color: #212529;
	text-decoration: none;
}
.alert-primary-light>div>div {
	color: #6c757d;
}
.alert-primary-dark {
	background-color: #343a40;
	border-left-width: 3px;
	border-left-color: #0d6efd;
	color: #fff;
	overflow:auto!important;
}
.alert-primary-dark .fa-stack-2x {
	color: #0d6efd;
}
.alert-primary-dark .fa-stack-1x {
	color: #fff;
}
.fa-stack-2x {
    font-size: 1em!important;
}
.fa-stack-1x{
    font-size: 10px!important;
    margin-left:6px;
}
.fa-stack{
    line-height: 1em!important;
}
.alert-primary-dark .btn-link {
	color: #fff;
	text-decoration: none;
}
.alert-primary-dark>div>div {
	color: #6c757d;
}
.alert-success {
	background-color: #D1E7DD;
	color: #212529;
	border: 0;
}
.alert-success .fa-stack-2x {
	color: #A4CFBB;
}
.alert-success .fa-stack-1x {
	color: #1A6B44;
}
.alert-success .btn-link {
	color: #212529;
	text-decoration: none;
}

<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/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@5.0.2/dist/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'>
<script src='https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'></script>
<style>
.alert-primary {
	background-color: #CFE3FE;
	color: #212529;
	border: 0;
	overflow:auto!important;
}
.alert-primary .fa-stack-2x {
	color: #9EC7FC;
}
.alert-primary .fa-stack-1x {
	color: #015DC8;
}
.alert-primary .btn-link {
	color: #212529;
	text-decoration: none;
}
.alert-primary-light {
	background-color: #fff;
	border-left-width: 3px;
	border-left-color: #0d6efd;
	border-bottom: 1px solid #dee2e6;
	border-right: 1px solid #dee2e6;
	border-top: 1px solid #dee2e6;
	overflow:auto!important;
}
.alert-primary-light .fa-stack-2x {
	color: #CFE3FE;
}
.alert-primary-light .fa-stack-1x {
	color: #015DC8;
}
.alert-primary-light .btn-link {
	color: #212529;
	text-decoration: none;
}
.alert-primary-light>div>div {
	color: #6c757d;
}
.alert-primary-dark {
	background-color: #343a40;
	border-left-width: 3px;
	border-left-color: #0d6efd;
	color: #fff;
	overflow:auto!important;
}
.alert-primary-dark .fa-stack-2x {
	color: #0d6efd;
}
.alert-primary-dark .fa-stack-1x {
	color: #fff;
}
.fa-stack-2x {
    font-size: 1em!important;
}
.fa-stack-1x{
    font-size: 10px!important;
    margin-left:6px;
}
.fa-stack{
    line-height: 1em!important;
}
.alert-primary-dark .btn-link {
	color: #fff;
	text-decoration: none;
}
.alert-primary-dark>div>div {
	color: #6c757d;
}
.alert-success {
	background-color: #D1E7DD;
	color: #212529;
	border: 0;
}
.alert-success .fa-stack-2x {
	color: #A4CFBB;
}
.alert-success .fa-stack-1x {
	color: #1A6B44;
}
.alert-success .btn-link {
	color: #212529;
	text-decoration: none;
}
</style>

</head>
<body>
<div class="container-fluid mt-4 bg-light min-vh-100">
    <div class="row">
        <!-- Default Style -->
        <div class="col-4">
            <h4 class="mb-4">Default Style</h4>
            <!-- START Alert Primary -->
            <div class="alert alert-primary d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-info-circle text-primary me-3 align-self-center"></i>
                <div class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                <button type="button" class="btn-close btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-info-circle text-primary me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary d-flex p-4 rounded-3" role="alert">
                <span class="fa-stack me-3" style="vertical-align: top;">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-info fa-stack-1x"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
        </div>
        <!-- Light Style -->
        <div class="col-4">
            <h4 class="mb-4">Light Style</h4>
            <!-- START Alert Primary -->
            <div class="alert alert-primary-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3 align-self-center"></i>
                <div class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                <button type="button" class="btn-close btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <span class="fa-stack me-3" style="vertical-align: top;">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-info fa-stack-1x"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
        </div>
        <!-- Dark Style -->
        <div class="col-4">
            <h4 class="mb-4">Dark Style</h4>
            <!-- START Alert Primary -->
            <div class="alert alert-primary-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3 align-self-center"></i>
                <div class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing</div>
                <button type="button" class="btn-close btn-close-white btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-primary me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
            <!-- START Alert Primary -->
            <div class="alert alert-primary-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <span class="fa-stack me-3" style="vertical-align: top;">
                    <i class="fas fa-circle fa-stack-2x"></i>
                    <i class="fas fa-info fa-stack-1x"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Primary</h6>
                    <div class="mb-3">Lorem ipsum dolor sit amet, consectetur adipiscing </div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-primary px-3">Confirm</button>
                        <button type="button" class="btn btn-link px-3">Cancel</button>
                    </div>
                </div>
                <button type="button" class="btn-close btn-close-white btn-sm" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Primary -->
        </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

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars