38 42 Bootstrap

FRONTEND ENGINEERING-I
(24CSE0102)
Department of Computer Science and Engineering,

Chitkara University, Punjab
Dr. Neha Sharma

Bootstrap
Bootstrap
• Bootstrap was developed by Mark Otto and Jacob Thornton at

Twitter, and released as an open source product in August
2011 on GitHub.
• In June 2014 Bootstrap was the No.1 project on GitHub!
Why use Bootstrap
• Mobile first approach:

Since Bootstrap 3, the framework
consists of Mobile first styles throughout the
entire library instead of in separate files.
• Browser Support:
It is supported by all popular browsers.
Why use Bootstrap?
• Easy to get started:

With just the knowledge of
HTML and CSS anyone can get
started with Bootstrap. Also the
Bootstrap official site has a good
documentation.
• Responsive design:
Bootstrap's responsive CSS
adjusts to Desktops, Tablets and
Mobiles.
What Bootstrap Package
Includes?
• Scaffolding: Bootstrap provides a basic structure with

Grid System, link styles, background.
• CSS: Bootstrap comes with feature of global CSS
settings, fundamental HTML elements styled and
ehanced with extensible classes, and an advanced grid
system.
• Components: Bootstrap contains over a dozen reusable
components built to provide iconography, dropdowns,
navigation, alerts, popovers, and much more.
What Bootstrap Package
Includes?
• JavaScript Plugins: Bootstrap contains over a dozen

custom jQuery plugins. We can easily include them all,
or one by one.
• Customize: We can customize Bootstrap's components,
LESS variables, and jQuery plugins to get your very
own version.
• Download Bootstrap
Download the latest version of Bootstrap from
http://getbootstrap.com/
File structure
• PRECOMPILED
BOOTSTRAP
Once the compiled version
Bootstrap is downloaded,
extract the ZIP file, and see
the file/directory structure.
• As we can see there are
compiled CSS and JS
(bootstrap.*), as well as
compiled and minified CSS
and JS (bootstrap.min.*).
Fonts from Glyphicons are
included, as is the optional
Bootstrap theme.
Basic HTML Template
using Bootstrap:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="css/bootstrap.min.css" rel="stylesheet">



</head>
<body>
<h1>Hello, world!</h1>

<script src=“https://code.jquery.com/jquery.js”></script>

<script src="js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap Breakpoint
• Breakpoints in Bootstrap are used to create responsive

designs. We may adjust them at a particular viewport or
device size.
• CSS media queries allow us to customize styling based on

browsers and operating sytem parameters. Media queries in
Boostrap mostly use min-width to control the breakpoints.
• Bootstrap's goal is mobile-first, responsive designs.

Bootstrap creates mobile-friendly layouts with minimal
styles, adding layers for larger devices. It improves
rendering time and gives users a better viewing experience.
Types of breakpoints
• Bootstrap provides six default breakpoints referred to as grid tiers. These

can be customized if we use Boostrap's source Sass files.
Types of breakpoints
These breakpoints cover common device sizes and viewport dimensions. These
bootstrap breakpoints can be changed using Sass
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px );
Media queries
Bootstrap is developed to be mobile

first, hence media queries are used
to create wise breakpoints for its
layouts and interfaces. Minimum
viewport widths are used to control
breakpoints which scale up
elements as viewport changes.
Min-width
min-width media feature state specifies the minimum screen

width of a specific device. Setting min-width in the
breakpoints means CSS is only applied to devices whose
width is greater than min-width of the device.
The above syntax means that CSS would be applied for

