Bootstrap snippet and html example. BusinessThemeBootstrapDesign

This html snippet was created to help web designers, web developers, front-end and back-end developer save time. Use it for free in your project and build your app faster, You can also download the HTML, CSS, and JS code.

HTML code

This is the html code used to create this bootstrap snippet, You can copy and paste the following html code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>business.com</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
        <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css">
    <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script>  
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  <link href="style.css" rel="stylesheet" type="text/css">
  </head>
  <body>
 
 <nav class="top">
<div class="container">

     <div class="navbar-header">
          <button class="navbar-toggle" data-target="#myNav" data-toggle="collapse">
          <span class="fa fa-align-justify" style="color:#FFF"></span>
          </button>
           <a href="" class="navbar navbar-brand"><img src="http://www.netservicesindia.com/images/Logo/Logo-Designing-India-Golbal.jpg" style="width: 169px;margin-top: -16px;" class="img-responsive"></a>
     </div>
     <div class="collapse navbar-collapse" id="myNav">
        <ul class="nav navbar-nav">
           <li><a href="http://deepak646.blogspot.in" target="_blank">HOME</a></li>
           <li><a href="http://deepak646.blogspot.in" target="_blank">ABOUT US</a></li>
           <li><a href="http://deepak646.blogspot.in" target="_blank">SERVICES</a></li>      
           <li><a href="http://deepak646.blogspot.in" target="_blank">WORK</a></li>
           <li><a href="http://deepak646.blogspot.in" target="_blank">BLOG</a></li>
           <li><a href="http://deepak646.blogspot.in" target="_blank">CONTACT</a></li>
         </ul>
        
     
       <ul class="nav navbar-nav navbar-right">
       <li><a href=""><span class="fa fa-linkedin animated wow fadeInRight"></span></a></li>
       <li><a href=""><span class="fa fa-twitter animated wow fadeInRight" data-wow-delay=".2s"></span></a></li>
       <li><a href=""><span class="fa fa-facebook animated wow fadeInRight" data-wow-delay=".4s"></span></a></li>
        <li><a href=""><span class="fa fa-google-plus animated wow fadeInRight" data-wow-delay=".6s"></span></a></li>
       </ul>
 
    </div>
   </div>
</nav>
 <!-----------------nav-------------------->
  
  
 <!------------------banner------------------->
 
<div class="container-fluid ">
 <div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
  <div class="carousel-inner banner" role="listbox">
    <div class="item active">
    <div class="col-sm-6 col-sm-offset-1 slide">
      <h1>CLEAN AND RESPONSIVE DESIGN......!</h1>
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
      <p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
      <button class="btn btn-primary">READ MORE</button>
      <div class="clearfix"></div>
    </div>
</div>
    <div class="item">
           <div class="col-sm-6 col-sm-offset-1 slide">
      <h1>POPULAR AND RESPONSIVE DESIGN......!</h1>
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
      <p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
    <button class="btn btn-primary">READ MORE</button>
      <div class="clearfix"></div>
    </div>
    </div>

    <div class="item">
         <div class="col-sm-6 col-sm-offset-1 slide">
      <h1>COLL AND RESPONSIVE DESIGN......!</h1>
     <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
      <p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
    <button class="btn btn-primary">READ MORE</button>
      <div class="clearfix"></div>
    </div>
    </div>

    <div class="item">
           <div class="col-sm-6 col-sm-offset-1 slide">
      <h1>FLAXIBLE AND RESPONSIVE DESIGN......!</h1>
      <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris et hendrerit ligula, vel dictum massa. Suspendisse potenti.</h2>
      <p> Donec posuere velit id diam aliquam, at imperdiet velit malesuada. Vestibulum vitae vehicula tellus. Nam quis orci tristique, molestie turpis vel, commodo neque. </p>
    <button class="btn btn-primary">READ MORE</button>
      <div class="clearfix"></div>
    </div>
    </div>
  </div>

  <div class="control-box">                            
            <a data-slide="prev" href="#myCarousel" class="carousel-control left"><span class="fa fa-angle-double-left"></span></a>
            <a data-slide="next" href="#myCarousel" class="carousel-control right">  <span class="fa fa-angle-double-right"></span></a>
        </div><!-- /.control-box -->   
