// CODEPEN DEMO
Bootstrap is a popular framework for building responsive websites.
The latest version (5.0.x) hasn’t been officially released yet but it’s stable enough for us to have a play around with.
As an introduction to the framework we’ll be building a simple landing page for a restaurant.
Let’s get started by creating a new HTML file with the following code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<title>Waterfront Seafood Restaurant</title>
</head>
<body>
</body>
</html>
This loads the Bootstrap CSS from their official CDN (Content Delivery Network).
Bootstrap does have some functionality that requires JS but we’ll keep it simple with just the CSS for now.
In the first section let’s add a logo and business name using the following HTML markup:
<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>
- The image used for the logo was a free download from icons8.com.
-
bg-primary– Sets the background of the section to the default primary blue color. -
text-center– Whenever you need to center align text this class is added. -
py-5– Sets the y-axis padding (top & bottom) – this number should be between 0-5.
Next we’ll display some basic info about the business in an “alert” component so it stands out:
<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>
Typically alert’s would be displayed after a user completes an action but they also work well in this context.
-
my-3– Sets the y-axis margin in the same way padding was used in the previous section. - 'container' – If a container isn’t used the content will span the full width of the browser.
-
col-lg-10– Bootstrap is based on a 12 column layout and we want our alert to span only 10 columns. -
offset-lg-1– Shifts the content across 1 column so it remains centered in the 12 column layout. -
alert-primary– Sets the alert color to the default primary blue.
Our next section will be spit into 2 columns on large devices (≥992px).
On devices smaller than 992px the columns will be full width and stack on top of each other.
If you wanted to maintain 2 columns on smaller devices you would use col-sm-6 offset-sm-1 & col-sm-4.
<section>
<div class="container my-3">
<div class="row">
<div class="col-lg-6 offset-lg-1">
<!-- column 1 : menu will go here -->
</div>
<div class="col-lg-4">
<!-- column 2 : booking cta a business details go here -->
</div>
</div>
</div>
</section>
Inside of column 1 we’ll display the restaurant’s menu using the “list-group" component:
<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>
-
badge bg-secondary– Displays a small badge used to indicate that a menu item is “new”. -
text-secondary– Changes the text color of the prices to a lighter gray.
Inside of column 2 we’ll add a “card” component with a CTA for online bookings.
<div class="card mb-5">
<div class="card-header">
Bookings are essential!
</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>
-
card-header & card-title– Not required if you only want to display plain text. -
btn– Any link with this class will render like a button. -
btn-primary– Sets the color of the button to the default primary blue.
Underneath the card component we’ll add the trading hours, location, and contact details.
<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>
The only Bootstrap used here is the font-weight-bold to display the headings in a bold font weight.
As you’ve just seen Bootstrap allows us to quickly build a visually appealing webpage.
It’s also possible to build upon Bootstrap with custom CSS but we’ll save that for another article.
Top comments (0)