What is Bootstrap?

• Bootstrap is an open-source front-end framework for web development.

• It provides a collection of HTML, CSS, and JavaScript components and tools that enable developers to build responsive, mobile-first websites with ease.

• Latest version of bootstrap is version 5.

History of Bootstrap: -

• Bootstrap developers – Mark Otto and Jacob Thornton, worked

at Twitter.

• Originally named Twitter Blueprint.

• It was released as an open-source product in August 2011.

Why we use bootstrap: -

• Responsive Design: - bootstrap websites are responsive and adapt well to various screen sizes and devices like mobile tablets, laptops, and PCs.

• Time-Saving: - Bootstrap comes with a set of pre-designed components and styles, such as buttons, forms, navigation bars, and more.

• Customization: - While Bootstrap comes with a default set of styles, it is highly customizable. Developers can easily modify the framework to suit their project's specific design requirements.

Customization options include choosing color schemes, adjusting

spacing, and selectively including or excluding components

based on project needs.

• Cross-Browser Compatibility: - Cross-browser compatibility refers to the ability of a website or web application to function consistently and accurately across different web browsers, like

• Google Chrome

• Microsoft Edge

• Internet Explorer (IE)

• Community and Documentation: - Bootstrap has a large and

active community of developers.

Ways to use bootstrap: -

• There are several ways to use Bootstrap in your project: -

1. CDN (content delivery network).

2. Download.

How to download Bootstrap?

• Go to the official Bootstrap website at “https://getbootstrap.com/”.

• Click on "Download" or "Download Bootstrap".

• Download via Compiled CSS and JS: This option provides the compiled and minified versions of the Bootstrap CSS and JS files.

• After downloading is complete, Extract the CSS and JS files.

• Open the bootstrap folder then click on the CSS folder and copy

“bootstrap.min.css” or “bootstrap. min” file.

• Open the bootstrap folder then click on the the JS folder and copy

“bootstrap.bundle.min” or “bootstrap.bundle.min.js” file.

• Make a folder “folder_name”.

• For example, the folder name is bootstrapweb.

• Paste these files inside the bootstrap web folder.

Test bootstrap: -

• Make an index file inside the bootstrap web folder.

• Write html basic tags.

• Use link tag to connect bootstrap css to your project.

• <link rel= “stylesheet” href= “bootstrap.min.css”>.

• Make a button using button tag.

• <button class= “btn btn-primary”>click me</button>.