</div>


</div><!------banner---->



<div class="container-fluid slider">
<div class="container">
<div class="col-sm-8 animated wow fadeInLeft" data-wow-delay=".3s">
<h1>Purchase a very clean,Responsive and Multi Purpose Design....!</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur lorem in sem ullamcorper..........</p>
</div>


<div class="col-sm-4 animated wow fadeInRight" data-wow-delay=".8s"><button class="btn btn-primary">Purchase Now</button></div>
</div>
</div><!------slider----->



<div class="container-fluid">
<div class="container">
<div class="col-sm-6 about-left animated wow zoomIn" data-wow-delay=".2s">
<h1>Welcome to Our Site</h1>
<hr>
<img src="http://www.kirkepaynesolicitors.com.au/wp-content/uploads/sites/1155/2016/03/gold-coast-business-purchase-lawyer.jpg" class="img-responsive">
<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus tellus, non facilisis justo. Ut neque erat, ullamcorper et massa vel, semper congue nisl. Ut et ante eleifend, tempor turpis in, eleifend nibh. Maecenas facilisis turpis ipsum, nec consequat justo porta eu. Nam fringilla ante pretium lobortis consectetur.</p>
<button class="btn btn-primary pull-right">READ MORE</button>
<div class="clearfix"></div>
</div><!------left---->


<div class="col-sm-6 about-right animated wow zoomIn" data-wow-delay=".6s">
<h1>Recent Blogs</h1>
<hr>
<div id="myCarousel1" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
    <div class="col-sm-12">
    <p>Lorem ipsum</p>
    
   <img src="http://alkof.com/wp-content/uploads/2015/05/How-To-Promote-A-Small-Business-For-Free-e1431334991453.jpg"  class="img-responsive">
   
    <h2><span class="fa fa-calendar"></span>  25-8-2015  <span class="fa fa-comment"></span> No Comment</h2>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus    tellus, non facilisis justo.<a href="">READ MORE</a></p>

     </div>
     
    </div>
    <div class="item">
           
           <div class="col-sm-12">
    <p>Lorem ipsum</p>
    
   <img src="http://www.dezineguide.com/wp-content/uploads/2011/05/Download-Free-Business-Card.jpg"  class="img-responsive">
   
    <h2><span class="fa fa-calendar"></span>  25-8-2015  <span class="fa fa-comment"></span> No Comment</h2>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus    tellus, non facilisis justo.<a href="">READ MORE</a></p>
  
     </div>
           
    </div>

    <div class="item">
         
         <div class="col-sm-12">
    <p>Lorem ipsum</p>
    
   <img src="https://www.outvise.com/wp-content/uploads/2014/12/business-8-dic14-600x250.jpg"  class="img-responsive">
   
    <h2><span class="fa fa-calendar"></span>  25-8-2015  <span class="fa fa-comment"></span> No Comment</h2>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus    tellus, non facilisis justo.<a href="">READ MORE</a></p>
  
     </div>
         
    </div>

    <div class="item">
           
           <div class="col-sm-12">
    <p>Lorem ipsum</p>
    
   <img src="https://www.smallfish.com.au/wp-content/uploads/2015/09/trades-business-marketing-part-1.jpg"  class="img-responsive">
   
    <h2><span class="fa fa-calendar"></span>  25-8-2015  <span class="fa fa-comment"></span> No Comment</h2>
    <p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque fermentum mi malesuada eleifend cursus. Suspendisse sit amet dapibus    tellus, non facilisis justo.<a href="">READ MORE</a></p>
  
     </div>
           
    </div>
  </div>

  <div class="control-box1">                            
            <a data-slide="prev" href="#myCarousel1" class="carousel-control left"><span class="fa fa-angle-double-left"></span></a>
            <a data-slide="next" href="#myCarousel1" class="carousel-control right">  <span class="fa fa-angle-double-right"></span></a>
        </div><!-- /.control-box -->   
