Easy to Use: Simple to integrate with HTML and CSS.
Responsive Design: Automatically adjusts to different screen sizes.
Pre-Built Components: Buttons, forms, modals, and navigation bars are ready to use.
Customization: Can be modified using CSS or Sass.
Cross-Browser Compatibility: Works on all modern browsers.
You can use Bootstrap via CDN (Content Delivery Network) or download it locally.
👉 Using CDN: Add the following code inside the <head> section of your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<h1 class="text-center text-primary">Hello, Bootstrap!</h1>
</body>
</html>
Bootstrap uses a 12-column grid system to create responsive layouts.
👉 Example: A Simple Responsive Layout
<div class="container">
<div class="row">
<div class="col-md-6 bg-info text-white p-3">Column 1 (50%)</div>
<div class="col-md-6 bg-warning text-dark p-3">Column 2 (50%)</div>
</div>
</div>
</div>
✅ Explanation:
.container ensures proper spacing.
.row creates a horizontal group of columns.
.col-md-6 divides the row into two equal parts on medium screens and above.
bg-info and bg-warning add background colors for better visualization.
3. Using Bootstrap Components
Bootstrap provides pre-built UI components like buttons, modals, alerts, and more.
👉 Example: A Bootstrap Button
<button class="btn btn-primary">Click Me</button>