Introduction to Bootstrap
Bootstrap is a popular frontend framework that helps developers build responsive, mobile-first websites using pre-designed HTML, CSS, and JavaScript components.
How to Add Bootstrap to Your Project
You can add Bootstrap via CDN or by downloading the files manually. The easiest way is through CDN.
1
2
3
4
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>Creating a Responsive Navbar
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">MySite</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</div>
</nav>Using Bootstrap Buttons
1
2
<button class="btn btn-primary">Click Me</button>
<button class="btn btn-success">Submit</button>Using Bootstrap Grid System
1
2
3
4
5
6
<div class="container">
<div class="row">
<div class="col-md-6">Column 1</div>
<div class="col-md-6">Column 2</div>
</div>
</div>JavaScript Components (e.g., Modal)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<button class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch Modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Hello Bootstrap</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">This is a Bootstrap modal.</div>
<div class="modal-footer">
<button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>Conclusion
Bootstrap provides a powerful toolkit for building responsive layouts and interactive UI elements quickly. You don’t need to write everything from scratch—just plug and play!
