Introduction to

Computing
(CCIS1101)
Lesson 9:
Bootstrap
Objectives of this Discussion:
• Explain the fundaments of the Bootstrap framework,
including its grid system, components, and utility classes..

• Apply Bootstrap’s grid system to create responsive layouts

that adapt to different screen sizes and devices.

• Demonstrate Bootstrap components, such as buttons,

navigation bars, forms, modals, carousels, and more, and
understand how to integrate them into web projects
What is Bootstrap?
What is Bootstrap?
• Bootstrap is a powerful and widely used
open-source front-end framework for web
development.
Purpose of Bootstrap
• The purpose of using Bootstrap is to
simplify and speed up the process of
creating responsive and visually appealing
websites.
Key Features of Bootstrap
• Pre-designed CSS and JavaScript
components
• Responsive grid system for layout design
• Typography and utility classes for styling
Why use Bootstrap?
• Save time and effort in web design.
• Ensure cross-browser compatibility.
• Achieve a consistent and professional
look.
Getting Started with Bootstrap
Setting up Bootstrap
There are two primary ways to include
Bootstrap in your project:
• Using a Content Delivery Network (CDN)
• Downloading Bootstrap files
(1) Using CDN
• The quickest way to get started.
• Include Bootstrap by linking to its hosted
files on the web.
• Requires an internet connection to access
the Bootstrap files.
(1) Using CDN
Example (CDN):
• <link rel="stylesheet"
href="https://cdn.bootstrapcdn.com/bootstr
ap/4.5.2/css/bootstrap.min.css">
• <script
src="https://cdn.bootstrapcdn.com/bootstra
p/4.5.2/js/bootstrap.min.js"></script>
(1) Using CDN
(2) Downloading Bootstrap
• Provides more control over the Bootstrap
version and files.
• Download the Bootstrap files from the
official website.
• Host them locally in your project directory.
(2) Downloading Bootstrap
Example (Local):
• Download the Bootstrap files from
getbootstrap.com.
• Place the CSS and JS files in your project
directory.
• Link to them in your HTML file.
(2) Downloading Bootstrap
Example (Local):
• Download the Bootstrap files from
getbootstrap.com.
• Place the CSS and JS files in your project
directory.
• Link to them in your HTML file.
(2) Downloading Bootstrap
Bootstrap Layout
Understanding Grid System
Grid Layout - A system for organizing content
into rows and columns.

Responsiveness:
- The grid system is designed to be responsive.
- Content automatically adjusts to fit various
screen sizes.
Understanding Grid System
Mobile-first approach - Content starts as a
single column on small screens and scales
up
Understanding Grid System
Mobile-first approach - Content starts as a
single column on small screens and scales
up
Bootstrap Containers
Container – It is used to pad the content inside of
them, and there are two container classes available:

1. The .container class provides a responsive fixed

width container
2. The .container-fluid class provides a full width
container, spanning the entire width of the
viewport
Bootstrap Containers
.container class

.container-fluid class
Grid Basics of Bootstrap
• The grid system is a fundamental concept in
Bootstrap.
• It helps structure your website's layout and
design.
• The grid system is based on a 12-column
layout.
Grid Classes of Bootstrap
• Bootstrap provides classes for specifying
the width of columns.
• Examples
col-12 (full width)
col-6 (half width)
col-4 (one-third width)
Grid Classes of Bootstrap
Create 2-column even row
<div class="row">
<div class="col-6"></div>
<div class="col-6"></div>
</div>

Create 3-column even row

<div class="row">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
Grid Classes of Bootstrap
Create 4-column even row
<div class="row">
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
<div class="col-3"></div>
</div>

Create 3-column uneven row

<div class="row">
<div class="col-3"></div>
<div class="col-6"></div>
<div class="col-3"></div>
</div>
Grid Classes of Bootstrap
• Nesting Columns:
You can nest columns within columns to create
complex layouts.

