BootStrap Important Pointers:

• Vanilla JavaScript refers to plain, pure JavaScript without the use of any frameworks or
libraries like React, Angular, or jQuery.

FEATURES OF BOOTSTRAP:
• Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap
• Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops
• Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework.
• (This means that the base styles are optimized for mobile devices, and as the screen size
increases, additional styles are applied to adjust the layout. The grid system and responsive
utilities are built to first cater to small screens, and then progressively enhance the design for
larger screens.)
• Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome, Firefox,
Edge, Safari, and Opera). Note that if you need support for IE11 and down, you must use
either BS4 or BS3.

• There are two ways to start using Bootstrap 5 on your own web site.

You can:

1.Include Bootstrap 5 from a CDN.

2.Download Bootstrap 5 from getbootstrap.com.

• Bootstrap 5 uses JavaScript for different components (like modals, tooltips, popovers etc).

Layouts in Bootstrap:
There are two layouts in BootStrap to choose from:

• Fixed Layout: This layout has a .container class which provides a responsive fixed width
container.
• Fluid Layout: This layout has a .container-fluid class provides a full width container, spanning
the entire width of the viewport.
• Combining Fluid and Fixed Layouts: You can combine both layouts to make parts of your
design full-width while keeping other parts fixed.

Bootstrap 5 Grid System:

Bootstrap grid system is made of flexbox.
In Bootstrap, the grid system is based on a 12-column layout. This system allows you to create
responsive designs by dividing the width of the page into 12 equal parts.

We divide these layouts by using classes like col-, col-sm-, col-md-, col-lg-, and col-xl- for different
screen sizes.

*col-sm-4 takes 4 out of 12 columns on small screens and larger.

*col-md-6 takes 6 out of 12 columns on medium screens and larger.

Grid Classes:
The Bootstrap 5 grid system has six classes:

.col- (extra small devices - screen width less than 576px).

.col-sm- (small devices - screen width equal to or greater than 576px)

.col-md- (medium devices - screen width equal to or greater than 768px)

.col-lg- (large devices - screen width equal to or greater than 992px)

.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

• Bootstrap has 12 JavaScript plugins.

BootStrap Colors:
Bootstrap 5 has some contextual classes that can be used to provide "meaning through colors".

The classes for text colors are:

• .text-muted =dark gray,

• .text-primary = dark blue,
• .text-success = green,
• .text-info = light blue,
• .text-warning = orange,
• .text-danger = red,
• .text-secondary = gray,
• .text-white = white,
• .text-dark = black,
• .text-body = default body color/often black.
• .text-light = light gray.

Ex:

<p class="text-warning">This text represents a warning.</p>

<p class="text-danger">This text represents danger.</p>

<p class="text-secondary">Secondary text.</p>

The classes for Background Colors:

The classes for background colors are:

• .bg-primary = dark blue,

• .bg-success = green,
• .bg-info = light blue,
• .bg-warning = orange,
• .bg-danger = red,
• .bg-secondary = gray
• .bg-dark = black
• .bg-light = light gray

Note: .text-bg-color is used to automatically handle the appropriate text color for each background
color.

Ex:

<p class="text-bg-warning">This text represents a warning.</p>

<p class="text-bg-danger">This text represents danger.</p>

<p class="text-bg-secondary">Secondary background color.</p>

BootStrap Tables:

The .table class adds basic styling to a table.

Ex: <table class="table">

The .table-striped class adds zebra-stripes to a table

Ex: <table class="table table-striped">

The .table-bordered class adds borders on all sides of the table and cells.

Ex: <table class="table table-bordered">

The .table-hover class adds a hover effect (grey background color) on table rows.

Ex: <table class="table table-bordered table-hover">

The .table-dark class adds a black background to the table.

Ex: <table class="table table-bordered table-hover table-dark">

Combine .table-dark and .table-striped to create a dark, striped table.

Ex: <table class="table table-bordered table-striped table-dark">

The .table-borderless class removes borders from the table.

Ex:<table class="table table-borderless">

