R
Rishtaara
Bootstrap 5 Fundamentals
Lesson 1 of 24Article16 minFREE

Bootstrap HOME, Get Started & Basic Template

Bootstrap is the world's most popular CSS framework. It gives you ready-made classes for layout, buttons, forms, navbars, and more — so you build good-looking pages faster.

Bootstrap HOME — what this course covers

Bootstrap is the world's most popular CSS framework. It gives you ready-made classes for layout, buttons, forms, navbars, and more — so you build good-looking pages faster.

This Rishtaara Bootstrap 5 course uses simple English, a real-life example, and copy-paste HTML with Bootstrap 5 classes.

Real-life example: Bootstrap is like a furniture kit from IKEA. You still assemble the page, but the legs, screws, and instructions are already prepared — you do not build every chair from raw wood.

  • Layout: containers, grid, flex, utilities
  • Components: buttons, cards, navbar, modal, carousel
  • Forms: inputs, validation, floating labels
  • Final project: complete landing page
Tip: Keep one folder called my-bootstrap-site. Save every lesson file there and open them in Chrome with Live Server.

Get Started — Bootstrap 5 CDN

The fastest way to use Bootstrap is the CDN (Content Delivery Network). Add one CSS link in <head> and one JS script before </body>. No download needed.

Bootstrap 5 does not need jQuery. Use bootstrap.bundle.min.js — it includes Popper for dropdowns, tooltips, and popovers.

Real-life example: CDN is like borrowing tools from a neighbor instead of buying a full toolbox. You link to Bootstrap's files on the internet and start building immediately.

Bootstrap 5 CDN starter
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My Bootstrap Page</title>
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet"
  />
</head>
<body>
  <h1 class="text-primary">Hello, Bootstrap 5!</h1>
  <p class="lead">Built with the CDN — no install required.</p>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Basic Template

Every Bootstrap page needs: DOCTYPE, viewport meta tag, Bootstrap CSS, your content, then Bootstrap JS. The viewport meta tag makes the page work on mobile phones.

Put your custom CSS after Bootstrap's link so your rules can override defaults when needed.

Real-life example: The basic template is like a school exam answer sheet — fixed header (head), blank space for answers (body), and a footer stamp (scripts).

Complete Bootstrap 5 basic template
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Rishtaara — Bootstrap Starter</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
  <link href="style.css" rel="stylesheet" />
</head>
<body>
  <div class="container py-4">
    <h1>Welcome</h1>
    <p>Your content goes here.</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap Editor

Use VS Code with the Live Server extension. Create .html files, save, and the browser refreshes automatically. Press F12 to open DevTools and inspect Bootstrap classes.

You can also try an online HTML playground for quick experiments, but saving files locally is better for learning.

Real-life example: VS Code is your workshop bench. Live Server is the assistant who instantly shows you what you built without you walking to the display room every time.

  • VS Code — free, syntax highlighting, extensions
  • Live Server — auto refresh on save
  • Browser DevTools (F12) — see which Bootstrap classes apply

Exercises, Quiz, Syllabus, Study Plan & Interview Prep

After each lesson, rebuild the examples yourself without looking. Change colors, text, and layout until it feels easy.

Rishtaara links MCQ quizzes and interview questions for Bootstrap once this course is wired up. Use the syllabus in lesson 22 as your checklist.

Real-life example: Reading about cricket is not the same as playing. Exercises are your practice nets — quizzes are the friendly match before the real game.

  • Exercises: copy code, then modify it blind
  • Quiz: test class names and component structure
  • Study plan: 2 lessons per day → finish in ~12 days
  • Interview prep: explain grid, utilities, and when to use Bootstrap vs Tailwind
Syllabus checklist: containers through dark mode, forms, grid, and a landing page project.
NextBootstrap Containers