devices larger than the min-width i.e Small devices
(landscape phones, 576px and up).
Min-width
<!DOCTYPE html>
<html lang="en">
<head> <title>Bootstrap - Breakpoint</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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.bundle.min.js">
</script>
<style>
.custom-class {
display: none;
}
@media (min-width: 768px)
{ .custom-class {
display: block; } @media (min-width: 768px) { .custom-class { display: block; } } </style> </head>
Min-width
<body>
<h5>This block is visible on all devices</h5>
<div class="container-fluid mt-2 "> <div class="row">
<div class="col-md-6 bg-warning p-3"> md-6 warning
</div>
</div>
</div><br>
<h5>This block is not visible for sm breakpoint but visible for other breakpoints</h5>
<div class="container-fluid mt-2 custom-class">
<div class="row">
<div class="col-md-6 bg-warning p-3"> md-6 warning
</div>
</div>
</div>
</body>
</html>
Max-width
max-width media feature states the maximum screen width of a

specific device. Setting max-width in the breakpoints means
CSS is only applied to devices whose width is smaller than
mentioned in the media query.
The above syntax means that CSS would be applied to

large devices (desktops, less than 1200px).
Max-width
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Breakpoint</title>
<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.bundle.min.js"> </script>
<style>
.custom-class {
display: none;
}
@media (max-width: 767.98px) {
.custom-class {
display: block;
}
}
</style>
Max-width
<body>
<h5>This block visible on all devices</h5>
<div class="container-fluid mt-2">
<div class="row">
<div class="col-xxl-3 bg-primary text-black p-3">
xxl-3 primary
</div>
</div>
</div>
<h5>This block not visible all devices larger than sm</h5>
<div class="container-fluid mt-2 custom-class">
<div class="row">
<div class="col-lg-6 bg-warning text-black p-3">
lg-6 warning
</div>
</div>
</div>
</body>
</html>
Single Breakpoint
Single breakpoint means targeting a specific screen sizes using

minimum and maximum breakpoint widths in media queries.
The above syntax means that CSS would be applied for

devices with screen sizes between @media (min-width:
768px) and (max-width: 991.98px) { ... } (i.e medium
sized devices such as tablets, desktops)
Between Breakpoint
Between breakpoints target multiple breakpoints.
Above syntax results in @media (min-width: 892px) and

(max-width: 1278px) { ... }, which means styles are
applied starting from medium devices and up to extra large
devices.
What is Bootstrap Grid
System?
Bootstrap includes a responsive, mobile first fluid grid system
that appropriately scales up to 12 columns as the device or
view port size increases. It includes predefined classes for
easy layout options, as well as powerful mixins for
generating more semantic layouts.
Bootstrap 3 is mobile first in the sense that the code for
Bootstrap now starts by targeting smaller screens like mobile
devices, tablets, and then “expands” components and grids
for larger screens such as laptops, desktops.
Bootstrap's grid system is a responsive layout tool that uses
containers, rows, and columns to align content.
Use a .container class for a responsive fixed width container.
Example
<!DOCTYPE html>
<html lang="en">
<head> <title>Bootstrap - Grid</title>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]
alpha3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center">
<div class="row mt-2">
<div class="col p-2 bg-primary"> First Column
</div>
<div class="col p-2 bg-warning"> Second Column
</div>
<div class="col p-2 bg-info"> Third Column
</div>
</div>
</div>
</body>
Working of Bootstrap Grid
System
Bootstrap grid supports six responsive breakpoints. Breakpoints affect all sizes above
it (such as sm, md, lg, xl, xxl), allowing you to control container and column sizing
and behavior at each breakpoint.
Containers center and horizontally pad your content. Use .container for responsive
pixel width or .container-fluid for full width across all viewport and device sizes.
For various breakpoints the responsive container classes are used.
Rows are wrappers for columns. Each column contains horizontal padding. This
padding is then applied to rows with negative margins. In this manner, all the
content in the columns, is left-aligned.
Rows supports modification classes for uniform column sizing column sizing and
gutter classes for changing the spacing of your text.
System
Columns are incredibly flexible. You can create various elements combination with
any number of columns using one of the 12 template columns available per row.
Column widths are set in percentages for fluid and relative sizing to parent element.
Gutters are responsive and customizable. They are available for all the viewports and
are of same size as margin and padding. You can modify gutters by using the .gx-
* (for horizontal gutters), .gy-* (for vertical gutters), .g-* (for all gutters) and .g-0
to remove gutters.
To create more semantic markup, you can use predefined grid's source Sass mixins.
System
There are six classes in Bootstrap Grid System:
• Extra small (.col-xs)
• Small (.col-sm-)
• Medium (.col-md-)
• Large (.col-lg-)
• Extra large (.col-xl-)
• Extra extra large (.col-xxl-)

System
How the grid varies over these breakpoints is shown in the below table:
Auto-layout columns
For easy column sizing without an explicit