</div>
<hr>
</div><!----right--->

</div>
</div><!--------about-------->




<div class="container-fluid testimonials animated wow zoomIn" data-wow-delay=".4s">
<div class="container">
<h1>Testimonials</h1>
<hr>

<div id="myCarousel2" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#myCarousel2" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel2" data-slide-to="1"></li>
    <li data-target="#myCarousel2" data-slide-to="2"></li>
    <li data-target="#myCarousel2" data-slide-to="3"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
    <div class="col-sm-12">
      <div class="circle col-sm-2"><img src="http://www.revlocal.com/Files/images/Portraits/jfalvo_200_(2).jpg" class="img-circle img-responsive"></div>
      <h2>Name</h2>
      <p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
  
      </div>
    </div>

    <div class="item">
   <div class="col-sm-12">
      <div class="circle col-sm-2"><img src="https://mainstreetbusinesscapital.com/wp-content/uploads/2016/03/main-street-business-capital-team-nic-stephens-200x200.jpg" class="img-circle img-responsive"></div>
      <h2>Name</h2>
      <p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
      </div>
    </div>

    <div class="item">
     <div class="col-sm-12">
      <div class="circle col-sm-2"><img src="http://static.contentres.com/media/images/fbcf0ffc-7d8d-4bc5-8fc5-47941624e72c.jpg" class="img-circle img-responsive"></div>
      <h2>Name</h2>
      <p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
      </div>
    </div>

    <div class="item">
    <div class="col-sm-12">
      <div class="circle col-sm-2"><img src="http://www.revlocal.com/Files/images/Portraits/bdavidson_200.jpg" class="img-circle img-responsive"></div>
      <h2>Name</h2>
      <p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi. Maecenas dignissim a augue eget ultrices. Ut eget ipsum justo. Fusce interdum diam a lectus porta vestibulum eget quis magna.</p>
      </div>
    </div>
  </div>


</div>


</div>
</div><!-------------Testimonials---------->




<div class="container-fluid last">
<div class="container">
<h1>Follow Us</h1>
<a href=""><span class="foll fa fa-twitter animated wow zoomIn"></span></a>
<a href=""><span class="foll1 fa fa-facebook animated wow zoomIn" data-wow-delay=".1s"></span></a>
<a href=""><span class="foll2 fa fa-google-plus animated wow zoomIn" data-wow-delay=".2s"></span></a>
<a href=""><span class="foll3 fa fa-linkedin animated wow zoomIn" data-wow-delay=".3s"></span></a>
<a href=""><span class="foll4 fa fa-dribbble animated wow zoomIn" data-wow-delay=".4s"></span></a>
<a href=""><span class="foll5 fa fa-digg animated wow zoomIn" data-wow-delay=".5s"></span></a>
<a href=""><span class="foll6 fa fa-youtube animated wow zoomIn" data-wow-delay=".6s"></span></a>
<a href=""><span class="foll7 fa fa-lastfm animated wow zoomIn" data-wow-delay=".7s"></span></a>
<a href=""><span class="foll8 fa fa-delicious animated wow zoomIn" data-wow-delay=".8s"></span></a>
</div>


<div class="container-fluid last-inner">
<div class="container">
<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".2s">
<h1>Usefull Links</h1>
<hr>
<p><span class="fa fa-angle-double-right"></span>Powerful Layout Builder</p>
<p><span class="fa fa-angle-double-right"></span>Useful Shortcodes</p>
<p><span class="fa fa-angle-double-right"></span>Easy Admin</p>
<p><span class="fa fa-angle-double-right"></span>Awesome Mega Menu</p>
<p><span class="fa fa-angle-double-right"></span>Fully Responsive</p>
<p><span class="fa fa-angle-double-right"></span>Built With LESS</p>
</div>




