II.

Grid System: Bootstrap includes a responsive grid system that allows

developers to create flexible and dynamic layouts. The grid system is based on
a 12-column layout, making it easy to create responsive designs and organize
content.

III. CSS Components: Bootstrap provides a variety of CSS components, such as

navigation bars, buttons, forms, typography, and more. These components are
styled and pre-designed, allowing developers to easily integrate them into their
projects.

IV. JavaScript Plugins: Bootstrap includes a set of JavaScript plugins that

enhance the functionality of web pages. These plugins cover common features
like modals, carousels, tooltips, and popovers, among others.

V. Customization: While Bootstrap provides a default set of styles and

components, it is highly customizable. Developers can use the Bootstrap
source files and customize the framework according to their project's specific
needs. Bootstrap can also be integrated with other CSS frameworks or pre-
processors like Sass or Less.

VI. Community and Documentation: Bootstrap has a large and active

community, which means there is a wealth of resources, tutorials, and third-
party themes available. The official documentation is comprehensive and
provides detailed information on how to use each component, making it easier
for developers to get started.

VII. Cross-Browser Compatibility: Bootstrap is designed to be compatible with

various web browsers, ensuring consistent and reliable performance across
different platforms.

What is new in Bootstrap 5?

I. Major Rewrite of the Entire Framework: Bootstrap 5 represents a major

rewrite of the entire framework. This involves significant changes to the
underlying codebase, structure, and architecture. The rewrite is likely aimed
at improving performance, modularity, and overall code quality.
II. Brand New Look and Feel: Bootstrap 5 introduces a fresh and updated visual
design, providing a modern and aesthetically pleasing look. This includes
improvements to default styling, layout components, and other design
elements, giving websites a contemporary appearance.
III. Brand New Logo: Along with the major rewrite, Bootstrap 5 unveiled a new
logo. A new logo often signifies a rebranding effort and serves as a visual
representation of the framework's evolution and identity.
IV. New Typography: Bootstrap 5 includes updates to typography, focusing on
enhancing the readability and visual appeal of text across different devices.
This may involve changes to font styles, sizes, and spacing for improved
legibility.
V. No jQuery is Required Anymore: One notable change in Bootstrap 5 is the
removal of the jQuery dependency. Bootstrap now relies on native JavaScript
for its functionality, making it more lightweight and aligning with modern web
development practices.
 VI. Dropping Support for Internet Explorer (v5): Bootstrap 5 has discontinued
support for Internet Explorer 11. By dropping support for this older browser,
Bootstrap can take advantage of modern web standards and technologies,
allowing for more efficient development and better performance.
VII. New Theme Colors: Bootstrap 5 introduces a new set of theme colors, offering
developers a refreshed color palette to use in their projects. These colors can
be applied to various components, contributing to a more diverse and modern
visual style.
VIII. Enhanced Grid: The grid system is a fundamental aspect of Bootstrap, and
in version 5, it likely received enhancements for improved flexibility and
control over layout structures. This could involve new utility classes and
features to make responsive design even more powerful.
IX. Offcanvas: The offcanvas feature in Bootstrap 5 provides a way to create side
menus or panels that are hidden off-screen and can be revealed on demand.
This enhances the navigation options available in Bootstrap, improving user
experience and design possibilities.
X. Bootstrap 5 has its Own Icon System: Bootstrap 5 comes with its own set
of icons, providing a built-in icon system for developers to use in their projects.
This eliminates the need to rely on external icon libraries and allows for easier
customization and integration.

Bootstrap has gained widespread adoption in the web development community due
to its ease of use, flexibility, and ability to speed up the development process.
Whether you are a beginner or an experienced developer, Bootstrap can be a valuable
tool for creating modern and responsive web applications.

Bootstrap 5 Installation:

A. Use of CDN link for bootstrap: (How to use bootstrap online?)

Using a Content Delivery Network (CDN) link for Bootstrap is a convenient way to
include the Bootstrap framework in your web project. Bootstrap is a popular front-
end framework that simplifies the process of designing responsive and visually
appealing web pages. Here's how you can use a CDN link for Bootstrap:
 Include the CDN Link in Your HTML File:
Add the CDN Link tag in the <head> section of your HTML file to include the
Bootstrap CSS file
Make sure to replace 5.0.2 with the version you want to use. You can find the latest
version on the Bootstrap website or the chosen CDN provider's documentation.

