Bootstrap Snippets Semi Transparent Highlight Box Example Demo

Please log in or register to like posts.
News

Bootstrap Snippets Semi Transparent Highlight Box Example Demo

Hi Guys, Today I’m Going to show you how to make bootstrap semi transparent highlight box. bootstrap highlight box help you to make more example such as bootstrap posts listing and buy sell example. this bootstrap highlight box will make you easy to save your time.

Highlight Box

Let’s starting the bootstrap highlight box designing using html and css. for making bootstrap highlight box, at first make two files, 1. index.html and 2. style.css then open index.html file and copy past the below code.

<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>

And Then open style.css file and copy past the below code.

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

Now You are ready to lunch the bootstrap highlight box demo by opening the index.html file from your computer web browser such as Mozila Firefox. if you want, just Visit Live Demo Page Example. The Bootstrap Snippets Make Highlight Box For Your eCommerce Website. Highlight Box May Help Your Website Making an Example using Bootstrap.

Related Bootstrap Snippets

Bootstrap Example eCommerce Product Detail – Bootstrap Snippets

Bootstrap Navbar Example Like Flipkart – Bootstrap Nav Bar Design

Bootstrap Registration Page Design Example Demo and Tutorial

 

Nobody liked ?

Leave a Reply

Your email address will not be published. Required fields are marked *