<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".4s">
<h1>Popular Tags</h1>
<hr>
<button class="btn btn-primary pull-left">Bussiness Template</button>
<button class="btn btn-primary pull-left">Clean</button>
<button class="btn btn-primary pull-left">Cool</button>
<button class="btn btn-primary pull-left">Flaxible</button>
<button class="btn btn-primary pull-left">joomla</button>
<button class="btn btn-primary pull-left">K2</button>
<button class="btn btn-primary pull-left">Media</button>
<button class="btn btn-primary pull-left">Popular</button>
<button class="btn btn-primary pull-left">Profeessional</button>
<button class="btn btn-primary pull-left">Responsive Theme</button>
</div>




<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".6s">
<div class="clearfix"></div>
<h1>Address</h1>
<hr>
<blockquote><p>Address:  <small> 1110 evegree Lane
Los Angeles,CA 90017</small></p></blockquote>

<blockquote><p>Tel:  <small> 2154 2852 524,2452 5533 155
</small></p></blockquote>


<blockquote><p>Email:  <small>[email protected]</small></p></blockquote>

</div>



<div class="col-sm-3 last-1 animated wow zoomIn" data-wow-delay=".8s">
<h1>About Us</h1>
<hr>
<p>Pellentesque eros ipsum, tristique non ornare at, dapibus sed enim. Mauris aliquam maximus dictum. Curabitur metus ex, rhoncus ut imperdiet eu, ornare ac nisi.</p>
<button class="btn btn-primary pull-left" style="margin:10px 0 10px 0">READ MORE</button>
</div>

</div>
</div>
</div><!-----client--->

<div class="container-fluid footer">

<p>Copyright © 2015 Templates.All Rights Reserved</p>

</div><!--footer-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

CSS code

This is the css code used to create this bootstrap snippet, You can copy and paste the following css code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Oswald:400,700);