Example
Create a two-column row within a larger column.
Components of
Bootstrap
(1) Typography
• Typography plays a crucial role in web
design.
• Bootstrap provides a set of typography
classes for text formatting.
Typography Classes
• .h1 to .h6 - Header styles for different levels of
headings.
• .lead - Create a lead paragraph for emphasis.
• .small - Style text to be smaller and less
prominent.
• .text-muted, .text-primary, .text-success, etc. -
Apply various text color classes.
Typography Classes
• .text-center, .text-right, .text-justify - Align
text as needed.
• .font-weight-bold, .font-weight-normal -
Adjust font weight.
• .font-italic - Make text italic.
• .text-uppercase, .text-lowercase, .text-
capitalize - Modify text case.
Typography Classes
• .text-center, .text-right, .text-justify - Align
text as needed.
• .font-weight-bold, .font-weight-normal -
Adjust font weight.
• .font-italic - Make text italic.
• .text-uppercase, .text-lowercase, .text-
capitalize - Modify text case.
Typography Classes
Example:
<h1 class="display-4">Bootstrap
Typography</h1>
<p class="lead">Enhance your web design
with Bootstrap's typography classes.</p>
<p class="text-muted">Customize text
styles to match your design vision.</p>
(2) Colors
• Colors are a vital element in web design,
impacting aesthetics and user experience.

• Bootstrap provides a color palette to

maintain a consistent and appealing look.
Primary Colors
Bootstrap defines primary colors for key elements such as buttons
and links.
Example:
• Primary (Blue)
• Secondary (Gray)
• Success (Green)
• Danger (Red)
• Warning (Yellow)
• Info (Light Blue)
• Dark
• Light
Text Color Classes
Bootstrap offers text color classes to style
text.
Examples:
• .text-primary
• .text-success
• .text-danger, etc.
Background Color Classes
You can apply background color classes to
elements.
Examples:
• .bg-primary
• .bg-success
• .bg-danger, etc.
Background Color Classes
Use contextual background colors to
highlight specific content.
Examples:
• .bg-info (light blue)
• .bg-warning (yellow)
(3) Tables
• Tables are essential for displaying data in
an organized format on websites.

• Bootstrap provides a variety of classes and

styles for creating attractive and responsive
tables.
Table Structure
• Tables consist of rows and columns.
• Rows are created with <tr> tags.
• Columns are created with <th> (table
header) or <td> (table data) tags.
Basic Table Styles
Bootstrap offers basic table styles using the
.table class.
.table-striped - Adds zebra-striping to rows.
.table-bordered - Adds borders to the table
and its cells.
Responsive Tables
• Tables can become too wide for small
screens. Bootstrap addresses this with
.table-responsive.

• It allows horizontal scrolling on smaller

screens to keep content accessible.
Hover Effect
.table-hover adds a hover effect to table rows
when a user hovers over them.
Contextual Classes
Bootstrap offers contextual classes for
styling table rows or cells based on content.
Examples:
• .table-success,
• .table-danger,
• .table-warning
(4) Images
• Images are a crucial part of web design,
enhancing the visual appeal of your
content.

• Bootstrap provides classes and utilities to

make working with images easier and more
responsive.
Responsive Images
Bootstrap's .img-fluid class ensures that
images automatically scale with the
container's size.

It's essential for maintaining responsive

design.
Image Shapes
You can easily change the shape of images
using classes like
• .rounded
• .circle
• .thumbnail.
Image Alignment
Bootstrap allows you to align images
horizontally using .float-left and .float-right
classes.
- For vertical alignment, use .align-top,
.align-middle, and .align-bottom classes.
Image Thumbnails
The .img-thumbnail class adds a slight
border and padding to images, creating a
thumbnail effect.
Centering Image
The .mx-auto class centers an image
horizontally within its parent container.
Image Sizing
Control the dimensions of images using
classes like
.w-25 (25% width) or
.h-50 (50% height)
(5) Alerts
• Bootstrap provides alert classes to create visually
appealing and informative messages.

