Bootstrap: Comprehensive Guide
Bootstrap: Comprehensive Guide 1
What is Bootstrap? 2
How to Include Bootstrap 2
Key Features of Bootstrap 3
1. Bootstrap Grid System 3
Example: Simple Grid 3
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
1
2. Bootstrap Components 3
Example: Buttons 3
Example: Cards 3
Example: Modals 4
3. Responsive Design with Bootstrap 4
Example: Responsive Grid 5
4. Bootstrap Utilities 5
Example: Text and Spacing Utilities 5
Exercises 5
Exercise 1: Create a Responsive Navbar 5
Exercise 2: Create a Responsive Grid Layout 6
Multiple-Choice Questions 6
Question 1: 6
Question 2: 7
Question 3: 7
Advanced Example: Create a Portfolio Page 7
Bootstrap is a popular front-end framework for building responsive and mobile-first websites.
This guide covers Bootstrap’s grid system, components, utilities, and responsive features with
examples, exercises, and quiz questions.
What is Bootstrap?
Bootstrap is an open-source CSS framework containing pre-designed components, JavaScript
plugins, and a responsive grid system. It helps developers quickly build professional and
responsive designs.
How to Include Bootstrap
CDN (Content Delivery Network): Add the following in the <head> of your HTML file:
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.
min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bu
ndle.min.js"></script>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
2
1. Local Installation: Download Bootstrap from Bootstrap's official website and include the
files in your project.
Key Features of Bootstrap
1. Grid System
2. Pre-designed Components
3. JavaScript Plugins
4. Utility Classes
1. Bootstrap Grid System
The Bootstrap grid system is a 12-column layout used to create responsive designs. It is based
on containers, rows, and columns.
Example: Simple Grid
<div class="container">
<div class="row">
<div class="col-4">Column 1</div>
<div class="col-4">Column 2</div>
<div class="col-4">Column 3</div>
</div>
</div>
Explanation:
● container: Defines a responsive container for the grid.
● row: Defines a row.
● col-4: Takes 4 columns (out of 12).
2. Bootstrap Components
Bootstrap includes a variety of pre-designed components such as buttons, cards, modals, and
navbars.
Example: Buttons
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-secondary">Secondary Button</button>
Example: Cards
<div class="card" style="width: 18rem;">
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
3
<img src="https://via.placeholder.com/150" class="card-img-top"
alt="Image">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">This is some card content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
Example: Modals
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal
title</h5>
<button type="button" class="btn-close"
data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
This is a Bootstrap modal!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save
changes</button>
</div>
</div>
</div>
</div>
3. Responsive Design with Bootstrap
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
4
Bootstrap makes it easy to design for different screen sizes using breakpoint classes (sm, md,
lg, xl, xxl).
Example: Responsive Grid
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-4">Column 1</div>
<div class="col-sm-6 col-md-4">Column 2</div>
<div class="col-sm-12 col-md-4">Column 3</div>
</div>
</div>
4. Bootstrap Utilities
Utility classes allow quick styling without custom CSS.
Example: Text and Spacing Utilities
<p class="text-center text-primary">This is a centered primary-colored
text.</p>
<div class="mt-3 mb-3">This div has margin-top and margin-bottom of 3
units.</div>
Exercises
Exercise 1: Create a Responsive Navbar
1. Use Bootstrap’s navbar component to create a responsive navigation bar with links to
Home, About, and Contact.
Solution:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</a>
<button class="navbar-toggler" type="button"
data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
5
<li class="nav-item"><a class="nav-link active"
href="#">Home</a></li>
<li class="nav-item"><a class="nav-link"
href="#">About</a></li>
<li class="nav-item"><a class="nav-link"
href="#">Contact</a></li>
</ul>
</div>
</div>
</nav>
Exercise 2: Create a Responsive Grid Layout
1. Design a layout with:
○ 3 columns on large screens (lg).
○ 2 columns on medium screens (md).
○ 1 column on small screens (sm).
Solution:
<div class="container">
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4">Column 1</div>
<div class="col-sm-12 col-md-6 col-lg-4">Column 2</div>
<div class="col-sm-12 col-md-6 col-lg-4">Column 3</div>
</div>
</div>
Multiple-Choice Questions
Question 1:
What is the purpose of the container class in Bootstrap?
1. To center-align text.
2. To provide a fixed-width layout.
3. To define a responsive layout.
4. To style buttons.
Answer: 3. To define a responsive layout.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
6
Question 2:
Which class makes a button look primary?
1. btn-light
2. btn-primary
3. button-primary
4. btn-main
Answer: 2. btn-primary
Question 3:
What does the class col-md-6 mean in Bootstrap?
1. The column spans 6 rows on medium screens.
2. The column spans 6 columns on medium screens.
3. The column spans the entire row.
4. None of the above.
Answer: 2. The column spans 6 columns on medium screens.
Advanced Example: Create a Portfolio Page
<!DOCTYPE html>
<html lang="en">
<head>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.
min.css" rel="stylesheet">
</head>
<body>
<header class="bg-dark text-white text-center p-4">
<h1>Portfolio</h1>
</header>
<div class="container mt-5">
<div class="row">
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<img src="https://via.placeholder.com/300"
class="card-img-top" alt="Project">
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
7
<div class="card-body">
<h5 class="card-title">Project 1</h5>
<p class="card-text">Description of the project.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<img src="https://via.placeholder.com/300"
class="card-img-top" alt="Project">
<div class="card-body">
<h5 class="card-title">Project 2</h5>
<p class="card-text">Description of the project.</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-6 mb-4">
<div class="card">
<img src="https://via.placeholder.com/300"
class="card-img-top" alt="Project">
<div class="card-body">
<h5 class="card-title">Project 3</h5>
<p class="card-text">Description of the project.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
