Siksha Sarovar

Siksha Sarovar (sikshasarovar.com) is a free educational web application that helps students in India learn programming and prepare for academic and competitive exams. The platform offers structured coding courses (C, C++, Python, Java, HTML, CSS, PHP, Power BI, AI, Machine Learning, Data Science), complete university curriculum notes for BCA/MCA students with previous year question papers, Class 10 and Class 12 CBSE/HBSE school notes, and dedicated preparation material for SSC, UPSC, Banking, Railway and other government exams. Browsing the site is completely free and requires no account. Users may optionally sign in with Google solely to save their learning progress, quiz scores and personal preferences across devices.

Privacy Policy | Terms of Service | Contact Siksha Sarovar | About Siksha Sarovar

v4.0.9 · PWA
Siksha Sarovar logo
Siksha Sarovar
Your Learning Universe

Siksha Sarovar is a free e-learning platform for coding courses, BCA university notes and competitive exam preparation. Optional Google sign-in saves your learning progress across devices.

Initializing knowledge base…
Compiling modules 0%

Introduction to Bootstrap Framework

Lesson 14 of 34 in the free Web Technologies notes on Siksha Sarovar, written by Rohit Jangra.

Introduction to Bootstrap Framework

What is Bootstrap?

Bootstrap is a free, open-source CSS framework developed by Twitter. It provides pre-built responsive components, a grid system, and utility classes that allow rapid web development.

Current version: Bootstrap 5 (no jQuery dependency)

Including Bootstrap

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Page</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <!-- Content here -->

  <!-- Bootstrap JS bundle (includes Popper) -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Bootstrap Utility Classes

<!-- Spacing: m=margin, p=padding, t/b/s/e/x/y = direction, 0-5 = size -->
<div class="mt-3 mb-2 px-4 py-2">Spaced box</div>

<!-- Colors -->
<p class="text-primary">Blue text</p>
<button class="btn btn-danger">Red button</button>
<div class="bg-success text-white p-3">Green background</div>

<!-- Display -->
<div class="d-flex justify-content-between align-items-center">
  <span>Left</span>
  <span>Right</span>
</div>

<!-- Typography -->
<h1 class="display-4 fw-bold text-center">Big Title</h1>
<p class="lead">Large intro paragraph.</p>

Common Bootstrap Classes

CategoryClasses
Spacingm-, p-, mt-, mb-, mx-auto
Colorstext-primary, bg-danger, text-muted
Flexboxd-flex, justify-content-, align-items-
Displayd-none, d-block, d-md-flex
Texttext-center, fw-bold, fs-4
Bordersborder, rounded, border-primary

Buttons

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success btn-lg">Large Success</button>
<button class="btn btn-outline-danger btn-sm">Small Outline</button>
<button class="btn btn-dark" disabled>Disabled</button>

Alerts

<div class="alert alert-success alert-dismissible fade show" role="alert">
  <strong>Success!</strong> Your form was submitted.
  <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
<div class="alert alert-warning">Watch out!</div>
<div class="alert alert-danger">Error occurred!</div>
Key Takeaway: Bootstrap accelerates development with pre-built responsive components and utility classes. Master the spacing, color, and display utilities to build layouts rapidly without writing much custom CSS.