INTRO TO

BOOTSTRAP
PREPARED BY: JAY-LOURD E. CALLUENG
OBJECTIVES
AT THE END OF THIS TOPIC, THE STUDENTS WILL BE
ABLE TO:

-Create Responsive Layouts

-Implement Basic Forms
-Enhance Development Efficiency
BOOTSTRAP
Bootstrap is a popular open-source CSS
framework used to build responsive and
mobile-first websites. It simplifies front-
end development with pre-designed
styles, components, and utilities.
WHY BOOTSTRAP?
•Mobile-first: All designs are built to adapt to
smaller screens first.
•No jQuery: Bootstrap 5 removed jQuery
dependency, making it faster and more
lightweight.
•Customizable: Easily override default styles
through CSS variables or Sass files.
CONTAINERS AND GRID
The grid system in Bootstrap 5 is based on a
12-column layout, making it easy to design
flexible and responsive layouts.
Containers:

is the foundational layout element used to align

and center content within a page.
Containers are essential for creating layouts and
are used to wrap rows and columns. They provide
structure and spacing for your website.
 TYPES OF CONTAINER
Fixed Container
•Afixed container in Bootstrap 5 has a specific width that changes
depending on the screen size (breakpoints).
•The width is centered on the page, and it provides consistent
alignment of content.
•It does not stretch to the full width of the screen, making it ideal for
layouts where you want content to stay within certain bounds.
 SAMPLE OF FIXED
CONTAINER

<!-- Fixed Container -->

<div class="container bg-light p-4 mb-4">
<h2>Fixed Container</h2>
<p>The width of this container is fixed and changes based on the screen size
(breakpoints).</p>
<div class="row">
<div class="col-4 bg-primary text-white text-center p-2">Column 1</div>
<div class="col-4 bg-success text-white text-center p-2">Column 2</div>
<div class="col-4 bg-danger text-white text-center p-2">Column 3</div>
</div>
</div>
Fluid Container (container-fluid)

•A fluid container spans the entire width of the

viewport, regardless of the screen size.
•It is useful for creating full-width layouts where you
want the content to stretch and utilize the whole screen.

Key Feature:
•Always 100% width on all screen sizes.
 SAMPLE OF FLUID
CONTAINER

<!-- Fluid Container -->

<div class="container-fluid bg-light p-4 mb-4">
<h2>Fluid Container</h2>
<p>The width of this container spans the entire viewport, regardless of screen size.</p>
<div class="row">
<div class="col-4 bg-primary text-white text-center p-2">Column 1</div>
<div class="col-4 bg-success text-white text-center p-2">Column 2</div>
<div class="col-4 bg-danger text-white text-center p-2">Column 3</div>
</div>
</div>
Grid System:

The grid system in Bootstrap 5 is a

responsive, 12-column layout system that
allows you to structure and organize content
into rows and columns. It is the backbone of
Bootstrap's responsive design capabilities.
Key Features:
1.12 Columns: Each row can have up to 12 columns, and columns can be
combined (e.g., 6+6, 4+8).
2.Responsive Breakpoints: Columns automatically adjust based on
screen size (sm, md, lg, xl, xxl).
3.Nested Grids: Grids can be nested to create more complex layouts.

Structure:
•Row: Used to create a horizontal group of columns.
•Column: Defines the width of the content within the row.

-The grid divides content into rows and columns

-You can customize the width of each column using classes like
(col-6, col-4 etc.)
 SAMPLE OF GRID

<!-- Grid System Example -->