hr{width:100%;background-color:#999;margin:5px 0px;}

/*nav*/
.top{background-color:#0d8ccf}
#myNav ul{margin:0px;padding:0px;}
#myNav ul li{display:inline;}
#myNav ul li a{text-align:center; text-decoration:none; list-style:none; color:#FFF; font-family: 'Open Sans', sans-serif; font-weight:400; line-height:3;}
#myNav ul li a:hover{ background-color:#000;}

/*nav*/

/*banner*/
.control-box {text-align:center;width: 100%; }
.carousel-control{background-color:#000;color:#F00;border:0px;border-radius: 0px;display: inline-block;font-size:30px;opacity: 0.5;position: static; width:50px; position:absolute;height:50px; top:40%; bottom:50%;}
.carousel-inner img{width:100%;}    	
.control-box span{padding:10px 10px 10px 10px;}


.banner{background-image:url(http://www.gmento.com/assets/images/category_images/static/business2.jpg); background-repeat:no-repeat; background-position:center; background-size:100% 100%; background-size:cover; border-bottom:3px solid #FFF; border-top:2px solid #FFF;}

.slide h2{font-family: 'Open Sans', sans-serif; font-size:14px;color:#000; text-align:left; padding:15px; font-weight:400; background-color:#FFF; margin-bottom:20px;}
.slide p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#000; text-align:left; padding:15px; font-weight:400;  margin-bottom:20px;}
.slide h1{font-family: 'Oswald', sans-serif; color:#FFF;  margin:0px;text-align:left; padding:30px; margin:70px 0 20px 0; background-color:#0f8bd1;}
.slide button{border:none;border-radius:0px;padding:15px 25px; font-family: 'Oswald', sans-serif; font-size:14px; margin-bottom:50px;}


/*banner*/


/*slider*/
.slider{background-color:#0f8bd1}
.slider h1{font-family: 'Oswald', sans-serif; color:#FFF;  margin:0px;text-align:left; padding:30px 0px 0px 30px; font-size:20px;}
.slider p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#FFF; text-align:left; padding:30px 0px 30px 30px; font-weight:400;}
.slider button{border:none;border-radius:0px;padding:20px 30px; font-family: 'Oswald', sans-serif; font-size:14px; margin:40px 0 30px 30px;}
/*slider*/




/*about*/

.about{background-color:#0f8bd1;}
.about img{width:100%;}
.about-left h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.about-left p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:justify; padding:10px 0px 10px 0px; font-weight:400;}
.about-left button{border:none;border-radius:0px;padding:15px 35px; font-family: 'Oswald', sans-serif; font-size:14px; margin:5px 0 10px 0px;}
.about-right h2{font-family: 'Open Sans', sans-serif; color:#000;  margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:14px;}
.about-right h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.about-right p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:justify; font-weight:400;}

.control-box1{text-align:center;width:100%; }
.carousel-control1{background-color:#000;color:#F00;border:0px;border-radius: 0px;display:inline-block;font-size:30px;opacity: 0.5;position: static; width:50px; position:absolute;height:50px; top:40%; bottom:50%;}
.carousel-inner1 img{width:100%;}		
.control-box1 span{padding:10px 10px 10px 10px;}
/*about*/


/*Testimonials*/
.testimonials{}
.circle{width:200px; height:200px;}
.testimonials h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:10px 0px 0px 0px; font-size:25px;}
.testimonials h2{font-family: 'Open Sans', sans-serif; color:#000;  margin:0px; text-align:left; padding:40px 0px 5px 10px; font-size:16px;}
.testimonials p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; padding:10px 0px 5px 10px; font-weight:400; margin-bottom:50px;}

/*Testimonials*/



/*client*/

.last{background-color:#0d8ccf; text-align:center;}
.last h1{font-family: 'Oswald', sans-serif; color:#FFF;  margin:0px; text-align:center; padding:30px 0px 0px 0px; font-size:30px;}
.last span{color:#FFF; padding:20px 25px; font-size:36px; margin-bottom:30px; margin-top:20px;}
.last a span:hover{background-color:#ffde00; color:#666;}
.foll{background-color:#07a6dc;}
.foll1{background-color:#2d5094}
.foll2{background-color:#ed2215}
.foll3{background-color:#00a8dc}
.foll4{background-color:#ff732e}
.foll5{background-color:#ba68b5}
.foll6{background-color:#ff1d1c}
.foll7{background-color:#ff3f35}
.foll8{background-color:#c3d200}

.last-inner{background-color:#4d4d4d;}
.last-inner h1{font-family: 'Open Sans', sans-serif; color:#FFF;  margin:0px; text-align:left; padding:20px 0px 0px 0px; font-size:25px;}
.last-inner p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#b9b8b4; text-align:left; padding:5px 0px 0px 0px; font-weight:400; margin:0px;}
.last-inner p span{font-size:14px;color:#FFF; text-align:left; padding:0px 5px 0 0px;margin:0px;}
.last-inner button{border:none;border-radius:0px;padding:10px 10px; font-family: 'Open Sans', sans-serif; font-size:14px;  margin:2px;}
.last-inner blockquote{border:none; margin-top:0px; padding:0px;}
.last-inner  small{ color:#FFF; margin-top:0px; font-size:13px;}

.last-1{margin-bottom:30px; margin-top:30px;}
/*client*/




.footer{background-color:#000;}
.footer p{font-family: 'Open Sans', sans-serif; font-size:15px; color:#FFF; text-align:center; padding:30px 0px 10px 0px; }



/************************************************************************************about-page******************************************************************************/

.about-main{}
.about-main img{width:100%; margin-top:10px;}
.about-main h2{font-family: 'Open Sans', sans-serif; color:#0d8ccf;  margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:16px; line-height:20px;}
.about-main h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.about-main p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:justify; font-weight:400;padding:0px 0px 0px 0px;}

.about-main span{font-size:40px; text-align:center; color:#000; padding:10px; background-color:#CCC;}



/*team*/
.team{text-align:center;}
.team h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.team-inner{margin-bottom:30px; margin-top:20px;}
.team-inner img{width:100%; }
.team-inner h2{font-family: 'Open Sans', sans-serif; color:#0d8ccf;  margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:16px; line-height:20px;}
.team-inner p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#333; text-align:left; font-weight:400;padding:0px 0px 0px 0px;}
.team-inner span{font-size:20px; color:#999; text-align:center;  padding:10px 15px; border:1px solid #CCC; margin:1px;}
.team-inner span:hover{background-color:#0d8ccf; color:#FFF;}

.control-box4{text-align:right; width:100%; }
.carousel-control4{background-color:#000; color:#F00; border:0px;border-radius: 0px;display: inline-block;font-size:30px;opacity: 0.5;position: static; width:50px;height:50px; }
.carousel-inner4 img{width:100%;}		
.control-box4 span{padding:10px 10px 10px 10px; text-align:center; margin-right:5px;}

/*team*/

/***************************************************about*******************************************/




/****************************services********************************************/

.services{text-align:center;}
.services h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.services-inner{background-color:#0d8ccf; margin:10px 0px; border:10px solid #FFF;}
.services-inner h2{font-family:'Open Sans', sans-serif; color:#E2E2E2;  margin:0px; text-align:left; padding:10px 0px 5px 0px; font-size:16px; line-height:20px;}
.services-inner span{font-size:100px; padding:20px; text-align:center; color:#CCC;}
.services-inner p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#FFF; text-align:left; font-weight:400;}
.services-inner button{border:none;border-radius:0px;padding:10px; font-family: 'Open Sans', sans-serif; font-size:14px;  margin-bottom:30px;}


/****************************services********************************************/


/****************************blog********************************************/
.blog{}
.blog h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.blog-left h2{font-family:'Open Sans', sans-serif; color:#333;  margin:0px; text-align:left;  font-size:14px; font-weight:600;padding:5px 0px;margin-bottom:10px}
.blog-left span{padding:10px 10px; font-family:'Open Sans', sans-serif; color:#333; font-size:12px; text-align:center; background-color:#CCC;}
.blog-left img{width:100%; padding:10px 0px;}
.blog-left p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#666; text-align:left; font-weight:400;}
.blog-left button{border:none;border-radius:0px;padding:10px; font-family: 'Open Sans', sans-serif; font-size:14px; float:left; margin-bottom:30px;}

.btn-group button{border:none;border-radius:0px;padding:10px 20px; font-family: 'Open Sans', sans-serif; font-size:14px; float:left; margin:0 10px 50px 10px;}

.blog-right h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.blog-right h2{font-family:'Open Sans', sans-serif; color:#333;  margin:0px; text-align:left;  font-size:14px; font-weight:600;padding:5px 0px;margin:10px 0px;}
.blog-right a{text-decoration:none;list-style:none;}
.blog-right h2 span{margin-right:5px; color:#F00;}


/****************************blog********************************************/



/****************************work********************************************/

.work{}
.work h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.work p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; font-weight:400; margin-bottom:20px;}

#filters{margin:1%;padding:0;list-style:none;font-family:'Open Sans', sans-serif; font-size:16px; font-weight:600; text-align:center;}
#filters li {float:left;}
#filters li span {display: block;padding: 10px 30px;text-decoration: none;color: #666;cursor: pointer;text-transform: uppercase;}
#filters li span.active {background:#0d8ccf;color:#fff;}
	
	
.portfolio{background-color:#333; border:10px solid #FFF;}
.portfolio{padding:0px;}
#portfoliolist .portfolio {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-o-box-sizing: border-box;display:none;float:left;overflow:hidden;}
.portfolio-wrapper {overflow:hidden;position: relative !important;cursor:pointer;}
.portfolio-wrapper h2{font-family:'Open Sans', sans-serif; color:#FFF;  margin:0px; text-align:left;  font-size:14px; font-weight:600;padding:5px 0px;}
.portfolio-wrapper p{font-family: 'Open Sans', sans-serif; font-size:13px;color:#FFF; text-align:left; font-weight:400;}
.portfolio-wrapper button{border:none;border-radius:0px;padding:10px; font-family: 'Open Sans', sans-serif; font-size:14px; margin-bottom:30px;}




/****************************work********************************************/



/****************************contact********************************************/

.contact{}
.contact h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 0px 0px; font-size:25px;}
.contact p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; font-weight:400; margin-bottom:20px;}

.contact-left{ margin-top:10px;}
.contact-left h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 20px 0px; font-size:25px;}
.form-control{font-family: 'Open Sans', sans-serif; font-size:14px;}
.contact-left button{border:none;border-radius:0px;padding:20px 30px; font-family: 'Open Sans', sans-serif; font-size:14px; margin-bottom:30px;}


.contact-right{}
.contact-right h1{font-family: 'Oswald', sans-serif; color:#000;  margin:0px; text-align:left; padding:30px 0px 20px 0px; font-size:25px;}
.contact-right p{font-family: 'Open Sans', sans-serif; font-size:14px;color:#666; text-align:left; font-weight:400; margin-bottom:5px;}

.container-fluid{padding:0px !important;}

.carousel-indicators li {
    display: inline-block;
    width: 10px!important;
    height: 10px!important;
    margin: 1px!important;
    text-indent: -999px;
    cursor: pointer;
    background-color: #000 \9!important;
    background-color: rgba(0,0,0,0)!important;
    border: 2px solid #44a5da!important;
    border-radius: 10px !important;
} 


/****************************contact********************************************/

Javascript/Jquery code

This is the javascript code used to create this bootstrap snippet, You can copy and paste the following javascript code inside a page with bootstrap 3.3.7 included, to get the result that you can see in the preview selection


$(document).ready(function(){

    //fancybox.js init
	$('.fancybox').fancybox({
		openEffect : 'none',
		closeEffect : 'none',
		prevEffect : 'none',
		nextEffect : 'none',

		arrows : false,
		helpers : {
			media : {},
			buttons : {}
		}
	});



	//wow.js init
	wow = new WOW(
	    {
		  animateClass: 'animated',
		  mobile: false,
		  offset: 100
		}
	);
	wow.init();

});
 

Similar snippets

Bootstrap example and template. Works contacts

Works contacts

Bootstrap example and template. bs4 simple profile header

bs4 simple profile header

Bootstrap example and template. V card presentation

V card presentation

Bootstrap example and template. bs4 simple search result

bs4 simple search result

Bootstrap example and template. profile edit data and skills

profile edit data and skills

Bootstrap example and template. profile task with team cards

profile task with team cards

Bootstrap example and template. owl carousel courses

owl carousel courses

Bootstrap example and template. bs5 dark footer

bs5 dark footer

Bootstrap example and template. BusinessThemeBootstrapDesign

About this bootstrap example/template

We hope you will enjoy this awesome snippet and stay tuned for the latest updates, bootdey snippets are already used in thousands of blogs, websites and projects. We believe it will save your precious time and gives trendy look to your next web project.

We always try to offer the best beautiful and responsive source of Bootstrap code examples and components.

This code example currectly have 790 views, Using this bootstrap snippet you have the following benefits:

Bootstrap 3.3.7

<link rel='stylesheet' href='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>

<script src='https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>

This code example is based on bootstrap 3.3.7 and the grid system of this framework

Responsive

Based on bootstrap framework makes all the layouts perfectly responsive for all devices

Crossbrowser compatibility

Tested on all major browsers, it works smoothly on all of them

Jquery plugins

Great built-in plugins with jquery framework, you can easy to change all declarations

semantic html 5

Built on html / css3 the code quality is really amazing

Simple Integration

This code example can be simply integrated on existing sites and new ones too, all you need to do is copy the code and start working