numbered class, use breakpoint-specific column
classes like .col-sm-6.
Equal-width
• Use equal-width grid system to create the grid in
equal sizes.
• Two grid layouts work on any device size
from xs to xxl. For each breakpoint, you can add
many unit-less classes, and each column/row
will have the same width.
Equal Width Example
<!DOCTYPE html>
<html lang="en">
<head> <title>Bootstrap - Grid</title>
<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/bo
otstrap.bundle.min.js"></script> </head>
<body>
<h5>Equal columns</h5>
<div class="col p-2 bg-primary"> First Column </div>
<div class="col p-2 bg-info"> Second Column </div> </div>
<h5>Equal rows</h5> <div class="col mt-2">
<div class="row p-2 bg-warning text-white"> First Row </div>
<div class="row p-2 bg-secondary text-white"> Second Row </div>
<div class="row p-2 bg-success text-white"> Third Row </div> </div>
</div>
</body>
</html>
Setting one column width
You can choose one column width and other

columns automatically resize around it.
Use grid classes, mixins, or inline widths. You can

resize the other columns no matter the width of
the center column.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Grid</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
</head>
<body>
<div class="col-6 p-2 bg-primary text-white">
First Column (col-6)
</div>
<div class="col-3 p-2 bg-secondary text-white">
Second Column (col-3)
</div>
<div class="col p-2 bg-warning text-white">
Third Column (col)
</div>
</div>
</div>
</body>
</html>
Variable width content
Use col-{breakpoint}-auto classes to size columns

according to the content's natural width.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
<script
></script>
</head>
<body>
<div class="row justify-content-md-center mt-2">
<div class="col col-lg-2 p-2 bg-primary ">
First Column
</div>
<div class="col-md-auto p-2 bg-info ">
Second column with variable width content.
</div>
<div class="col col-lg-2 p-2 bg-warning">
Third Column
</div>
</div>
</div>
</body>
</html>
Responsive classes
In Bootstrap, grid has six tiers of predefined classes

which is used to create complex responsive
layouts. You can customize the columns/row to
small, medium, large, or extra-large devices.
All breakpoints
Use the .col and .col-* classes for

grids that are consistent across all
sizes of devices. If you require a
column of a specific size then use a
numbered class.
Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
></script>
</head>
<body>
<h5>Columns</h5>
<div class="col p-2 bg-primary">First Column</div>
<div class="col p-2 bg-warning">Second Column</div>
<div class="col p-2 bg-light">Third Column</div>
</div>
<h5>Rows</h5>
<div class="col mt-2">
<div class="row-9 p-2 bg-info">First Row</div>
<div class="row-3 p-2 bg-success">Second Row</div>
</div>
</div>
</body>
</html>
Stacked to horizontal
Use .col-sm-* classes to build a simple grid
system that is stacked on extra small and
small devices and becomes horizontal on
larger devices.
Note: Resize the browser to check the
effect on various devices.
Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
></script>
</head>
<body>
<h5>Columns</h5>
<div class="col-sm-6 p-2 bg-primary text-white">First Column</div>
<div class="col-sm-3 p-2 bg-success text-white">Second Column</div>
<div class="col-sm-2 p-2 bg-dark text-white">Third Column</div>
</div>
<h5>Rows</h5>
<div class="col mt-2">
<div class="row-sm p-2 bg-info">First row</div>
<div class="row-sm p-2 bg-warning">Second row</div>
</div>
</div>
</body>
</html>
Mix and match
Use a combination of various classes for
each tier to easily stack the columns in
some grid tiers according to your needs.
Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
></script>
</head>
<body>
<div class="col-sm-4 p-2 bg-primary text-white">First column of col-sm-4</div>
<div class="col-3 p-2 bg-secondary text-white">Second column of col-3</div>
</div>
<div class="col-4 col-md-2 p-2 bg-warning text-white">First column of col-4
col-md-2</div>
<div class="col-4 col-md-2 p-2 bg-secondary text-white">Second column of col-4 col-md-
2</div>
<div class="col-4 col-md-2 p-2 bg-info text-white">Third column of col-4 col-md-2</div>
</div>
<div class="col-sm-3 p-2 bg-dark text-white">First column of col-sm-3</div>
<div class="col-md-6 p-2 bg-success text-white">Second column of col-md-6</div>
Row columns
• Bootstrap grid provides row column classes to create simple grid layouts.
• Individual rows are included in .row* class.
• Individual columns are included in .col* class.
• Use .row-cols-* class to set the number of columns in a single row.
• Use .row-cols-auto to adjust the column's size based on its content.
Create two different columns using .row-cols-2 class.

Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></
script>
</head>
<body>
<div class="row row-cols-2">
<div class="col bg-info p-2">First Row First Column</div>
<div class="col bg-primary p-2">First Row Second Column</div>
<div class="col bg-warning p-2">Second Row First Column</div>
</div>
</div>
</body>
</html>
Row columns
Create three different columns using .row-cols-3 class.

Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container text-center mt-2">
<div class="row row-cols-3 mt-2">
<div class="col bg-info p-2">First Row First Column</div>
<div class="col bg-light p-2">First Row Second Column</div>
<div class="col bg-primary p-2">First Row Third Column</div>
<div class="col bg-secondary p-2">Second Row First Column</div>
<div class="col bg-success p-2">Second Row Second Column</div>
<div class="col bg-warning p-2">Second Row Third Column</div>
</div>
</div>
</body>
</html>
Row columns
Create grids of rows and columns using row-cols-auto

