Step-by-Step Guide To Simple Landing Page With Bootstrap 5

Landing pages are crucial for grabbing attention and converting visitors into users or customers. But creating them from scratch can be time-consuming. That’s where Bootstrap 5 comes in! This popular framework offers a bunch of pre-built components and styles to simplify the process.

In this post, we’ll walk you through creating a basic landing page with Bootstrap 5. No coding experience necessary, just follow these steps!

Step1: HTML Structure Of Landing Page

This code builds a landing page for a sushi restaurant called “Ocean’s Delight Sushi” using Bootstrap classes for layout and styling. It displays the restaurant’s information, menu items, and a reservation call to action. Here is the code:

<section class="bg-primary text-center py-5">
<img src="https://img.icons8.com/fluency/100/000000/sushi.png"/>
<h1 class="text-light">Ocean's Delight Sushi</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 ">
Serving Daily from 11am • Reservation Recommended • Sake Selection Available
</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>Spicy Tuna Roll <span class="badge bg-secondary">Hot</span></h5>
<p>Succulent tuna with a spicy kick, wrapped in rice and seaweed.
<span class="text-secondary">$8</span></p>
</li> 
<li class="list-group-item pt-4">
<h5>Salmon Nigiri</h5>
<p>Freshly sliced salmon over seasoned rice, served with wasabi and soy sauce.
<span class="text-secondary">$9</span></p>
</li> 
<li class="list-group-item pt-4">
<h5>Sushi Platter</h5>
<p>An assortment of our finest sushi selections, perfect for sharing.
<span class="text-secondary">$22</span></p>
</li> 
<li class="list-group-item pt-4">
<h5>Tempura Shrimp Roll</h5>
<p>Crunchy shrimp tempura with avocado, cucumber, and spicy mayo.
<span class="text-secondary">$12</span></p>
</li> 
<li class="list-group-item pt-4">
<h5>Dragon Roll</h5>
<p>Eel and cucumber roll topped with thinly sliced avocado and teriyaki sauce.
<span class="text-secondary">$15</span></p>
</li> 
</ul> 
</div>
<div class="col-lg-4"> 
<div class="card mb-5">
<div class="card-header">
Reserve Your Table
</div>
<div class="card-body">
<h5 class="card-title">Secure Your Spot!</h5>
<p class="card-text">Popular times fill quickly. Reserve your table online now.</p>
<a href="#" class="btn btn-primary">Make a Reservation</a>
</div>
</div>
<h6 class="font-weight-bold">Opening Hours</h6>
<p>Tuesday – Sunday
10am – 9pm</p> ‍
<h6 class="font-weight-bold">Location</h6>
<p>456 Harbor Lane
Sydney, New South Wales 2000</p> ‍
<h6 class="font-weight-bold">Contact</h6>
<p>T: <a href="#">02 9876 5432</a>
E: <a href="#">reserve@oceansdelightsushi.com</a></p>
</div>
</div> 
</div>
</section>

Step2: Styling the Restaurant Landing Page

This code applies custom styles on top of Bootstrap’s defaults. It defines colors, fonts, spacing, and adjustments for a clean and professional look for the restaurant’s landing page.

/* General body styling */
body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #333;
background-color: #f0f0f0;
}

/* Navigation bar styling */
.bg-primary {
background-color: #0275d8 !important; /* Deep blue background */
}

.text-light {
color: #ffffff !important;
}

/* Center text sections */
.text-center {
text-align: center;
}

.py-5 {
padding-top: 3rem !important;
padding-bottom: 3rem !important;
}

.my-3 {
margin-top: 1rem !important;
margin-bottom: 1rem !important;
}

/* Alert box styling */
.alert-primary {
background-color: #bbeffd;
color: #015477;
border-radius: 0;
border: none;
}

/* List group styling for menu items */
.list-group-item {
background-color: #ffffff;
border: 1px solid #ddd;
}

.list-group-item h5 {
color: #0275d8;
}

.list-group-item p {
color: #666;
}

.badge {
background-color: #f0ad4e;
color: #ffffff;
}

.text-secondary {
color: #6c757d !important;
}

/* Card styling for reservations */
.card {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.card-header {
background-color: #0275d8;
color: #ffffff;
}

.btn-primary {
background-color: #5cb85c;
border-color: #4cae4c;
}

/* Additional styling for location, hours, and contact */
.font-weight-bold {
font-weight: bold;
}

a {
color: #0275d8;
text-decoration: none;
}

a:hover {
color: #014f86;
text-decoration: underline;
}

/* Responsive adjustments */
@media (max-width: 992px) {
.offset-lg-1 {
margin-left: 0;
}
}

Step3: Including CDN

https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css