Example: Creating a Button using CDN (Internet service is required)

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet" integrity="sha384-
EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">

</head>
<body>
<a href="#" class="btn btn-primary">Button</a>
</body>
</html>

Output:
Advantages of using a CDN link:
By using a CDN link, you benefit from faster loading times because users can
potentially retrieve the Bootstrap files from a server geographically closer to them.
Additionally, it reduces the burden on your web server.
By using CDN links, you ensure that your web page is always using the latest version
of Bootstrap without having to download and host the files yourself. Keep in mind
that using a CDN requires an internet connection for your users to load the Bootstrap
files.

B. Use of compiled CSS file for bootstrap: (How to use bootstrap

offline?)
To use Bootstrap offline, you need to download the Bootstrap files and host them
locally in your project.

Here's a step-by-step guide on how to use Bootstrap offline:

Download Bootstrap Files:

Visit the official Bootstrap website (https://getbootstrap.com/) and go to the
"Download" section. There, you can choose to download the compiled CSS and
JavaScript files. Download the ZIP file and extract its contents to a location in your
project.

Organize Bootstrap Files:

Once you've extracted the contents of the ZIP file, you'll find folders such as css and
js. Organize these folders in a way that makes sense for your project structure.

Include Bootstrap CSS in Your HTML File:

Add a link to the Bootstrap CSS file in the <head> section of your HTML file. Adjust
the path based on where you've placed the CSS file within your project:
 Ensure Proper File Paths:
Make sure the file paths in your HTML file accurately reflect the location of the
Bootstrap files within your project.

Test Your Project:

Open your HTML file in a web browser to ensure that Bootstrap is applied correctly.
If everything is set up correctly, you should see the Bootstrap styles being applied to
your elements.

Example: Creating a Button using offline bootstrap:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bootstrap-5.0.2-dist/css/bootstrap.css">
</head>
<body>
<a href="#" class="btn btn-primary">Button</a>
</body>
</html>
 Output:

Advantages of using compiled CSS files offline for Bootstrap:

Using the compiled CSS file offline for Bootstrap offers several advantages, including:

1. Offline Availability:
When you use the compiled CSS file offline, your web application can still function even
without an internet connection. This is crucial for scenarios where users may not always
have access to the internet, such as in offline applications or on local development
environments.

2. Reduced Dependency on External Servers:

By hosting the Bootstrap CSS file locally, you reduce dependency on external servers or
Content Delivery Networks (CDNs). This can lead to faster loading times, as the CSS file is
fetched directly from your server, eliminating potential delays caused by external server
issues or network latency.

3. Improved Performance:
Local hosting of the compiled CSS file can result in improved performance since the file is
retrieved from the local file system. This reduces the need for network requests, leading to
faster rendering of styles and improved user experience.

4. Customization and Theming:

Storing and using the compiled CSS file locally allows you to customize Bootstrap's styles
to match your project's specific requirements. You can modify the CSS file directly or use
Bootstrap's customization features to tailor the framework to your design needs.

5. Version Control:
Hosting the compiled CSS file locally facilitates version control. You have control over which
version of Bootstrap you are using, and updates can be managed intentionally. This ensures
consistency in styling across your application, and you won't inadvertently be affected by
updates to external CDNs.

6. Security and Privacy:

Storing and using Bootstrap files locally can enhance the security and privacy of your
application. It reduces the risk of external entities tampering with or intercepting the CSS
file during transmission, providing a more secure environment for your web application.

7. Isolation from CDN Outages:

If your web application relies on external CDNs for assets, it might be vulnerable to outages
or disruptions in those CDNs. Hosting Bootstrap files offline ensures that your application's
styling remains intact even if the CDN experiences issues.

8. Development and Testing:

Local hosting is advantageous during development and testing phases. It allows you to work
on your project without requiring an internet connection, simplifying the development
workflow, especially in isolated or restricted environments.

While there are advantages to using the compiled CSS file offline, it's essential to consider
trade-offs, such as the manual effort required to update Bootstrap versions and potential
increases in file size when compared to using a CDN. Ultimately, the choice between local
hosting and using a CDN depends on your project's specific requirements and constraints.
Tailwind and CSS based web development
Vue JS: Directives and Binding
React JS: Elements, UI Components, JSX, Redux, Fetch Data
and Asynchronous Programming, GraphQL APIs