Scribd
Upload
18 views

Bootstrap_ Comprehensive Guide

Uploaded by

contraste visual
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
18 views

Bootstrap_ Comprehensive Guide

Uploaded by

contraste visual
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

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/[email protected]/dist/css/bootstrap.
min.css"
rel="stylesheet"
/>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/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

You might also like