Coupon Alert Boxes

This bootstrap snippet called "Coupon Alert Boxes" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: coupon,boxes

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container bootstrap snippet">
  <div class="row">
    <div class="col-md-5">
      <div class="alert alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div>  
      <div class="alert alert-info alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div>    
      <div class="alert alert-success alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div>    
      <div class="alert alert-warning alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div>
          
      <div class="alert alert-danger alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div> 
    </div>
    
    <div class="col-md-5">
      <div class="alert alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div>  
      <div class="alert alert-info alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div>    
      <div class="alert alert-success alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div>    
      <div class="alert alert-warning alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div> 
      <div class="alert alert-danger alert-coupon">
        <h4>Special Offer from JES and Ice-O-Matic</h4>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos a similique dicta modi minus nostrum magnam provident reprehenderit in quae.</p>
      </div> 
    </div>
  </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}	
body {
  padding: 50px;
}

.alert-coupon {
  border: 1px dashed;
  
  h1, h2, h3, h4, h5, h6 {
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
  }
  
  p:last-child {
    margin-bottom: 0;
  }
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.1.0

Created: May 4th 2014, 17:35

Views: 3.2K

Rated 5/5 based on 2 reviews