"Semi Transparent Highlight Box"
Bootstrap 3.3.0 Snippet by bindassanant

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class ="main-container"> <div class=" highlight" style="margin-left:0;"> <h2>Super Product Highlight</h2> <div class="row"> <img src ="http://davidnaylor.org/temp/thunderbird-logo-200x200.png" /> <ul> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> <li>Integer et malesuada turpis. Proin urna felis.</li> </ul> </div> <div class="row"> <p>Morbi laoreet ipsum sem, eu condimentum ante efficitur vel. Donec at nibh risus. Nam mollis nulla eget scelerisque facilisis. Suspendisse sit amet condimentum dolor. Vestibulum euismod congue mi pulvinar dignissim. </p> <button class = "btn btn-primary">Buy Now</button> <button class = "btn btn-warning" >Read More</button> </div> </div> </div> </div> </div>
.main-container{ background: #d53369; /* fallback for old browsers */ background: -webkit-linear-gradient(to left, #d53369 , #cbad6d); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to left, #d53369 , #cbad6d); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } .highlight { width: 600px; color: white; background: rgba(0, 0, 0, 0.26); border-radius: 10px; padding: 3%; } .highlight img { float: left; width: 100px; height: 100px; margin: 10px; } .highlight ul { list-style-image: url('http://icons.iconarchive.com/icons/yusuke-kamiyamane/fugue/16/tick-small-icon.png'); margin-left: 1%; float: left; clear: right } .highlight button { margin-left: 1%; float: right; } .highlight h1,h2,h3,h4,h5,h6 { padding-bottom: 2%; border-bottom: 2px dashed rgba(255, 255, 255, 0.41); font-size:20px; text-align : center; text-transform: uppercase; } .highlight p { text-align: justify; }

Related: See More


Questions / Comments:

See here some awesome bootstrap design in my website i am using in it anyone can take example with my website for them....
here is the ref link... and thanks to bootsnipp where i found most beautiful design
http://kalarikendramdelhi.com/

Web Enlance () - 7 years ago - Reply 0