class.
Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
</head>
<body>
<div class="row row-cols-auto">
<div class="col bg-primary p-2">First Row First Column</div>
<div class="col bg-secondary p-2">First Row Second Column</div>
<div class="col bg-warning p-2">First Row Third Column</div>
<div class="col bg-info p-2">First Row Fourth Column</div>
<div class="col bg-success p-2">First Row Fifth Column</div>
<div class="col bg-light p-2">First Row sixth Column</div>
<div class="col bg-danger p-2">Second Row First Column</div>
</div>
</div>
</body>
</html>
Row columns
Create four different columns using row-cols-4 class.

Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
</head>
<body>
<div class="col bg-light p-2">Second Row First Column</div>
<div class="col bg-danger p-2">Second Row Second Column</div>
</div>
</div>
</body>
</html>
Row columns
Using row-cols-1, row-cols-sm-3 and row-cols-md-6

classes.
Example
<!DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
</head>
<body>
<div class="col bg-light p-2">Second Row First Column</div>
<div class="col bg-danger p-2">Second Row Second Column</div>
</div>
</div>
</body>
</html>
Nesting
A nesting grid system adds rows and columns of the

grid in single cell of an existing grid. The nested
rows should consist of a group of columns whose
total does not exceed 12 (it is not necessary to
utilize all 12 columns)..
Example
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="col-sm bg-primary p-2">
First Column
</div>
<div class="col-sm bg-info p-2">
<div class="container">
<div class="row">
<div class="col col-sm bg-light">
Second Column
</div> <div class="col col-sm bg-light">
Second Column
</div></div></div></div>
<div class="col-sm bg-primary p-2"> Third Column </div> </div> </div> </body> </html>
Bootstrap - Utilities
Several utility classes are used for various changes,

such as showing, hiding, aligning, and spacing
content, these are used to create mobile-friendly
and responsive websites
Changing display
Bootstrap display properties can be used to configure

the display. Mix it with a grid system, content, or
component to display or hide them on particular
viewports.
Bootstrap Display
In Bootstrap, the display property is used to control

the visibility and behavior of elements. It allows
you to define how an element should be rendered
and positioned within the document layout.
Notation
• Utility classes that are applicable to all breakpoints, ranging
from xs to xxl, do not have any abbreviation for breakpoints.
• These classes are implemented from a min-width: 0; and beyond and
not restricted by media query.
• The remaining breakpoints do contain an abbreviation for the breakpoint.
Bootstrap Display
Following format is used in naming the display classes:

• .d-{value} for xs, such as .d-none.
• .d-{breakpoint}-{value} for sm, md, lg, xl and xxl, such as .d-lg-none sets
display: none; on lg, xl, and xxl screens.
{value} can be one of the following:

• none
• inline
• inline-block
• block
• grid
• inline-grid
• table
• table-cell
• table-row
• flex
• inline-flex
Bootstrap Display
Some of the values display property take, are as follows:

• .d-none: This value hides the element completely, making it invisible and
not taking up any space in the layout.
• .d-inline: This value makes the element behave like an inline element,
allowing other elements to be displayed alongside it on the same line.
• .d-block: This value makes the element behave like a block-level element,
causing it to start on a new line and take up the full available width.
• .d-inline-block: This value combines the characteristics of both inline and
block elements. The element is displayed inline, allowing other elements to
be displayed alongside it.
.d-inline example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Display</title>
</head>
<body>
<div class="container m-3 p-5">
<div class="d-inline m-2 p-4 text-bg-success">d-inline - success</div>
<div class="d-inline p-4 text-bg-warning">d-inline - warning</div>
</div>
</body>
</html>
Bootstrap Display
. .d-block example:
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Display</title>
</head>
<body>
<div class="container mt-3">
<h4>Display - block</h4>
<span class="d-block p-4 text-bg-info">d-block used for info</span>
<span class="d-block p-4 text-bg-primary">d-block used for primary</span>
</div>
</body>
</html>
Margin and padding
• Use margin and padding utilities to modify the element's spacing and sizing.
It has a six-level spacing scale for spacing utilities based on 1rem default
$spacer variable.
• You can select certain viewports (e.g., .me-sm-3 for margin-right: 1rem —in
LTR— starting at the sm breakpoint), or values for the viewports (e.g., .me-3
for margin-right: 1rem in LTR).
Toggle visibility
• Visibility utilities allow you to toggle an element's visibility. Invisible