Contextual Classes :
Contextual classes can be used to color the whole table (<table>), the table rows (<tr>) or table cells
(<td>).

The contextual classes that can be used are:

.table-primary Blue: Indicates an important action

.table-success Green: Indicates a successful or positive action

.table-danger Red: Indicates a dangerous or potentially negative action

.table-info Light blue: Indicates a neutral informative change or action

.table-warning Orange: Indicates a warning that might need attention

.table-active Grey: Applies the hover color to the table row or table cell

.table-secondary Grey: Indicates a slightly less important action

.table-light Light grey table or table row background

Image Shapes:
1.Rounded Corners: Add the .rounded class to give images smooth, rounded edges.

EX:<img src="image.jpg" class="rounded" alt="Image Description">

2.Circle: Use the .rounded-circle class to make the image circular.

EX:<img src="image.jpg" class="rounded-circle" alt="Image Description">

3.Thumbnail: Apply the .img-thumbnail class to add borders and padding for a thumbnail look.

EX:<img src="image.jpg" class="img-thumbnail" alt="Image Description">

Aligning Images:

1.Float: Use .float-start to float images to the left and .float-end to float them to the right.

EX:<img src="image.jpg" class="float-start" alt="Image Description">

<img src="image.jpg" class="float-end" alt="Image Description">

2.Centered Image: The .mx-auto and .d-block classes center the image within its container.

EX:<img src="image.jpg" class="mx-auto d-block" alt="Image Description">

Responsive Images
Responsive: The .img-fluid class makes images automatically adjust to fit the screen size.

EX:<img src="image.jpg" class="img-fluid" alt="Image Description">

BootStrap Alerts:
Alerts are created with the .alert class, followed by one of the contextual classes .alert-success,
.alert-info, .alert-warning, .alert-danger, .alert-primary, .alert-secondary, .alert-light or .alert-dark:

EX:<div class="alert alert-success">

<strong>Success!</strong> Indicates a successful or positive action.

</div>

1.Alert Links:

Add the .alert-link class to any links inside the alert box to create "matching colored links":

EX:<div class="alert alert-success">

<strong>Success!</strong> You should <a href="#" class="alert-link">read this message</a>.

</div>

2.Closing Alerts:

To close the alert message, add a .alert-dismissible class to the alert container. Then add class="btn-
close" and data-bs-dismiss="alert" to a link or a button element (when you click on this the alert box
will disappear).

EX:<div class="alert alert-success alert-dismissible">

<button type="button" class="btn-close" data-bs-dismiss="alert"></button>

<strong>Success!</strong> This alert box could indicate a successful or positive action.

</div>

3.Animated Alerts:

The .fade and .show classes adds a fading effect when closing the alert message:

EX:<div class="alert alert-danger alert-dismissible fade show">

BootStrap Buttons:
Basic Styles: Bootstrap provides several predefined button styles such as primary, secondary, success,
info, warning, danger, dark, light, and link.

EX:<input type="submit" class="btn btn-success" value="Submit Button">

Outline Buttons: There are also outline/bordered versions of these buttons available.

EX:<button type="button" class="btn btn-outline-primary">Primary</button>

Button Sizes: Buttons can be customized with sizes like large (btn-lg), default, and small (btn-sm).

EX:<button type="button" class="btn btn-primary btn-lg">Large</button>

Block Level Buttons: Use .btn-block to create buttons that span the full width of their parent
element.

EX:<div class="d-grid gap-3">

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

<button type="button" class="btn btn-primary btn-block">Full-Width Button</button>

</div>

Active/Disabled States: Buttons can be made active using the .active class and disabled using the
disabled attribute or .disabled class.

EX:<button type="button" class="btn btn-primary active">Active Primary</button>

<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>

<a href="#" class="btn btn-primary disabled">Disabled Link</a>

Spinner Buttons: Spinners can be added to buttons for indicating loading states using Bootstrap's
spinner classes.

EX:<button class="btn btn-primary">

<span class="spinner-border spinner-border-sm"></span>

</button>