"Sample"
Bootstrap 3.2.0 Snippet by solventarchitect

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content=""> <meta name="author" content=""> <title>Modern Business - Start Bootstrap Template</title> <!-- Bootstrap core CSS --> <link href="css/bootstrap.css" rel="stylesheet"> <!-- Add custom CSS here --> <link href="css/modern-business.css" rel="stylesheet"> <link href="font-awesome/css/font-awesome.min.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- You'll want to use a responsive image option so this logo looks good on devices - I recommend using something like retina.js (do a quick Google search for it and you'll find it) --> <a class="navbar-brand" href="index.html">Modern Business</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="about.html">About</a> </li> <li><a href="services.html">Services</a> </li> <li><a href="contact.php">Contact</a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="portfolio-1-col.html">1 Column Portfolio</a> </li> <li><a href="portfolio-2-col.html">2 Column Portfolio</a> </li> <li><a href="portfolio-3-col.html">3 Column Portfolio</a> </li> <li><a href="portfolio-4-col.html">4 Column Portfolio</a> </li> <li><a href="portfolio-item.html">Single Portfolio Item</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="blog-home-1.html">Blog Home 1</a> </li> <li><a href="blog-home-2.html">Blog Home 2</a> </li> <li><a href="blog-post.html">Blog Post</a> </li> </ul> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Other Pages <b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="full-width.html">Full Width Page</a> </li> <li><a href="sidebar.html">Sidebar Page</a> </li> <li><a href="faq.html">FAQ</a> </li> <li><a href="404.html">404</a> </li> <li><a href="pricing.html">Pricing Table</a> </li> </ul> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <div id="myCarousel" class="carousel slide"> <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#myCarousel" data-slide-to="0" class="active"></li> <li data-target="#myCarousel" data-slide-to="1"></li> <li data-target="#myCarousel" data-slide-to="2"></li> </ol> <!-- Wrapper for slides --> <div class="carousel-inner"> <div class="item active"> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide One');"></div> <div class="carousel-caption"> <h1>Modern Business - A Bootstrap 3 Template</h1> </div> </div> <div class="item"> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Two');"></div> <div class="carousel-caption"> <h1>Ready to Style & Add Content</h1> </div> </div> <div class="item"> <div class="fill" style="background-image:url('http://placehold.it/1900x1080&text=Slide Three');"></div> <div class="carousel-caption"> <h1>Additional Layout Options at <a href="http://startbootstrap.com">http://startbootstrap.com</a> </h1> </div> </div> </div> <!-- Controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="icon-prev"></span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="icon-next"></span> </a> </div> <div class="section"> <div class="container"> <div class="row"> <div class="col-lg-4 col-md-4"> <h3><i class="fa fa-check-circle"></i> Bootstrap 3 Built</h3> <p>The 'Modern Business' website template by <a href="http://startbootstrap.com">Start Bootstrap</a> is built with <a href="http://getbootstrap.com">Bootstrap 3</a>. Make sure you're up to date with latest Bootstrap documentation!</p> </div> <div class="col-lg-4 col-md-4"> <h3><i class="fa fa-pencil"></i> Ready to Style & Edit</h3> <p>You're ready to go with this pre-built page structure, now all you need to do is add your own custom stylings! You can see some free themes over at <a href="http://bootswatch.com">Bootswatch</a>, or come up with your own using <a href="http://getbootstrap.com/customize/">the Bootstrap customizer</a>!</p> </div> <div class="col-lg-4 col-md-4"> <h3><i class="fa fa-folder-open"></i> Many Page Options</h3> <p>This template features many common pages that you might see on a business website. Pages include: about, contact, portfolio variations, blog, pricing, FAQ, 404, services, and general multi-purpose pages.</p> </div> </div> <!-- /.row --> </div> <!-- /.container --> </div> <!-- /.section --> <div class="section-colored text-center"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h2>Modern Business: A Clean & Simple Full Website Template by Start Bootstrap</h2> <p>A complete website design featuring various single page templates from Start Bootstraps library of free HTML starter templates.</p> <hr> </div> </div> <!-- /.row --> </div> <!-- /.container --> </div> <!-- /.section-colored --> <div class="section"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Display Some Work on the Home Page Portfolio</h2> <hr> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-home-portfolio" src="http://placehold.it/700x450"> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-home-portfolio" src="http://placehold.it/700x450"> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-home-portfolio" src="http://placehold.it/700x450"> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-home-portfolio" src="http://placehold.it/700x450"> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-home-portfolio" src="http://placehold.it/700x450"> </a> </div> <div class="col-lg-4 col-md-4 col-sm-6"> <a href="portfolio-item.html"> <img class="img-responsive img-home-portfolio" src="http://placehold.it/700x450"> </a> </div> </div> <!-- /.row --> </div> <!-- /.container --> </div> <!-- /.section --> <div class="section-colored"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6"> <h2>Modern Business Features Include:</h2> <ul> <li>Bootstrap 3 Framework</li> <li>Mobile Responsive Design</li> <li>Predefined File Paths</li> <li>Working PHP Contact Page</li> <li>Minimal Custom CSS Styles</li> <li>Unstyled: Add Your Own Style and Content!</li> <li>Font-Awesome fonts come pre-installed!</li> <li>100% <strong>Free</strong> to Use</li> <li>Open Source: Use for any project, private or commercial!</li> </ul> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <img class="img-responsive" src="http://placehold.it/700x450/ffffff/cccccc"> </div> </div> <!-- /.row --> </div> <!-- /.container --> </div> <!-- /.section-colored --> <div class="section"> <div class="container"> <div class="row"> <div class="col-lg-6 col-md-6 col-sm-6"> <img class="img-responsive" src="http://placehold.it/700x450"> </div> <div class="col-lg-6 col-md-6 col-sm-6"> <h2>Modern Business Features Include:</h2> <ul> <li>Bootstrap 3 Framework</li> <li>Mobile Responsive Design</li> <li>Predefined File Paths</li> <li>Working PHP Contact Page</li> <li>Minimal Custom CSS Styles</li> <li>Unstyled: Add Your Own Style and Content!</li> <li>Font-Awesome fonts come pre-installed!</li> <li>100% <strong>Free</strong> to Use</li> <li>Open Source: Use for any project, private or commercial!</li> </ul> </div> </div> <!-- /.row --> </div> <!-- /.container --> </div> <!-- /.section --> <div class="container"> <div class="row well"> <div class="col-lg-8 col-md-8"> <h4>'Modern Business' is a ready-to-use, Bootstrap 3 updated, multi-purpose HTML theme!</h4> <p>For more templates and more page options that you can integrate into this website template, visit Start Bootstrap!</p> </div> <div class="col-lg-4 col-md-4"> <a class="btn btn-lg btn-primary pull-right" href="http://startbootstrap.com">See More Templates!</a> </div> </div> <!-- /.row --> </div> <!-- /.container --> <div class="container"> <hr> <footer> <div class="row"> <div class="col-lg-12"> <p>Copyright © Company 2013</p> </div> </div> </footer> </div> <!-- /.container --> <!-- JavaScript --> <script src="js/jquery-1.10.2.js"></script> <script src="js/bootstrap.js"></script> <script src="js/modern-business.js"></script> </body> </html>
/* Custom CSS for... 'Modern Business' HTML Theme by Start Bootstrap All Start Bootstrap themes are licensed under Apache 2.0. For more info and more free Bootstrap 3 HTML themes, visit http://startbootstrap.com! */ /* Global Styles */ html, body { height: 100%; } body { padding-top: 50px; /* body padding for fixed top nav */ } .img-home-portfolio, .img-customer, .portfolio-item { margin-bottom: 30px; } .tab-pane { margin-top: 15px; } /* Page Sections */ .section, .section-colored { padding: 50px 0; } .section-colored { background-color: #e1e1e1; /* change this to change the background color of a colored section */ } .sidebar { margin-top: 40px; } .sidebar ul { border-radius: 5px; padding: 5px; border: 1px solid #cccccc; } /* Half Page Height Carousel Customization */ .carousel { height: 50%; } .item, .active, .carousel-inner { height: 100%; } .fill { width: 100%; height: 100%; background-position: center; background-size: cover; } /* Social Icons Styles */ .list-social-icons { margin-bottom: 45px; } .tooltip-social a { text-decoration: none; color: inherit; } .facebook-link a:hover { color: #3b5998; } .linkedin-link a:hover { color: #007fb1; } .twitter-link a:hover { color: #39a9e0; } .google-plus-link a:hover { color: #d14836; } /* Service Page Styles */ .service-icon { font-size: 50px; } /* 404 Page Styles */ .error-404 { font-size: 8em; } /* Pricing Page Styles */ .price { font-size: 4em; } .price-cents { vertical-align: super; font-size: 50%; } .price-month { font-size: 35%; font-style: italic; } /* Footer Styles */ footer { margin: 50px 0; } /* Responsive Styles */ @media (max-width: 767px) { .carousel { height: 70%; /* increases the carousel height so it looks good on phones */ } }
// Activates the Carousel $('.carousel').carousel({ interval: 5000 }) // Activates Tooltips for Social Links $('.tooltip-social').tooltip({ selector: "a[data-toggle=tooltip]" })

Related: See More


Questions / Comments: