Stylish Bootstrap 3 CSS alert message box for your website

Stylish Bootstrap 3 CSS alert message box for your website

 Do you want to have a super Stylish Bootstrap 3 CSS alert message box for your website? This article will guide you. Alert message boxes that are eye-catchy can help you easily highlight important key point in every article you write. This should be helpful to your visitors and help increase website engagement.

Check below for some of the best CSS Bootstap3 alert message boxes we've picked just for you to use and give your Blogger or any other website type a stunning look.

Stylish Bootstrap 3 CSS alert message box example code

Stylish Bootstrap 3 CSS alert message box example code

Check below the different parts of the code that you will need to get the above results.

CSS part


@charset "UTF-8";
/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/
/*==========  Mobile First Method  ==========*/
/* Custom, iPhone Retina */
/* Extra Small Devices, Phones */
/* Small Devices, Tablets */
/* Medium Devices, Desktops */
/* Large Devices, Wide Screens */
/*==========  Non-Mobile First Method  ==========*/
/* Large Devices, Wide Screens */
/* Medium Devices, Desktops */
/* Small Devices, Tablets */
/* Extra Small Devices, Phones */
/* Custom, iPhone Retina */
/*=====================================================
=            Bootstrap 2.3.2 Media Queries            =
=====================================================*/
/* default styles here for older browsers. 
   I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width: 960px) {
  /* styles for browsers larger than 960px; */
}
@media only screen and (min-width: 1440px) {
  /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width: 2000px) {
  /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width: 480px) {
  /* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width: 768px) {
  /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  /* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  /* For landscape layouts only */
}
/*******Nuevos mensajes de error******/
.new-message-box {
  margin: 15px 0;
  padding-left: 20px;
  margin-bottom: 25px !important;
}

.new-message-box p {
  font-size: 1.15em;
  font-weight: 600;
}

.info-tab {
  width: 40px;
  height: 40px;
  display: inline-block;
  position: relative;
  top: 8px;
}

.info-tab {
  float: left;
  margin-left: -23px;
}

.info-tab i::before {
  width: 24px;
  height: 24px;
  box-shadow: inset 12px 0 13px rgba(0, 0, 0, 0.5);
}

.info-tab i::after {
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-bottom-color: #fff;
  border-left-color: #fff;
  bottom: -18px;
}

.info-tab i::before, .info-tab i::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 0;
  bottom: -17px;
  transform: rotateX(60deg);
}

.note-box, .warning-box, .tip-box-success, .tip-box-danger, .tip-box-warning, .tip-box-info, .tip-box-alert {
  padding: 12px 8px 3px 26px;
}

/***Success****/
.new-message-box-success {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-icon-success {
  background: #8BC34A;
}

.tip-box-success {
  color: #33691E;
  background: #DCEDC8;
}

.tip-icon-success::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-success i::before {
  background: #8BC34A;
}

/*******Danger*******/
.new-message-box-danger {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-icon-danger {
  background: #f44336;
}

.tip-box-danger {
  color: #b71c1c;
  background: #FFCCBC;
}

.tip-icon-danger::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-danger i::before {
  background: #f44336;
}

/*******warning*******/
.new-message-box-warning {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-icon-warning {
  background: #FFEB3B;
}

.tip-box-warning {
  color: #212121;
  background: #FFF9C4;
}

.tip-icon-warning::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: #212121;
}

.tip-icon-warning i::before {
  background: #FFEB3B;
}

/*******info*******/
.new-message-box-info {
  background: #eeeeee;
  padding: 3px;
  margin: 10px 0;
}

.tip-box-info {
  color: #01579B;
  background: #B3E5FC;
}

.tip-icon-info {
  background: #03A9F4;
}

.tip-icon-info::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-info i::before {
  background: #03A9F4;
}

/*******info*******/
.new-message-box-alert {
  background: #FF6F00;
  padding: 3px;
  margin: 10px 0;
}

.tip-box-alert {
  color: #212121;
  background: #FFF8E1;
}

.tip-icon-alert {
  background: #FF6F00;
}

.tip-icon-alert::before {
  font-size: 25px;
  content: "";
  top: 8px;
  left: 11px;
  font-family: FontAwesome;
  position: absolute;
  color: white;
}

.tip-icon-alert i::before {
  background: #FF6F00;
}

/*************************/
body {
  background-color: #ffffff;
}

Make sure to wrap the CSS in  Style tag if your are having an HTML website template (especially for Blogspot users).

The HTML

 

<div class="container-fluid text-center">
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <div class="new-message-box">
                    <div class="new-message-box-alert">
                        <div class="info-tab tip-icon-alert" title="error"><i></i></div>
                        <div class="tip-box-alert">
                            <p>Ha ocurrido un problema por favor 
                            </p>
                        </div>
                    </div>
                </div>
</div>
</div>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <div class="new-message-box">
                    <div class="new-message-box-danger">
                        <div class="info-tab tip-icon-danger" title="error"><i></i></div>
                        <div class="tip-box-danger">
                            <p>Ha ocurrido un problema por favor 
                            </p>
                        </div>
                    </div>
                </div>
</div>
</div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <div class="new-message-box">
                    <div class="new-message-box-success">
                        <div class="info-tab tip-icon-success" title="success"><i></i></div>
                        <div class="tip-box-success">
                            <p>Ha ocurrido un problema por favor 
                            </p>
                        </div>
                    </div>
                </div>
</div>
</div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <div class="new-message-box">
                    <div class="new-message-box-warning">
                        <div class="info-tab tip-icon-warning" title="error"><i></i></div>
                        <div class="tip-box-warning">
                            <p>Ha ocurrido un problema por favor 
                            </p>
                        </div>
                    </div>
                </div>
</div>
</div>
   <div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <div class="new-message-box">
                    <div class="new-message-box-info">
                        <div class="info-tab tip-icon-info" title="error"><i></i></div>
                        <div class="tip-box-info">

                            <p>Ha ocurrido un problema por favor </p>
                        </div>
                    </div>
                </div>
</div>
</div>
   
</div>

Note that you are to use only one of the <div class="row">  ... </div> section depending on the type of message your want to emphasise on.

That is, for a single sucess message alert box for example, your HTML code will be:

<div class="container-fluid text-center">
<div class="row">
   <div class="col-xs-12 col-sm-6 col-sm-offset-3">
      <div class="new-message-box">
         <div class="new-message-box-success">
            <div class="info-tab tip-icon-success" title="success"><i></i></div>
            <div class="tip-box-success">
               <p>Ha ocurrido un problema por favor 
               </p>
            </div>
         </div>
      </div>
   </div>
</div>

Important

Besides the HTML and CSS codes, you will need to include the custom Bootstrap CSS and Bootstrap font awesome script link to your webpage or template head section.


<!-- Bootstrap core CSS -->
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" rel="stylesheet"/>
  <!-- Custom Font awesome -->
  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"/>

You can see the codes in action from the link below. You are free to customiz and use.
Try it