HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

HTML

<!DOCTYPE html> <html lang="en-us"> <head> <meta charset="UTF-8"> <title>Starter Kit</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/buttercake@3.0.0/dist/css/butterCake.min.css">  </head> <body>   <nav class="navbar expand-md default-nav bg-primary"> <div class="container">  <div class="brand"> <a href="#">Butter Cake</a> </div>  <div class="menu-box" id="mainNav">  <div class="menu-close"><i class="fa fa-close"></i></div>  <ul class="menu ml-auto"> <li class="nav-item active"><a href="#" class="nav-link">Home</a></li> <li class="nav-item"><a href="#" class="nav-link">Portfolio</a></li> <li class="nav-item"><a href="#" class="nav-link">About</a></li> <li class="nav-item"><a href="#" class="nav-link">Contact</a></li> </ul> </div>  <button class="toggler bg-primary" data-nav="#mainNav"><i class="fa fa-bars"></i></button> </div> </nav>  <div class="jumbotron fluid"> <div class="container"> <h1 class="mb-0 display-2 hero-title">Starter Kit</h1> <h4 class="sub-title">Download Butter Cake's Starter kit</h4> <a class="btn primary btn-lg" href="https://getbuttercake.com/">Download Now</a> </div> </div>  <div class="jumbotron fluid bg-white"> <div class="container text-right"> <h1 class="mb-0 display-2 hero-title">Hero Right</h1> <h4 class="sub-title">Download Butter Cake's Starter kit</h4> <a class="btn secondary btn-lg" href="https://getbuttercake.com/">Download Now</a> </div> </div>  <div class="jumbotron fluid"> <div class="container text-center"> <h1 class="mb-0 display-2 hero-title">Hero Center</h1> <h4 class="sub-title">Download Butter Cake's Starter kit</h4> <a class="btn dark btn-lg" href="https://getbuttercake.com/">Download Now</a> </div> </div> <style> @media (max-width: 580px) { .jumbotron .hero-title { font-size: 40px !important; } .sub-title{ font-size: 18px; } } </style> <script src="https://getbuttercake.com/examples/assets/js/butterCake.js"></script> <script src="https://getbuttercake.com/examples/assets/js/holder.js"></script> </body> </html>

CSS

Javascript

Butter Cake css Framework - Hero section - navbar