elements continue to affect page layout but are hidden from visitors.
• Following are the visibility classes provided by Bootstrap:
• .visible - It is the default setting. The visible class shows data or visible data on
the web page.
• .invisible - It is used to hide or disappear the content of the application .
Visibility utility classes
• The utility classes that controls the visibility of the content on the webpage.
• The text on the webpage is visible due to the use of visibility class ".visible".
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Visibility</title>
</head>
<body>
<h4 class="display-5 text-success">
Visibility utility classes
</h4>
</div>
<div class="container mx-5 p-3">
<strong>The utility classes that controls the visibility of the content on the webpage.</strong>
<p class="visible text-bg-primary">
The text on the webpage is visible due to the use of visibility class ".visible".
</p>
<p class="invisible">
The text on the webpage is not visible due to the use of visibility class ".invisible".
</p>
<p class="text-bg-warning">This is the text that is without a visibility class usage.</p>
Bootstrap Components
Bootstrap Components
The alert messages are often the stand out messages shown to the user, where
some user action is required, such as warning, error, information or
confirmation messages.
By extending the .alert base class with the contextual classes (such as .alert-
success, .alert-warning, .alert-info, etc.), you can quickly and simply build
attractive alert messages for any number of reasons using Bootstrap. To cancel
any alert, you may also include an optional close button.
Simple Alerts
There is a total of 8 different alert types offered by Bootstrap. The most typical
alerts, such as success, error or danger, warning and info alerts, etc.
Alert - Example
Alert - Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap - Alerts</title>
</head>
<body>
<h4 class="fs-2">Examples of alert messages</h4>
<div class="alert alert-primary" role="alert">
It is a primary alert box! </div>
<div class="alert alert-secondary" role="alert">
It is a secondary alert box! </div>
<div class="alert alert-success" role="alert">
It is a success alert box! </div>
<div class="alert alert-danger" role="alert">
It is a danger alert box! </div>
<div class="alert alert-warning" role="alert">
It is a warning alert box! </div>
<div class="alert alert-info" role="alert">
It is an info alert box! </div>
<div class="alert alert-light" role="alert"> It is a light alert box! </div>
<div class="alert alert-dark" role="alert">
It is a dark alert box!
</div>
</div>
</body>
</html>
Bootstrap Buttons
Base button
Add .btn class that implements basic styles such as padding and content
alignment. The .btn class provides a transparent border, a background color,
and no explicit focus and hover styles.
Example
<!DOCTYPE html>
<html>
<head>
rel="stylesheet">
<script
script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary">Base Button </button>
</body>
</html>
Variants
Bootstrap includes different styles of buttons, each serving its own
semantic purpose, with some extras thrown in for further control. To
achieve the button styles, Bootstrap provides following classes:
• .btn
• .btn-default
• .btn-primary
• .btn-success
• .btn-info
• .btn-warning
• .btn-danger
• .btn-link
Example
<DOCTYPE html>
<html lang="en">
<head>
rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
></script>
<title>Bootstrap - Buttons</title>
</head>
<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
</body>
Bootstrap Dropdowns
The .btn class can be converted into a dropdown menu/toggle with some markup
changes.
Example
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap - Dropdowns</title>
rel="stylesheet">
<script
script>
</head>
<body>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-
expanded="false">
Dropdown Button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Create Account</a></li>
<li><a class="dropdown-item" href="#">Sign in</a></li>
<li><a class="dropdown-item" href="#">Sign out</a></li>
</ul>
Bootstrap Modals
Modals are a type of component that are used to display content or messages in a
customizable dialog box that overlays the current page.
• Modals can be used for a variety of purposes such as displaying images, videos, forms,
and notifications.
• Modals are useful for creating a user-friendly and interactive interface because they allow
users to interact with content without leaving the current page.
• They can also be easily customized using Bootstrap's built-in classes and JavaScript
plugins.
• Modal gets closed automatically when the modal backdrop is clicked.
• Only one modal window at a time is supported by Bootstrap.
• It is advised to avoid nesting a .modal within another element. Rather place your modal
in a top-level position to avoid any interference from other elements.
• Using modals on mobile devices comes with certain limitations because of position:
fixed.
• Animation effect of the modal component depends upon the prefers-reduced-
motion media query.
• The autofocus HTML attribute is ineffective in Bootstrap modals because of the way
HTML5 defines its semantics. A comparable result can be attained by employing specially
crafted JavaScript code.
Bootstrap Modals
Modal components:
• Modal header - Contains the title and a close button.
• Modal body - Contains the content of the modal.
• Modal footer - Contains buttons or other actions that may be available to the
user.
• Modal backdrop - A semi-transparent overlay that covers the background
when the modal is active.
• Modal content - The container that houses the header, body, and footer
components.
• Modal dialog - The outermost container that defines the size of the modal
and the location of the content within it.
Example
<html>
<head>
<title>Bootstrap - Modal</title>
rel="stylesheet">
<script
script>
</head>
<body style="text-align: center;">
<div class="container mt-3" style="width: 700px;">
<h4>Static Modal</h4>

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-
target="#exampleModal">Launch modal</button>

