Bootstrap landing page

Loading…

1  2 <nav class="navbar navbar-expand-lg navbar-dark navbar-custom fixed-top"> 3 <div class="container"> 4 <a class="navbar-brand" href="#">GoSnippets</a> 5 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> 6 <span class="navbar-toggler-icon"></span> 7 </button> 8 <div class="collapse navbar-collapse" id="navbarResponsive"> 9 <ul class="navbar-nav ms-auto"> 10 <li class="nav-item"> 11 <a class="nav-link" href="#">Sign Up</a> 12 </li> 13 <li class="nav-item"> 14 <a class="nav-link" href="#">Log In</a> 15 </li> 16 </ul> 17 </div> 18 </div> 19 </nav> 20 21 <header class="masthead text-center text-white"> 22 <div class="masthead-content"> 23 <div class="container"> 24 <h1 class="masthead-heading mb-0">One Page Wonder</h1> 25 <h2 class="masthead-subheading mb-0">Will Rock Your Socks Off</h2> 26 <a href="#" class="btn btn-primary btn-xl rounded-pill mt-5">Learn More</a> 27 </div> 28 </div> 29 <div class="bg-circle-1 bg-circle"></div> 30 <div class="bg-circle-2 bg-circle"></div> 31 <div class="bg-circle-3 bg-circle"></div> 32 <div class="bg-circle-4 bg-circle"></div> 33 </header> 34 35 <section> 36 <div class="container"> 37 <div class="row align-items-center"> 38 <div class="col-lg-6 order-lg-2"> 39 <div class="p-5"> 40 <img class="img-fluid rounded-circle" src="https://i.imgur.com/ybqukKB.jpg" alt="gosnippets"> 41 </div> 42 </div> 43 <div class="col-lg-6 order-lg-1"> 44 <div class="p-5"> 45 <h2 class="display-4">For those about to rock...</h2> 46 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p> 47 </div> 48 </div> 49 </div> 50 </div> 51 </section> 52 53 <section> 54 <div class="container"> 55 <div class="row align-items-center"> 56 <div class="col-lg-6"> 57 <div class="p-5"> 58 <img class="img-fluid rounded-circle" src="https://i.imgur.com/lrvcS06.jpg" alt="gosnippets"> 59 </div> 60 </div> 61 <div class="col-lg-6"> 62 <div class="p-5"> 63 <h2 class="display-4">We salute you!</h2> 64 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p> 65 </div> 66 </div> 67 </div> 68 </div> 69 </section> 70 71 <section> 72 <div class="container"> 73 <div class="row align-items-center"> 74 <div class="col-lg-6 order-lg-2"> 75 <div class="p-5"> 76 <img class="img-fluid rounded-circle" src="https://i.imgur.com/YsPaDAX.jpg" alt="gosnippets"> 77 </div> 78 </div> 79 <div class="col-lg-6 order-lg-1"> 80 <div class="p-5"> 81 <h2 class="display-4">Let there be rock!</h2> 82 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</p> 83 </div> 84 </div> 85 </div> 86 </div> 87 </section> 88 89  90 <footer class="py-5 bg-black"> 91 <div class="container"> 92 <p class="m-0 text-center text-white small">Copyright © Your Website 2020</p> 93 </div> 94  95 </footer> 96 97  98 <script src="vendor/jquery/jquery.min.js"></script> 99 <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 100 101</body> 102 103</html> 104

Bootstrap landing page

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery