Toggle navigation
Bootsnipp
Bootstrap
For
CSS Frameworks
Bootstrap
Foundation
Semantic UI
Materialize
Pure
Bulma
References
CSS Reference
Tools
Community
Page Builder
Form Builder
Button Builder
Icon Search
Dan's Tools
Diff / Merge
Color Picker
Keyword Tool
Web Fonts
.htaccess Generator
Favicon Generator
Site Speed Test
Snippets
Featured
Tags
By Bootstrap Version
4.1.1
4.0.0
3.3.0
3.2.0
3.1.0
3.0.3
3.0.1
3.0.0
2.3.2
Register
Login
"secureassure"
Bootstrap 4.0.0 Snippet by
jeevan123456
4.0.0
Preview
HTML
CSS
View Full Screen
Fork
Fork this
924
 
0 Fav
Post to Facebook
Tweet this
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous"> <div class="bg-nav bg-dark"> <div class="container"> <nav class="navbar navbar-expand-sm navbar-dark"> <!-- Brand --> <a class="navbar-brand" href="#"> <img src=" " alt=" Secure-Assurance" style="width:40px;"> </a> <!-- Toggler/collapsibe Button --> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button> <!-- Navbar links --> <div class="collapse navbar-collapse" id="collapsibleNavbar"> <ul class="navbar-nav ml-auto"> <li class="nav-item"> <a class="nav-link" href="#">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="#">About Us</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Services</a> </li> <!-- Dropdown --> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Portfolio </a> <div class="dropdown-menu"> <a class="dropdown-item" href="#">Our Team</a> <a class="dropdown-item" href="#">Price Plans</a> <a class="dropdown-item" href="#">Blog</a> </div> </li> <li class="nav-item"> <a class="nav-link" href="#">Contact Us</a> </li> </ul> </div> </nav> </div> </div> <div class="banner slider"> <div id="demo" class="carousel slide" data-ride="carousel" data-interval="false"> <!-- Indicators --> <ul class="carousel-indicators"> <li data-target="#demo" data-slide-to="0" class="active"></li> <li data-target="#demo" data-slide-to="1"></li> <li data-target="#demo" data-slide-to="2"></li> </ul> <!-- The slideshow --> <div class="carousel-inner"> <div class="carousel-item active"> <img src="https://images.pexels.com/photos/38556/office-notes-notepad-entrepreneur-38556.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" alt="Los Angeles"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Policy</button> <button type="button" class="btn btn-dark mt-4">Get More Details</button> </div> </div> </div> <div class="carousel-item"> <img src="https://demo.proteusthemes.com/growthpress/wp-content/uploads/sites/65/2017/09/background22-1920x748.png" alt="Chicago"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Growthpress</button> <button type="button" class="btn btn-dark mt-4">Get More Details</button> </div> </div> </div> <div class="carousel-item"> <img src="https://demo.proteusthemes.com/growthpress/wp-content/uploads/sites/65/2017/08/1min.png" alt="New York"> <div class="carousel-caption"> <div class="col-md-7"> <h1 class="pb-2"><strong>The WordPress Theme for Growth Hackers </strong> </h1> <h4>The right look and feel to promote any product, service or online course.</h4> <button type="button" class="btn btn-success mt-4">Buy Growthpress</button> <button type="button" class="btn btn-dark mt-4">Get More Details</button> </div> </div> </div> </div> <!-- Left and right controls --> <a class="carousel-control-prev" href="#demo" data-slide="prev"> <span class="carousel-control-prev-icon"></span> </a> <a class="carousel-control-next" href="#demo" data-slide="next"> <span class="carousel-control-next-icon"></span> </a> </div> </div> <div class="sectionone py-5 bg-light "> <div class="container py-5"> <div class="row"> <div class="col-md-6"> <h2 class="pt-4">Car Insurance: Compare Car Insurance Quotes | Renew Online</h2> <p class="pb-2">Buy or Renew your car insurance online in less than 5 mins. Get Discount on Premiums with No-Claim Bonus. </p> <p>imply dummy text of the printing but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> </div> <div class="col-md-6"> <img src="https://images.pexels.com/photos/245374/pexels-photo-245374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 "> </div> </div> </div> </div> <div class="sectionone py-5 bg-secondary twhite "> <div class="container py-5"> <div class="row"> <div class="col-md-6"> <h2 class="pt-4">Car Insurance: Compare Car Insurance Quotes | Renew Online</h2> <p class="pb-2">Buy or Renew your car insurance online in less than 5 mins. Get Discount on Premiums with No-Claim Bonus. </p> <p>imply dummy text of the printing but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> </div> <div class="col-md-6"> <img src="https://images.pexels.com/photos/245374/pexels-photo-245374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 "> </div> </div> </div> </div> <div class="sectionone py-5 bg-light "> <div class="container py-5"> <div class="row"> <div class="col-md-6"> <h2 class="pt-4">Car Insurance: Compare Car Insurance Quotes | Renew Online</h2> <p class="pb-2">Buy or Renew your car insurance online in less than 5 mins. Get Discount on Premiums with No-Claim Bonus. </p> <p>imply dummy text of the printing but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> </div> <div class="col-md-6"> <img src="https://images.pexels.com/photos/245374/pexels-photo-245374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 "> </div> </div> </div> </div> <div class="sectionone py-5 bg-secondary twhite"> <div class="container py-5"> <div class="row"> <div class="col-md-6"> <h2 class="pt-4">Car Insurance: Compare Car Insurance Quotes | Renew Online</h2> <p class="pb-2">Buy or Renew your car insurance online in less than 5 mins. Get Discount on Premiums with No-Claim Bonus. </p> <p>imply dummy text of the printing but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> </div> <div class="col-md-6"> <img src="https://images.pexels.com/photos/245374/pexels-photo-245374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 "> </div> </div> </div> </div> <div class="sectionone py-5 bg-light "> <div class="container py-5"> <div class="row"> <div class="col-md-6"> <h2 class="pt-4">Car Insurance: Compare Car Insurance Quotes | Renew Online</h2> <p class="pb-2">Buy or Renew your car insurance online in less than 5 mins. Get Discount on Premiums with No-Claim Bonus. </p> <p>imply dummy text of the printing but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> </div> <div class="col-md-6"> <img src="https://images.pexels.com/photos/245374/pexels-photo-245374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 "> </div> </div> </div> </div> <div class="sectionone py-5 bg-dark twhite"> <div class="container py-5"> <div class="row"> <div class="col-md-6"> <h2 class="pt-4">Car Insurance: Compare Car Insurance Quotes | Renew Online</h2> <p class="pb-2">Buy or Renew your car insurance online in less than 5 mins. Get Discount on Premiums with No-Claim Bonus. </p> <p>imply dummy text of the printing but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</p> </div> <div class="col-md-6"> <img src="https://images.pexels.com/photos/245374/pexels-photo-245374.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940 "> </div> </div> </div> </div> <div class="mapouter"><div class="gmap_canvas"><iframe width="100%" height="500" id="gmap_canvas" src="https://maps.google.com/maps?q=new delhi&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div><a href="https://www.crocothemes.net"></a><style>.mapouter{overflow:hidden;height:500px;width:100%;}.gmap_canvas {background:none!important;height:500px;width:100%;}</style></div> <div class="footer pt-5 pb-5 bg-dark "> <div class="container pt-5 pb-3"> <div class="row"> <div class="col-md-4 footer-one"> <h6> ABOUT US</h6> <P class="mt-4">Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. </P> <ul class="list-unstyled"> <li><i class="fa fa-envelope"></i>Email: email@domain.com</li> <li><i class="fa fa-phone"></i> Phone: +88 (0) 101 0000</li> <li><i class="fa fa-map-marker"></i> 184 Main Collins Street</li> </ul> </div> <div class="col-md-3 footer-one"> <h6> QUICK LINKS</h6> <ul class="list-unstyled"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Department</a></li> <li><a href="#">Acting</a></li> </ul> </div> <div class="col-md-3 footer-one"> <h6> QUICK LINKS</h6> <ul class="list-unstyled"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Department</a></li> <li><a href="#">Acting</a></li> </ul> </div> <div class="col-md-2 footer-one"> <h6> QUICK LINKS</h6> <ul class="list-unstyled"> <li><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Department</a></li> <li><a href="#">Acting</a></li> </ul> </div> </div> </div> </div> <div class="copyright pt-2 pb-2 bg-secondary "> <div class="container pt-2 pb-1"> <div class="row text-center"> <div class="col-md-12"> <h6>COPYRIGHTS 2017 © SECURE-ASSURANCE</h6> </div> </div> </div> </div>
img {width:100%;} .carousel-inner img {width: 100%;} .carousel-caption {color:#ccc;top:140px; bottom: auto; text-align:left;} .carousel-caption h1 { color:#fff;} .twhite {color:#fff!important;} .footer {color:#ccc;} .footer a {color:#ccc;}
Related:
See More
Free Template
Material Bootstrap Wizard
Questions / Comments:
Post
Posting Guidelines
Formatting
- Now
×
Close
Donate
BTC: 12JxYMYi6Vt3mx3hcmP3B2oyFiCSF3FhYT
ETH: 0xCD715b2E3549c54A40e6ecAaFeB82138148a6c76