Bootstrap: Comprehensive Notes
Bootstrap is a popular front-end framework used for designing responsive and mobile-first websites.
It includes HTML, CSS, and JavaScript components that make it easier to create web pages that look
good on different screen sizes and devices.
1. Getting Started with Bootstrap
Bootstrap can be integrated into your project in two ways:
Via CDN: Add a link to the Bootstrap CDN in your project’s HTML file.
html
Copy code
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></
script>
Download Locally: Download the Bootstrap files and link them locally in your project.
2. Bootstrap Grid System
Bootstrap uses a 12-column grid system that enables you to create layouts that adapt to different
screen sizes. The grid system has four main breakpoints based on screen sizes:
xs: Extra small devices (mobile phones)
sm: Small devices (tablets)
md: Medium devices (desktops)
lg: Large devices (larger desktops)
Basic Grid Layout Example:
html
Copy code
<div class="container">
<div class="row">
<div class="col-sm-4">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-4">Column 3</div>
</div>
</div>
container: Centers the content on the page.
row: Groups columns together.
col-sm-4: Each column takes up 4 out of the 12 columns available.
3. Typography and Text Utilities
Bootstrap provides a range of utilities for handling typography and text.
Headings: Use h1, h2, ..., h6 for headings.
Lead text: Highlight introductory text with .lead.
html
Copy code
<p class="lead">This is a lead paragraph.</p>
Text alignment: Use .text-left, .text-center, .text-right to align text.
Text colors: Use classes like .text-primary, .text-success, .text-danger, .text-warning, etc., to
change text colors.
4. Forms in Bootstrap
Forms in Bootstrap are highly customizable, with built-in support for validation and layout control.
html
Copy code
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
form-group: Wraps each form element.
form-control: Styles the input elements.
btn and btn-primary: Style the button.
5. Buttons
Bootstrap offers several button classes to quickly create various types of buttons.
Basic button classes:
o .btn-primary: Blue button.
o .btn-secondary: Gray button.
o .btn-success: Green button.
o .btn-danger: Red button.
o .btn-warning: Yellow button.
html
Copy code
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-success">Success Button</button>
Button sizes: You can adjust the size of the buttons using .btn-lg or .btn-sm.
html
Copy code
<button type="button" class="btn btn-primary btn-lg">Large Button</button>
<button type="button" class="btn btn-secondary btn-sm">Small Button</button>
6. Responsive Utilities
Bootstrap provides classes for showing or hiding content based on the viewport size.
Hidden content on specific breakpoints:
o .d-none: Hides an element on all screen sizes.
o .d-sm-none: Hides an element on small screens (and larger).
o .d-md-none: Hides an element on medium screens (and larger).
o .d-lg-none: Hides an element on large screens (and larger).
Visible content on specific breakpoints:
o .d-sm-block: Shows an element as a block on small screens.
o .d-md-inline: Shows an element inline on medium screens.
7. Cards
Cards in Bootstrap are flexible and extensible content containers with various options like headers,
footers, and images.
html
Copy code
<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of
the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
card: Main card container.
card-img-top: Image at the top of the card.
card-body: Container for the content.
card-title: Title of the card.
btn btn-primary: Button in the card.
8. Navigation (Navbars)
Bootstrap's navigation bar (navbar) is customizable and responsive by default.
html
Copy code
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
</ul>
</div>
</nav>
navbar: Defines the navigation bar.
navbar-expand-lg: Expands the navbar for large screens and collapses it on smaller ones.
navbar-light: Light background.
bg-light: Light background color.
collapse navbar-collapse: Collapsible content.
9. Modals
Modals in Bootstrap allow you to display content in a popup.
html
Copy code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
modal: Main modal container.
modal-dialog: Defines the modal's dialog box.
modal-content: Modal content.
modal-header, modal-body, modal-footer: Modal sections.
10. Icons
Bootstrap has integrated Font Awesome and other icon libraries. Here's how you can use them:
html
Copy code
<i class="fas fa-home"></i> <!-- Font Awesome icon for home -->
11. Carousel
Carousels in Bootstrap are used to create image slideshows.
html
Copy code
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="..." alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="..." alt="Second slide">
</div>
</div>
</div>
carousel: Main carousel container.
carousel-inner: Container for carousel items.
carousel-item: Each individual item in the carousel.
