Bootstrap 5 Tutorial for Beginners
1. What is Bootstrap?
Bootstrap is the most popular CSS framework for building responsive, mobile-first websites. It includes:
Pre-designed UI components (buttons, cards, navbars)
Responsive grid system (layouts for all screen sizes)
Utility classes (quickly style without custom CSS)
JavaScript plugins (dropdowns, modals, carousels)
2. Getting Started
Installation Options
Option 1: CDN (Quick Start)
<!DOCTYPE html> <html> <head> <!-- Bootstrap CSS --> <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> <!-- Bootstrap JS (Popper.js included) --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Option 2: Download & Local Setup
Download from getbootstrap.com and include files:
<link href="css/bootstrap.min.css" rel="stylesheet"> <script src="js/bootstrap.bundle.min.js"></script>
Option 3: npm (For Developers)
npm install bootstrap
3. Bootstrap Grid System
Bootstrap uses a 12-column flexible grid for layouts.
Basic Grid Example
<div class="container"> <div class="row"> <div class="col-md-6 bg-light p-3">Column 1 (6 units)</div> <div class="col-md-6 bg-info p-3">Column 2 (6 units)</div> </div> </div>
Responsive Breakpoints
| Class Prefix | Screen Size | Example |
|---|---|---|
.col- | Extra small (<576px) | col-12 (full width on phones) |
.col-sm- | Small (≥576px) | col-sm-6 (half width on tablets) |
.col-md- | Medium (≥768px) | col-md-4 (3 columns on laptops) |
.col-lg- | Large (≥992px) | col-lg-3 (4 columns on desktops) |
.col-xl- | Extra large (≥1200px) | col-xl-2 (6 columns on large screens) |
4. Common Bootstrap Components
Buttons
<button class="btn btn-primary">Primary</button> <button class="btn btn-outline-danger">Danger Outline</button> <button class="btn btn-success btn-lg">Large Success</button>
Cards
<div class="card" style="width: 18rem;"> <img src="image.jpg" class="card-img-top"> <div class="card-body"> <h5 class="card-title">Card Title</h5> <p class="card-text">Some example text.</p> <a href="#" class="btn btn-primary">Go somewhere</a> </div> </div>
Navbar
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">My Site</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> <li class="nav-item"> <a class="nav-link" href="#">About</a> </li> </ul> </div> </div> </nav>
Alerts
<div class="alert alert-success">Success message!</div> <div class="alert alert-warning alert-dismissible fade show"> Warning! <button class="btn-close" data-bs-dismiss="alert"></button> </div>
5. Bootstrap Utilities
Spacing (Margin & Padding)
| Class | Description |
|---|---|
m-1 to m-5 | Margin (.mt-3 = margin-top) |
p-2 to p-5 | Padding (.pb-4 = padding-bottom) |
mx-auto | Center horizontally |
Text & Colors
<p class="text-center text-uppercase text-danger bg-light"> Centered, uppercase, red text on light background </p>
Flexbox Utilities
<div class="d-flex justify-content-between align-items-center"> <div>Item 1</div> <div>Item 2</div> </div>
6. Bootstrap JavaScript Components
Modal (Popup Dialog)
<!-- Button Trigger --> <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal"> Open Modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Modal Title</h5> <button class="btn-close" data-bs-dismiss="modal"></button> </div> <div class="modal-body"> <p>Modal content goes here.</p> </div> </div> </div> </div>
Carousel (Image Slider)
<div id="carouselExample" class="carousel slide"> <div class="carousel-inner"> <div class="carousel-item active"> <img src="slide1.jpg" class="d-block w-100"> </div> <div class="carousel-item"> <img src="slide2.jpg" class="d-block w-100"> </div> </div> <button class="carousel-control-prev" data-bs-target="#carouselExample" data-bs-slide="prev"> <span class="carousel-control-prev-icon"></span> </button> <button class="carousel-control-next" data-bs-target="#carouselExample" data-bs-slide="next"> <span class="carousel-control-next-icon"></span> </button> </div>
7. Customizing Bootstrap
Method 1: Override CSS
/* Custom CSS file */ :root { --bs-primary: #ff5722; /* Change primary color to orange */ } .btn-custom { border-radius: 0; }
Method 2: SASS (Advanced)
Modify Bootstrap’s SASS variables before compiling:
// Custom.scss $primary: #ff5722; @import "bootstrap/scss/bootstrap";
8. Bootstrap Best Practices
✅ Use Containers (.container or .container-fluid)
✅ Mobile-First Approach (Design for small screens first)
✅ Utilize Utility Classes (Avoid custom CSS when possible)
✅ Keep JavaScript Minimal (Use Bootstrap’s plugins)
No comments:
Post a Comment