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’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://firstname.lastname@example.org/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://email@example.com/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)