Scribd
Upload
44 views8 pages

Bootstrap_ Comprehensive Guide

Uploaded by

contraste visual
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
44 views8 pages

Bootstrap_ Comprehensive Guide

Uploaded by

contraste visual
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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/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

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy