<!
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Super Complete Bootstrap Notes</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<style>
body {
font-family: Arial, sans-serif;
padding: 40px;
background-color: #f8f9fa;
}
pre {
background: #212529;
color: #f8f9fa;
padding: 15px;
border-radius: 6px;
overflow-x: auto;
}
h1, h2 {
color: #0d6efd;
}
img {
width: 200px;
margin: 15px 0;
}
</style>
</head>
<body>
<h1>🚀 Super Complete Bootstrap Notes</h1>
<h2>1. What is Bootstrap?</h2>
<p>
Bootstrap is a free CSS framework for building responsive and mobile-first
websites quickly. It offers ready-made:
</p>
<ul>
<li>Grid system</li>
<li>Components (buttons, navbars, cards, modals)</li>
<li>Utilities for spacing, colors, typography</li>
</ul>
<img src="https://getbootstrap.com/docs/5.3/assets/brand/bootstrap-logo-
shadow.png" alt="Bootstrap Logo" />
<h2>2. How to Add Bootstrap</h2>
<h3>Via CDN</h3>
<pre><code><link
href="https://cdn.jsdelivr.net/npm/
[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet">
<script
src="https://cdn.jsdelivr.net/npm/
[email protected]/dist/js/bootstrap.bundle.min.js"&
gt;</script>
</code></pre>
<h2>3. Containers</h2>
<p>Wrap your content in a container for proper spacing:</p>
<pre><code><div class="container">
Content goes here
</div>
</code></pre>
<h2>4. Grid System</h2>
<p>Bootstrap uses a 12-column grid:</p>
<pre><code><div class="row">
<div class="col-6">Half Width</div>
<div class="col-6">Half Width</div>
</div>
</code></pre>
<h2>5. Typography</h2>
<pre><code><h1 class="display-1">Hello Bootstrap!</h1>
<p class="lead">This is a lead paragraph.</p>
</code></pre>
<h2>6. Buttons</h2>
<pre><code><button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success</button>
</code></pre>
<h2>7. Navbar</h2>
<pre><code><nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Brand</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">
<li class="nav-item">
<a class="nav-link active" href="#">Home</a>
</li>
</ul>
</div>
</div>
</nav>
</code></pre>
<h2>8. Cards</h2>
<pre><code><div class="card" style="width: 18rem;">
<img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</code></pre>
<h2>9. Alerts</h2>
<pre><code><div class="alert alert-warning" role="alert">
This is a warning alert!
</div>
</code></pre>
<h2>10. Forms</h2>
<pre><code><form>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">Email
address</label>
<input type="email" class="form-control" id="exampleInputEmail1">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</code></pre>
<h2>11. Modals</h2>
<pre><code><button type="button" class="btn btn-primary" data-bs-
toggle="modal" data-bs-target="#myModal">
Launch Modal
</button>
<div class="modal fade" id="myModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-
dismiss="modal"></button>
</div>
<div class="modal-body">
Modal body text
</div>
</div>
</div>
</div>
</code></pre>
<h2>✅ What You Learned</h2>
<ul>
<li>How to add Bootstrap to your project</li>
<li>Grid layout and spacing</li>
<li>Using components like navbars, buttons, and cards</li>
<li>Styling forms and modals</li>
</ul>
<p>🎉 You’re ready to build beautiful, responsive websites with Bootstrap!</p>
</body>
</html>