<div class="container bg-light p-4 mb-4">
<h2>Grid System Example</h2>
<p>The grid system divides the row into 12 columns. You can adjust the column widths as
needed.</p>
<div class="row">
<div class="col-6 bg-warning text-dark text-center p-2">6 Columns</div>
<div class="col-6 bg-info text-white text-center p-2">6 Columns</div>
</div>
<div class="row mt-3">
<div class="col-4 bg-secondary text-white text-center p-2">4 Columns</div>
<div class="col-8 bg-dark text-white text-center p-2">8 Columns</div>
</div>
Typography
Bootstrap 5 provides various typography
utilities for headings, paragraphs,
alignment, and more.
<!-- Typography -->
<div class="container my-5">
<h1 class="display-1 text-primary">Heading 1 (Display)</h1>
<h2 class="text-secondary">Heading 2 (Secondary Text)</h2>
<h3 class="text-success">Heading 3 (Success Color)</h3>
<p class="lead text-muted">This is a lead paragraph with muted color.</p>
<p class="text-danger fw-bold">This is a bold paragraph with danger color.</p>
<p class="text-warning fst-italic">This is an italicized paragraph with warning color.</p>
<p class="text-end text-info">This paragraph is aligned to the right with an info color.</p>
</div>
SAMPLE OF TYPOGRAPHY
Colors
Bootstrap provides utility classes for text and
background colors.
<!-- Colors -->
<div class="container my-5">
<h2 class="text-center">Color Utilities</h2>
<div class="row text-white">
<div class="col bg-primary p-3">Primary Background</div>
<div class="col bg-secondary p-3">Secondary Background</div>
<div class="col bg-success p-3">Success Background</div>
</div>
<div class="row text-white mt-3">
<div class="col bg-danger p-3">Danger Background</div>
<div class="col bg-warning text-dark p-3">Warning Background</div>
<div class="col bg-info p-3">Info Background</div>
</div>
</div>
SAMPLE OF COLORS
BUTTON
are used to trigger actions or navigate to different parts of a website. They
come in various styles and sizes, which can be customized using built-in
classes.
<!-- Buttons -->
<div class="container my-5"> <button class="btn btn-primary">Primary
<h2>Buttons</h2> Button</button>
<button class="btn btn- <button class="btn btn-danger">Danger
primary">Primary Button</button> Button</button>
<button class="btn btn- <button class="btn btn-outline-success">Outline
secondary">Secondary Button</button> Success Button</button>
<button class="btn btn- <button class="btn btn-secondary btn-lg">Large
success">Success Button</button> Secondary Button</button>
<button class="btn btn-
danger">Danger Button</button>
</div>
 Key Features:
• Predefined styles for primary, secondary, success, danger, warning, etc.
• Supports outline and disabled styles.
• Can be used as links or form controls.
CARDS
are flexible and extensible content containers. They are used to
group text, images, and links together in a structured way.

<!-- Centering the Card -->

<div class="d-flex justify-content-center align-items-center vh-100">
<div class="card" style="width: 18rem;">
<!-- Image from Link -->
<img src="https:" class="card-img-top" alt="Card Image">
<div class="card-body">
<h5 class="card-title">Centered Card Title</h5>
<p class="card-text">This is a centered card example with an image link.</p>
<a href="#" class="btn btn-primary">Go Somewhere</a>
</div>
</div>
</div>
 Key Features:

-Can contain headers, footers, images, and links.

-Can be used with grids and columns for layouts.
-Flexible size and alignment options.
ALERTS
are used to display messages or notifications to the user. They
can be styled based on the context, such as success, error, or
warning.
<div class="alert alert-success" role="alert">
This is a success alert with a success message!
</div>
<div class="alert alert-danger" role="alert">
This is a danger alert indicating an error.
</div>
<div class="alert alert-warning alert-dismissible
fade show" role="alert">
This is a dismissible warning alert.
<button type="button" class="btn-close" data-
bs-dismiss="alert" aria-label="Close"></button>
</div>
Key Features:
-Multiple contextual classes like alert-success, alert-danger, etc.
-Dismissible alerts with the close button.
-Lightweight and customizable.
FORMS
are used to display messages or notifications to the user. They
can be styled based on the context, such as success, error, or
warning.
TRY IT OUT!
Key Additions:

1.Success Alert:
•The div with the class alert alert-success shows a green success message.
•The d-none class is used to initially hide the alert.

2.JavaScript to Display the Alert:

•The form has an id="myForm" to add an event listener for the submit action.
•The submit event is prevented using event.preventDefault() to avoid refreshing the page.
•When the form is submitted, the success alert (#successAlert) is shown by removing the d-none
class.
•After 5 seconds, the alert will automatically disappear again using setTimeout.

Behavior:
•When the form is submitted, the success message "Submitted Successfully!" will appear in a green
Bootstrap alert box.
•The alert will hide itself after 5 seconds.
CONCLUSION
Bootstrap 5 is a valuable tool for PHP development due
to its ease of use, flexibility, and ability to enhance the
frontend without the need for deep design expertise.

By using Bootstrap, PHP developers can focus more on

writing business logic and backend functionality while
relying on a robust and well-tested framework for the
frontend, making it an ideal choice for modern web
applications.