<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="navbar navbar-default"> <div class="container"> <div class="navbar-header"><a class="navbar-brand" href="#">Brand</a> </div> <ul class="nav navbar-nav"> <li class="active"><a href="#" class="">Home</a> </li> <li><a href="#" class="">Link</a> </li> <li><a href="#" class="">More</a> </li> <li><a href="#" class="">Options</a> </li> </ul> </div> </div> <section> <div class="container"> <div class="row"> <!-- Carousel --> <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> <li data-target="#carousel-example-generic" data-slide-to="1"></li> <li data-target="#carousel-example-generic" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="First slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to <strong>LOREM IPSUM</strong></span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Second slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to LOREM IPSUM</span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> <div class="item"> <img src="http://unsplash.s3.amazonaws.com/batch%209/barcelona-boardwalk.jpg" alt="Third slide"> <!-- Static Header --> <div class="header-text hidden-xs"> <div class="col-md-12 text-center"> <h2> <span>Welcome to LOREM IPSUM</span> </h2> <br> <h3> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span> </h3> <br> <div class=""> <a class="btn btn-theme btn-sm btn-min-block" href="#">Login</a><a class="btn btn-theme btn-sm btn-min-block" href="#">Register</a></div> </div> </div><!-- /header-text --> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#carousel-example-generic" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> </a> </div><!-- /carousel --> </div> </div> </section> <section> <div class="container"> <div class="row"> <div class="col-md-3"> <div class="col-md-12"> <h4> FENCING</h4> <hr/> </div> <div class="col-md-12"> <h4> AG SUPPLIES</h4> <hr/> </div> <div class="col-md-12"> <h4> EQUINE</h4> <hr/> </div> <div class="col-md-12"> <h4> IRRIGATION</h4> <hr/> </div> </div> <div class="col-md-9"> <!-- BEGIN PRODUCTS --> <div class="col-md-4 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <button class="btn btn-success right" > BUY ITEM</button> </div> </div> </span> </div> <div class="col-md-4 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <button class="btn btn-success right" > BUY ITEM</button> </div> </div> </span> </div> <div class="col-md-4 col-sm-6"> <span class="thumbnail"> <img src="http://placehold.it/500x400" alt="..."> <h4>Product Tittle</h4> <div class="ratings"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star-empty"></span> </div> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p> <hr class="line"> <div class="row"> <div class="col-md-6 col-sm-6"> <p class="price">$29,90</p> </div> <div class="col-md-6 col-sm-6"> <button class="btn btn-success right" > BUY ITEM</button> </div> </div> </span> </div> <!-- END PRODUCTS --> </div> </div> </div> </section>

.container { margin-top: 20px; } /* Carousel Styles */ .carousel-indicators .active { background-color: #2980b9; } .carousel-inner img { width: 100%; max-height: 460px } .carousel-control { width: 0; } .carousel-control.left, .carousel-control.right { opacity: 1; filter: alpha(opacity=100); background-image: none; background-repeat: no-repeat; text-shadow: none; } .carousel-control .glyphicon-chevron-left, .carousel-control .glyphicon-chevron-right, .carousel-control .icon-prev, .carousel-control .icon-next { position: absolute; top: 45%; z-index: 5; display: inline-block; } .carousel-control .glyphicon-chevron-left, .carousel-control .icon-prev { left: 0; } .carousel-control .glyphicon-chevron-right, .carousel-control .icon-next { right: 0; } .carousel-control.left span, .carousel-control.right span { background-color: #000; } .carousel-control.left span:hover, .carousel-control.right span:hover { opacity: .7; filter: alpha(opacity=70); } /* Carousel Header Styles */ .header-text { position: absolute; top: 20%; left: 1.8%; right: auto; width: 96.66666666666666%; color: #fff; } .header-text h2 { font-size: 40px; } .header-text h2 span { background-color: #2980b9; padding: 10px; } .header-text h3 span { background-color: #000; padding: 15px; } .btn-min-block { min-width: 170px; line-height: 26px; } .btn-theme { color: #fff; background-color: transparent; border: 2px solid #fff; margin-right: 15px; } .btn-theme:hover { color: #000; background-color: #fff; border-color: #fff; }