🎯 Introduction to Bootstrap

Bootstrap is the world’s most popular **open-source CSS framework** for building responsive, mobile-first websites quickly and efficiently. It includes ready-to-use HTML, CSS, and JavaScript components for layout, typography, buttons, navigation, and more.

⚙️ Getting Started with Bootstrap

You can start using Bootstrap in two main ways:

1. Via CDN (No installation required):

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> 

2. Via NPM (for projects with build tools):

 npm install bootstrap 

📐 Basic Grid System

Bootstrap uses a 12-column flexible grid system. You can easily create responsive layouts like this:

 <div class="container"> <div class="row"> <div class="col-md-6">Column 1</div> <div class="col-md-6">Column 2</div> </div> </div> 

🧱 Reusable UI Components

Bootstrap includes dozens of reusable UI elements. Here are some popular ones:

• Buttons: .btn .btn-primary, .btn-danger, etc.
• Alerts: Display messages with .alert classes.
• Navbar: Create fully responsive navigation menus.
• Cards: Flexible content containers with padding and shadows.

🔘 Example: Button

 <button class="btn btn-success">Click Me</button> 

📱 Responsive Design

Bootstrap ensures that your layout and UI adjust automatically across mobile, tablet, and desktop devices using breakpoints like:

• col-sm-* for small devices
• col-md-* for tablets
• col-lg-* for desktops

📌 Tip:

🔚 Conclusion

Bootstrap makes web development faster and more efficient. With its responsive grid, prebuilt UI elements, and utility classes, you can build professional websites even without writing much custom CSS.