• Alerts are a useful way to convey information or feedback

to users on a web page.

• Alerts are created with the .alert class, followed by one of

the contextual classes
Alert Types
Bootstrap offers various alert styles,
including primary, secondary, success,
danger, warning, and info.
Dismissible Alerts
Dismissible alerts allow users to close them
with an "x" button.
To make it appear, use the
.alert-dismissible class.
Links in Alert
You can add links within alerts to direct users
to relevant pages or actions.

Add the .alert-link class to any links inside the alert

box to create "matching colored links":
Alert Styles
Alerts can have a variety of styles such as
solid backgrounds or outlines.

Customize the style with classes like

• .alert-primary,
• .alert-secondary,
• .alert-light
Animated Alerts
The .fade and .show classes adds a fading
effect when closing the alert message

<div class="alert alert-danger alert-dismissible

fade show">
(6) Buttons
• Buttons are essential elements in web design, used for
various user interactions and calls to action.

• Bootstrap offers a versatile set of button styles, making it

easy to create appealing and interactive buttons.

• Buttons are created with the .btn class, followed by one of

the contextual classes
Button Types
Bootstrap provides various button styles,
including primary, secondary, success,
danger, warning, and info.
Button Sizes
Bootstrap buttons can be customized to
different sizes:
.btn-lg (large),
.btn-sm (small),
.btn-block (full width)
Button States
• Buttons can have different states, such as
active, disabled, or loading.

• Use classes like .active, .disabled, and

.spinner-border for loading buttons.
Button Groups
• You can group buttons together for related actions
using .btn-group and .btn-group-toggle.

<div class="btn-group">
<button type="button" class="btn btn-
primary">Apple</button>
<button type="button" class="btn btn-
primary">Samsung</button>
<button type="button" class="btn btn-
primary">Sony</button>
</div>
(7) Badges
• Badges are small, often colorful, elements used to add information or
notifications to content.

• You can apply badges to various elements, like buttons, headings, and
links.

• Bootstrap provides badge classes for easily creating and styling

badges.

• Use the .badge class together with a contextual class (like .bg-
secondary) within <span> elements to create rectangular badges.
Badge Colors
• Bootstrap allows you to apply different
background colors to badges.
• Common colors include primary,
secondary, success, danger, warning, and
info.
Pill Badges
• To create a rounded badge, use the .
rounded-pill class.

<span class="badge rounded-pill bg-

primary">Primary</span>
(8) Navbar
• Navbars are a critical part of website navigation and user
interaction. It is a navigation header that is placed at the
top of the page.

• Bootstrap offers a versatile and responsive navbar

component for creating top navigation menus.

• A standard navigation bar is created with the .navbar

class.
Navbar Structures
• A Bootstrap navbar typically consists of a
container, a branding/logo section,
navigation links, and optional additional
content.
Responsive Design
• Bootstrap's navbar is designed to
automatically adjust for different screen
sizes.

• It collapses into a mobile-friendly menu on

smaller screens.
Navbar Classes
• Bootstrap provides classes like .navbar,
.navbar-expand, and .navbar-light/dark for
customizing the navbar's appearance.
Brand / Logo
• Include your site's logo and branding in the
navbar for easy recognition.

• The .navbar-brand class is used to highlight the

brand/logo/project name of your page.
Brand / Logo
<nav class="navbar navbar-expand-sm bg-dark
navbar-dark">
<div class="container-fluid">
<a class="navbar-brand"
href="#">Logo</a>
</div>
</nav>
Mobile Navigation
• Bootstrap's navbar automatically converts
to a mobile-friendly menu on smaller
screens.

• Use the responsive toggle button

