Bootstrap

*What is Bootstrap?
*
Bootstrap is a free, open-source CSS framework that helps developers build responsive and attractive websites quickly. It also includes JavaScript components for common UI elements.

Instead of writing all your CSS from scratch, Bootstrap provides ready-made styles and components.

For example, instead of creating a button style yourself, you can write:

Click Me

Bootstrap automatically makes it look like a modern button.

*How does Bootstrap help?
*
Bootstrap saves time and makes web development easier in several ways:

Responsive design: Websites automatically adjust to phones, tablets, and desktops using Bootstrap's grid system.

Pre-built components: Includes buttons, forms, navigation bars, cards, modals, alerts, tables, and more.

Consistent design: Your pages have a clean and professional appearance without extensive custom CSS.

Faster development: You can build interfaces much more quickly by using Bootstrap's classes.

Cross-browser compatibility: Bootstrap is designed to work well across modern web browsers.
Example

Without Bootstrap:

Submit

You would need to write CSS:

button {
background: blue;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
}

With Bootstrap:

Submit

No extra CSS is needed for the basic styling.

Bootstrap Grid System

Bootstrap uses a 12-column grid to create responsive layouts.

*Example:
*

Left
Right

On medium and larger screens, each column takes half the width. On smaller screens, they stack automatically.

*Common Bootstrap Components
*
Some of the most commonly used components are:

Buttons
Navigation bars (Navbar)
Forms
Cards
Tables
Alerts
Badges
Modals (pop-up dialogs)
Carousels (image sliders)
Dropdown menus