<div class="modal" id="exampleModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-
Example (Contd..)
<button type="button"
class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-
body"><strong><h4>Example of a Static Modal</h4></strong></div>
<div class="modal-footer">
class="btn btn-danger" data-bs-dismiss="modal">Close</button>
class="btn btn-success">Save</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

38 42 Bootstrap

Uploaded by

Copyright:

Available Formats

38 42 Bootstrap

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

38 42 Bootstrap

Uploaded by

Copyright:

Available Formats

FRONTEND ENGINEERING-I

Department of Computer Science and Engineering,

Dr. Neha Sharma

• Bootstrap was developed by Mark Otto and Jacob Thornton at

• Mobile first approach:

• Easy to get started:

• Scaffolding: Bootstrap provides a basic structure with

• JavaScript Plugins: Bootstrap contains over a dozen

• Breakpoints in Bootstrap are used to create responsive

• CSS media queries allow us to customize styling based on

• Bootstrap's goal is mobile-first, responsive designs.

• Bootstrap provides six default breakpoints referred to as grid tiers. These

Bootstrap is developed to be mobile

min-width media feature state specifies the minimum screen

The above syntax means that CSS would be applied for

max-width media feature states the maximum screen width of a

The above syntax means that CSS would be applied to

Single breakpoint means targeting a specific screen sizes using

The above syntax means that CSS would be applied for

Between breakpoints target multiple breakpoints.

Above syntax results in @media (min-width: 892px) and

There are six classes in Bootstrap Grid System:

• Extra small (.col-xs)

• Extra large (.col-xl-)

• Extra extra large (.col-xxl-)

For easy column sizing without an explicit

You can choose one column width and other

Use grid classes, mixins, or inline widths. You can

Use col-{breakpoint}-auto classes to size columns

In Bootstrap, grid has six tiers of predefined classes

Use the .col and .col-* classes for

Create two different columns using .row-cols-2 class.

Create three different columns using .row-cols-3 class.

Create grids of rows and columns using row-cols-auto

Create four different columns using row-cols-4 class.

Using row-cols-1, row-cols-sm-3 and row-cols-md-6

A nesting grid system adds rows and columns of the

Several utility classes are used for various changes,

Bootstrap display properties can be used to configure

In Bootstrap, the display property is used to control

Following format is used in naming the display classes:

{value} can be one of the following:

Some of the values display property take, are as follows:

• Visibility utilities allow you to toggle an element's visibility. Invisible

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="container mt-3">

<h4 class="fs-2">Examples of alert messages</h4>

<div class="alert alert-primary" role="alert">

It is a primary alert box! </div>

<div class="alert alert-secondary" role="alert">

It is a secondary alert box! </div>

<div class="alert alert-success" role="alert">

It is a success alert box! </div>

<div class="alert alert-danger" role="alert">

It is a danger alert box! </div>

<div class="alert alert-warning" role="alert">

It is a warning alert box! </div>

<div class="alert alert-info" role="alert">