(hamburger icon) for mobile navigation.
Mobile Navigation
• To create a collapsible navigation bar, use a
button with class="navbar-toggler", data-bs-
toggle="collapse" and data-bs-
target="#thetarget".
• Then wrap the navbar content (links, etc)
inside a <div> element with class="collapse
navbar-collapse", followed by an id that
matches the data-bs-target of the button:
"thetarget".
Mobile Navigation (Full Example)
<nav class="navbar navbar-expand-sm bg-dark <ul class="navbar-nav">
navbar-dark"> <li class="nav-item">
<a class="nav-link" href="#">Link</a>
<div class="container-fluid">
</li>
<a class="navbar-brand" href="#">Logo</a> <li class="nav-item">
<a class="nav-link" href="#">Link</a>
<button class="navbar-toggler" type="button"
</li>
data-bs-toggle="collapse" data-bs-
<li class="nav-item">
target="#collapsibleNavbar">
<a class="nav-link" href="#">Link</a>
<span class="navbar-toggler-icon"></span> </li>
</ul>
</button>
</div>
<div class="collapse navbar-collapse" </div>
id="collapsibleNavbar"> </nav>
Dropdown Menu
• Create dropdown menus within the navbar
to organize and navigate to various sections
of your site.
Dropdown Menu
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button"
data-bs-toggle="dropdown">Dropdown</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Link</a></li>
<li><a class="dropdown-item" href="#">Another
link</a></li>
<li><a class="dropdown-item" href="#">A third link</a></li>
</ul>
</li>
(9) Carousel
• Carousels are a dynamic way to display multiple images or
content items in a rotating sequence.

• Bootstrap offers a responsive and interactive carousel

component for creating image sliders.
Carousel Structures
A Bootstrap carousel typically includes a container, slides,
indicators, and navigation controls.
Responsive Design
• Bootstrap carousels automatically adapt to different
screen sizes.

• They are ideal for showcasing images or content in a

visually appealing way.
Carousel Classes
• Bootstrap provides classes like .carousel and .carousel-
item for creating the carousel structure.

<div id="demo" class="carousel slide" data-bs-ride="carousel">

Slide Content
• You can include images, captions, and additional content in each
carousel slide.

<div class="carousel-inner">
<div class="carousel-item active">
<img src=“apple.jpg" alt=“Apple" class="d-block w-100">
</div>
<div class="carousel-item">
<img src=“mango.jpg" alt=“Mango" class="d-block w-100">
</div>
<div class="carousel-item">
<img src=“banana.jpg" alt=“Banana" class="d-block w-100">
</div>
</div>
Captions to Slides
• Add elements inside <div class="carousel-caption">
within each <div class="carousel-item"> to create a
caption for each slide

<div class="carousel-item">
<img src=“apple.jpg" alt=“Apple">
<div class="carousel-caption">
<h3>Apple</h3>
<p>Apple is a fruit which contains a lot of fiber.</p>
</div>
</div>
Navigation
• Bootstrap carousels come with navigation controls for moving
between slides.
• You can also add custom navigation buttons.

<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-

bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-
bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
Indicators
• Carousel indicators help users identify the current
slide.

• They are typically presented as small dots at the

bottom of the carousel.
Autoplay
• Carousels can be set to automatically cycle
through the slides using the data-interval
attribute.
• By default, autoplay is on. But to turn it off, set the
value of the attribute, data-interval

<div id="demo" class="carousel slide" data-bs-

ride="carousel“ data-interval=“false”>
Carousel (Full Code)
<!-- Carousel -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">

<!-- Indicators/dots -->

<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>

<!-- The slideshow/carousel -->

<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago" class="d-block w-100">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York" class="d-block w-100">
</div>
</div>

<!-- Left and right controls/icons -->

<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
Carousel (Explanation)
Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of
each slide (which indicates how many slides there are in the carousel, and
which slide the user are currently viewing)

.carousel-inner Adds slides to the carousel

.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go
back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go
forward between the slides
.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" button

.carousel-control-next-icon Used together with .carousel-control-next to create a "next" button

.slide Adds a CSS transition and animation effect when sliding from one item to
the next. Remove this class if you do not want this effect
Questions?
Thank you!