Bootstrap Popups:

Bootstrap Alerts Success Style

If you have a new website and want to improve in a shorter time, this code can help you. So, pay attention to this post and apply it to your website to gain many visitors. This post contains the Bootstrap Alerts Success Style with a beautiful design. This Bootstrap Alert Code allows you to send warning messages to the users easily. In addition to the warnings, you can show the successful ones with the help of this amazing Alert Success Code. In this post, we have provided a preview for this CSS Alert Code with a beautiful theme.

As the following preview represents, this code has a simple design and you can use it if you have a website with a pure theme. In this Simple Alert Style, you can see the default style with a light blue color, the light style with a white color, and the dark style with a black color. You can see the green color in all styles. There is a green line on the left side of the light style. There are some buttons at the end of each box with a green background and white text. If you click on this button of the Bootstrap Success Alert Example, you can see a darker border around it.

Bootstrap Alert Code

Alert Success Code

CSS Alert Code

Simple Alert Style

Bootstrap Success 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-success d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-check-circle text-success me-3 align-self-center"></i>
                <div class="mb-0">You successfully read this important alert message.</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-success d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-check-circle text-success me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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-success 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-check fa-stack-1x" style="margin-left:4px;"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
            <div class="alert alert-success-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-check-circle text-success me-3 align-self-center"></i>
                <div class="mb-0">You successfully read this important alert message.</div>
                <button type="button" class="btn-close btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-success me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-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-check fa-stack-1x" style="margin-left:4px;"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
        </div>
        <!-- Dark Style -->
        <div class="col-4">
            <h4 class="mb-4">Dark Style</h4>
            <!-- START Alert Success -->
            <div class="alert alert-success-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-success me-3 align-self-center"></i>
                <div class="mb-0">You successfully read this important alert message.</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 Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-check-circle text-success me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-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" style="margin-left:6px;"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

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

<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-success {
	background-color: #D1E7DD;
	color: #212529;
	border: 0;
	overflow:auto!important;
}
.alert-success .fa-stack-2x {
	color: #A4CFBB;
}
.alert-success .fa-stack-1x {
	color: #1A6B44;
}
.alert-success .btn-link {
	color: #212529;
	text-decoration: none;
	
}
.alert-success-light {
	background-color: #fff;
	border-left-width: 3px;
	border-left-color: #198754;
	border-bottom: 1px solid #dee2e6;
	border-right: 1px solid #dee2e6;
	border-top: 1px solid #dee2e6;
	overflow:auto!important;
}
.alert-success-light .fa-stack-2x {
	color: #D1E7DD;
}
.alert-success-light .fa-stack-1x {
	color: #1A6B44;
}
.fa-stack-2x {
    font-size: 1em!important;
}
.fa-stack-1x{
    font-size: 10px!important;
}
.fa-stack{
    line-height: 1em!important;
}
.alert-success-light .btn-link {
	color: #212529;
	text-decoration: none;
}
.alert-success-light>div>div {
	color: #6c757d;
}
.alert-success-dark {
	background-color: #343a40;
	border-left-width: 3px;
	border-left-color: #198754;
	color: #fff;
	overflow:auto!important;
}
.alert-success-dark .fa-stack-2x {
	color: #198754;
}
.alert-success-dark .fa-stack-1x {
	color: #fff;
}
.alert-success-dark .btn-link {
	color: #fff;
	text-decoration: none;
}
.alert-success-dark>div>div {
	color: #6c757d;
}
</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-success d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-check-circle text-success me-3 align-self-center"></i>
                <div class="mb-0">You successfully read this important alert message.</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-success d-flex p-4 rounded-3" role="alert">
                <i class="fa fa-check-circle text-success me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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-success 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-check fa-stack-1x" style="margin-left:4px;"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
            <div class="alert alert-success-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-check-circle text-success me-3 align-self-center"></i>
                <div class="mb-0">You successfully read this important alert message.</div>
                <button type="button" class="btn-close btn-sm ms-auto" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
            <!-- END Alert Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-light d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-success me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-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-check fa-stack-1x" style="margin-left:4px;"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
        </div>
        <!-- Dark Style -->
        <div class="col-4">
            <h4 class="mb-4">Dark Style</h4>
            <!-- START Alert Success -->
            <div class="alert alert-success-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-info-circle text-success me-3 align-self-center"></i>
                <div class="mb-0">You successfully read this important alert message.</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 Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-dark d-flex p-4 rounded-3 shadow-sm" role="alert">
                <i class="fa fa-check-circle text-success me-3" style="vertical-align: top;"></i>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
            <!-- START Alert Success -->
            <div class="alert alert-success-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" style="margin-left:6px;"></i>
                </span>
                <div class="flex-grow-1">
                    <h6 class="mb-1">Alert Success</h6>
                    <div class="mb-3">You successfully read this important alert message.</div>
                    <div class="d-flex align-items-start">
                        <button type="button" class="btn btn-success 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 Success -->
        </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