Introduction of Bootstrap

Bootstrap is a free and open-source CSS framework.

What is Bootstrap?

Bootstrap is a free and open-source CSS framework directed at responsive, mobile-first front-end web development. It contains HTML, CSS and (optionally) JavaScript-based design templates for typography, forms, buttons, navigation, and other interface components.

• Bootstrap is a free front-end framework for faster and easier web development
• Bootstrap gives you the ability to easily create responsive designs
• Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins
• Bootstrap was created by Mark Otto and Jacob Thornton

What is Responsive Web Design?

Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

Why Use Bootstrap?

Advantages 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
• Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome, Firefox, Edge, Safari, and Opera).

Bootstrap versions

Version	Year
Bootstrap 1	2011
Bootstrap 2	2012
Bootstrap 3	2013
Bootstrap 4	2014
Bootstrap 5	2021

Containers

Containers are used to pad the content inside of them, and there are two container classes available:

• The .container class provides a responsive fixed width container
• The .container-fluid class provides a full width container, spanning the entire width of the viewport

Example of container class

<div class="container">
<h1>My First Bootstrap Page</h1>
<p>Welcome to soopro pathshala.</p>
</div>

Example of container-fluid class

<div class="container-fluid">
<h1>My First Bootstrap Page</h1>
<p>Welcome to soopro pathshala.</p>
</div>