Here’s how to create a Simple Landing Page Using Bootstrap 5. This tutorial will guide you through the essential steps to construct a basic landing page layout using the power of Bootstrap 5. Let’s get started!
Step 1: Include Bootstrap 5 CSS
First, you’ll need to include the Bootstrap 5 CSS stylesheet in the `<head>` of your HTML document. This provides the styling and layout components for your landing page.
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css'>
Step 2: Structure the HTML
Next, create the basic HTML structure of your landing page. This includes a header section, a brief announcement section, and a main content section with a menu and booking information. We’ll use Bootstrap’s grid system and components to create a responsive layout.
<section class="bg-primary text-center py-5">
<img src="https://img.icons8.com/plasticine/100/000000/whole-fish.png"/>
<h1 class="text-light">Waterfront Seafood</h1>
</section>
<section class="my-3">
<div class="container">
<div class="row">
<div class="col-lg-10 offset-lg-1">
<div class="alert alert-primary text-center ">
Open Everyday from 12pm • Bookings Essential • BYO Wine
</div>
</div>
</div>
</div>
</section>
<section>
<div class="container my-3">
<div class="row">
<div class="col-lg-6 offset-lg-1">
<ul class="list-group">
<li class="list-group-item pt-4">
<h5>Crispy Fish Burger <span class="badge bg-secondary">New</span></h5>
<p>Panko crumbed fish fillet, slaw & our famous spicy sauce.<br/><span class="text-secondary">$10</span></p>
</li>
<li class="list-group-item pt-4">
<h5>Salt & Pepper Calamari</h5>
<p>Fresh fried calamari, lightly seasoned with salt & pepper.<br/><span class="text-secondary">$12</span></p>
</li>
<li class="list-group-item pt-4">
<h5>Fish of the Day</h5>
<p>Grilled fish of the day, garden salad & served with chips.<br/><span class="text-secondary">$17</span></p>
</li>
<li class="list-group-item pt-4">
<h5>Garlic Prawn Skewer</h5>
<p>Tiger prawns coated marinated in garlic served on a skewer.<br/><span class="text-secondary">$19</span></p>
</li>
<li class="list-group-item pt-4">
<h5>Seafood Platter</h5>
<p>Single serve platter containing fish, prawns, oysters & a glass of wine.<br/><span class="text-secondary">$25</span></p>
</li>
</ul>
</div>
<div class="col-lg-4">
<div class="card mb-5">
<div class="card-header">
Book Online
</div>
<div class="card-body">
<h5 class="card-title">Bookings are essential!</h5>
<p class="card-text">Don't miss out - book online to secure a table today.</p>
<a href="#" class="btn btn-primary">Check Availability</a>
</div>
</div>
<h6 class="font-weight-bold">Opening Hours</h6>
<p>Monday – Sunday<br />8am – 4pm</p>
<h6 class="font-weight-bold">Location</h6>
<p>123 Beach Street<br/>Melbourne, Victoria 3000</p>
<h6 class="font-weight-bold">Contact</h6>
<p>T: <a href="#">07 1234 5678</a><br />E: <a href="#">info@waterfrontseafood.com</a></p>
</div>
</div>
</div>
</section>
That concludes this guide on creating a Simple Landing Page Using Bootstrap 5! You should now have a basic, responsive landing page structure ready for further customization.
