Mobile-first websites are the standard today; be it your resume or your business website, the chances are that it will be primarily viewed on a smartphone more than any device today. Thanks to Bootstrap 5 (currently v5.1), we can set up a responsive website in less than 5 mins (or more if you are on a comfy couch). Let's build a website using Bootstrap 5 together! Bootstrap 5 is a library that provides power-ups to our plain HTML and JavaScript.
Getting ready 🤓
Let's talk about what is Bootstrap in the first place? Bootstrap is a CSS framework. It is a collection of different CSS styles like buttons, dropdown menus and umpteen other things. Do you need to know CSS for Bootstrap? Not really. And that is the best part and also the reason why it is so popularly used.
However, there are some prerequisites to this blog:
- You need to know basics of HTML and JavaScript
- You’d obviously need a code editor. Got these two covered? Let’s dive in deeper 🐬
We'll be importing the library and using the various components it has to offer to build our website.
Step 1: Inside your tag, add the following meta tags and link to the CSS. To help you, I've provided you with a starter template.
<!DOCTYPE html>
<!-- This is required by Bootstrap. Without this, you'll see funky and incomplete styling-->
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<!-- This ensures proper rendering and touch zooming for all devices -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
</html>
This template will give you a fundamental yet Bootstrap-ed website.
Step 2: Save the file as ".html"
Step 3: Open the file in a browser to view your basic bootstrap-ed website 🎉
Now that the basic website is up – we can play around with it like adding breakpoints, containers, etc.
If this excites you, you can learn more about it following the below references:
- Introduction · Bootstrap v5.1
- Bootstrap 5 Documentation - W3cubDocs
- Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design - YouTube
Until next time 👋
Vishal - your friendly Community Manager ✨
Top comments (0)