Bootstrap is a powerful and popular open-source front-end framework designed for building
responsive, mobile-first websites and web applications. Developed initially by Twitter, it
provides developers with pre-designed components, a grid system, and utilities, making it easier
to create consistent and visually appealing designs.
Key Features of Bootstrap:
Responsive Grid System:
Bootstrap uses a 12-column grid layout that adapts seamlessly to various screen sizes,
enabling responsive web design.
Pre-Designed Components:
It includes a variety of UI components like buttons, forms, modals, dropdowns, navigation
bars, and carousels, which are customizable and easy to use.
Mobile-First Approach:
Bootstrap prioritizes mobile design, ensuring websites look and function well on smaller
screens by default.
Customizable:
Developers can easily customize Bootstrap's styles by modifying its SASS/SCSS variables
or using custom CSS.
Cross-Browser Compatibility:
Bootstrap ensures consistency across different browsers and devices.
Utility Classes:
It provides a range of utility classes for common tasks like spacing, alignment, colors, and
visibility, reducing the need for additional CSS.
JavaScript Plugins:
Bootstrap comes with built-in JavaScript plugins (using vanilla JS or optionally jQuery) for
interactive components like modals, tooltips, and sliders.
Why Use Bootstrap?
Time-Saving:
Bootstrap accelerates development with its pre-built components and responsive grid system.
Consistency:
It ensures design consistency across all pages and projects.
Ease of Use:
Even beginners can quickly build professional-looking websites with minimal effort.
Active Community Support:
As one of the most widely used frameworks, Bootstrap has extensive documentation and an
active community for support.
Bootstrap Layouts:
Container
The container is the outermost element in the layout system. It provides a way to center content
and give padding.
Types of Containers:
.container: Fixed-width container that adjusts based on screen size.
.container-fluid: Full-width container spanning the entire width of the viewport.
.container-{breakpoint}: Responsive container that changes width based on the specified
breakpoint (sm, md, lg, etc.).
<div class="container">
Fixed width based on screen size.
</div>
<div class="container-fluid">
Full width on all screen sizes.
</div>
<div class="container-lg">
Fixed width only on large screens and above.
</div>
Row:
A row is used to wrap columns and ensure proper alignment and spacing. Rows create a
horizontal group of columns, maintaining spacing using gutters (default spacing between
columns).
<div class="container">
<div class="row">
<div class="col">Column 1</div>
<div class="col">Column 2</div>
</div>
</div>
Columns:
Columns are the building blocks of Bootstrap's grid system. The grid divides into 12 equal
parts, and you can specify how many parts each column should occupy.
Key Features:
Auto-layout columns: Automatically divide available space equally.
Defined-width columns: Use .col-{breakpoint}-{number} classes to set column widths.
Nested columns: Columns can contain additional rows and columns.
<!-- Equal-width columns -->
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
</div>
<!-- Custom-width columns -->
<div class="row">
<div class="col-4">4 columns wide</div>
<div class="col-8">8 columns wide</div>
</div>
Responsive Classes
Bootstrap provides classes for different screen sizes (breakpoints). You can use these to define
column widths for specific screen sizes:
Breakpoints:
col-sm (Small: ≥576px)
col-md (Medium: ≥768px)
col-lg (Large: ≥992px)
col-xl (Extra large: ≥1200px)
col-xxl (Extra-extra large: ≥1400px)
<div class="row">
<div class="col-sm-6 col-lg-4">Responsive Column</div>
<div class="col-sm-6 col-lg-8">Responsive Column</div>
</div>
Offset Columns:
Offsets are used to add empty space before a column. Use .offset-{breakpoint}-{number} to
shift columns to the right.
<div class="row">
<div class="col-4 offset-2">Offset by 2 columns</div>
<div class="col-4">Column</div>
</div>
Reordering Columns:
Reordering allows you to change the order of columns using .order-{breakpoint}-{number}
classes. Numbers range from 1 (highest priority) to 12 (lowest priority).
<div class="row">
<div class="col order-3">Third</div>
<div class="col order-1">First</div>
<div class="col order-2">Second</div>
</div>
For reverse order, use .order-last or .order-first.
Example Combining All Features:
<div class="container">
<div class="row">
<div class="col-6 col-md-4">Responsive Column 1</div>
<div class="col-6 col-md-4 offset-md-4">Responsive Column 2 with Offset</div>
</div>
<div class="row">
<div class="col order-3">Reordered 3rd</div>
<div class="col order-1">Reordered 1st</div>
<div class="col order-2">Reordered 2nd</div>
</div>
</div>
Bootstrap Content (Typography, Tables, Images, Forms)
1. Typography (Text Formatting)
Bootstrap helps make text look neat and easy to read.
Headings: Use <h1> to <h6> for titles. Bootstrap adjusts their size and spacing.
<h1>Big Title</h1>
<h2>Smaller Title</h2>
Paragraphs:
For regular text, use <p>. It adds proper spacing.
<p>This is a paragraph with good spacing.</p>
Bold & Italics:
<strong> for bold: Bold
<em> for italics: Italics
<strong>Bold text</strong>
<em>Italic text</em>
Lists:
Use <ul> for bullet points and <ol> for numbered lists.
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
2. Tables
Bootstrap makes tables look cleaner and adds features like borders and stripes.
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
</tbody>
</table>
Add borders:
<table class="table table-bordered"></table>
Add striped rows:
<table class="table table-striped"></table>
3. Images
Bootstrap can make images responsive (fit the screen size) and styled.
Responsive Image:
<img src="image.jpg" class="img-fluid" alt="Description">
The img-fluid class makes the image adjust automatically to fit the screen.
Rounded Image:
<img src="image.jpg" class="rounded" alt="Rounded image">
Circle Image:
<img src="image.jpg" class="rounded-circle" alt="Circular image">
4. Forms (Input Fields)
Bootstrap makes forms look modern and easy to use.
Basic Form:
<form>
<div class="mb-3">
<label for="exampleInputEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter
email">
</div>
<div class="mb-3">
<label for="exampleInputPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="exampleInputPassword"
placeholder="Password">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Checkbox and Radio Buttons:
<div class="form-check">
<input class="form-check-input" type="checkbox" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
Bootstrap Components:
1. Navbar
The Navbar is a responsive, collapsible header used for navigation menus.
Can include links, brand logos, dropdowns, and search bars.
Customizable with different colors (bg-light, bg-dark) and positions (e.g., fixed-top).
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<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" href="#">Home</a></li>
<li class="nav-item"><a class="nav-link" href="#">About</a></li>
</ul>
</div>
</nav>
2. Navs and Tabs
Navs organize links, while Tabs allow switching between content sections without reloading the
page.
Navs: Horizontal or vertical menu using .nav and .nav-item.
Tabs: Use .nav-tabs to style tabs with active states.
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" href="#">Active Tab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Another Tab</a>
</li>
</ul>
3. Dropdowns
Dropdowns are toggled menus that expand to show additional links or actions.
Triggered by buttons or links with .dropdown-toggle.
Positioning and alignment can be adjusted (dropup, dropright).
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-
toggle="dropdown">
Dropdown
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
4. Buttons
Buttons are styled clickable elements for various actions.
Styles: .btn-primary, .btn-secondary, .btn-success, etc.
Sizes: .btn-sm (small), .btn-lg (large).
Variants like outline buttons: .btn-outline-primary.
<button class="btn btn-primary">Primary Button</button>
<button class="btn btn-success">Success Button</button>
5. Button Groups
Button Groups allow grouping multiple buttons together for compact layouts.
Use .btn-group to combine buttons horizontally or .btn-group-vertical for vertical alignment.
<div class="btn-group">
<button class="btn btn-primary">Left</button>
<button class="btn btn-primary">Middle</button>
<button class="btn btn-primary">Right</button>
</div>
6. Breadcrumb
Breadcrumbs show the user’s navigation path (e.g., Home > Library > Books).
Use .breadcrumb for the container and .breadcrumb-item for individual links.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item active">Library</li>
</ol>
</nav>
7. Pagination
Pagination splits content into multiple pages.
Use .pagination for the container and .page-item for individual links.
Add .disabled or .active to style specific items.
<nav>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</nav>
8. Labels/Badges
Badges are small indicators to highlight notifications, counts, or statuses.
Example: .badge bg-primary, .badge bg-danger.
<span class="badge bg-primary">New</span>
9. Alerts
Alerts are used for messages or notifications.
Examples: .alert-success (green for success), .alert-danger (red for error).
<div class="alert alert-success">This is a success alert.</div>
10. Progress Bars
Progress Bars visually show task completion levels.
Use .progress for the container and .progress-bar for the bar.
Customize width with inline styles (e.g., style="width: 50%;").
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%;">50%</div>
</div>
11. Accordion
Accordion is a collapsible list used for FAQs or toggleable sections.
Use .accordion as the container, .accordion-item for each item.
12. Card
Cards are containers for content like text, images, and actions.
Can include a header, footer, and body for structured content.
13. Modal
Modals are pop-up dialogs used for forms, alerts, or other interactions.
Use .modal for the container and include .modal-dialog for the structure.
Bootstrap Utilities:
1. Colors
Control text and background colors:
Text: .text-primary, .text-danger.
Background: .bg-primary, .bg-success.
2. Background
Apply solid or gradient backgrounds:
Colors: .bg-light, .bg-dark.
Gradients: .bg-gradient.
3. Borders
Style element borders:
Add borders: .border, .border-top, .border-0 (remove border).
Rounding: .rounded, .rounded-circle.
4. Display
Control element visibility:
Hide/show: .d-none, .d-block, .d-flex.
Responsive: .d-md-none (hide on medium screens).
5. Overflow
Control overflow behavior:
.overflow-auto (scrollable), .overflow-hidden (cut-off content).
6. Position
Position elements:
Static: .position-static (default).
Fixed: .position-fixed (fixed on the screen).
Absolute: .position-absolute (relative to parent).
7. Spacing
Adjust margins and padding:
Margins: .m-3 (margin), .mt-3 (top margin).
Padding: .p-3 (padding), .pt-3 (top padding).
8. Text
Control text styling:
Alignment: .text-start, .text-center, .text-end.
Transformation: .text-uppercase, .text-lowercase.
9. Vertical Align
Align inline or table elements vertically:
.align-baseline, .align-top, .align-middle, .align-bottom.
