Can I use "Bootstrap landing page" in commercial projects?

Yes. All GoSnippets are MIT licensed for personal and commercial use without attribution.

Does this snippet include Bootstrap?

This example targets Bootstrap 5. Copy the HTML/CSS/JS into your layout after loading Bootstrap CSS and JS from CDN or npm.

Bootstrap landing page — Free Utilities Snippet (Bootstrap 5)

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

How to use this snippet

Customization tips

Best for

Accessibility notes

Responsive design

Source Code

More Utilities snippets

Comments(0)

Working in Tailwind? Explore our Tailwind gallery

Ocean Depth Neumorphic Music Player with Waveform Scrubber

Cyberpunk AI Chat Dashboard with Dynamic Orbital Glow

Aurora Mint Neumorphic Event Scheduler with Drag Selection