Bootstrap snippet: Coupon Alert Boxes

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: coupon,boxes



<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>
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; } }
Dey-Dey

Coupon Alert Boxes

Dey-Dey
  May 4th 2014, 17:35
2.3K Views