Introduction to

Computing
(CCIS1101)
Mark Christopher Borja
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/b
ootstrap/4.5.2/css/bootstrap.min.css">
• <script
src="https://cdn.bootstrapcdn.com/bo
otstrap/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 <ul class="navbar-nav">
bg-dark navbar-dark"> <li class="nav-item">
<a class="nav-link" href="#">Link</a>
<div class="container-fluid">
</li>
<a class="navbar-brand" <li class="nav-item">
href="#">Logo</a> <a class="nav-link" href="#">Link</a>
</li>
<button class="navbar-toggler"
<li class="nav-item">
type="button" data-bs-toggle="collapse"
<a class="nav-link" href="#">Link</a>
data-bs-target="#collapsibleNavbar">
</li>
<span class="navbar-toggler- </ul>
icon"></span> </div>
</div>
</button>
</nav>
<div class="collapse navbar-collapse"
id="collapsibleNavbar">
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
.carousel
.carousel-indicators
.carousel-inner
.carousel-item
.carousel-control-prev
.carousel-control-next
.carousel-control-prev-icon
.carousel-control-next-icon
.slide
Description
Creates a carousel
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)
Adds slides to the carousel
Specifies the content of each slide
Adds a left (previous) button to the carousel, which allows the user to go
back between the slides
Adds a right (next) button to the carousel, which allows the user to go
forward between the slides
Used together with .carousel-control-prev to create a "previous" button
Used together with .carousel-control-next to create a "next" button
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!