Notes
Notes - notes.io |
# Bootstrap - Exam-Oriented Comprehensive Notes
## 1. Introduction to Bootstrap
### What is Bootstrap?
- A **free, open-source** front-end framework for developing responsive, mobile-first websites and web applications.
- Developed by **Mark Otto and Jacob Thornton** at Twitter, released in **August 2011**.
- Became the **#1 project on GitHub** in June 2014.
- Built with **HTML, CSS, and JavaScript**.
### Key Features
1. **Mobile-First Approach**: Bootstrap 3+ implements mobile-first styles throughout the entire library.
2. **Responsive Design**: Automatically adjusts layouts for desktops, tablets, and mobile devices.
3. **Browser Compatibility**: Supported by all major browsers (Chrome, Firefox, Safari, Edge, etc.).
4. **Easy to Learn**: Requires only basic knowledge of HTML and CSS.
5. **Comprehensive Documentation**: Well-organized official documentation with examples.
### Why Use Bootstrap?
| Advantage | Description |
|-----------|-------------|
| **Rapid Development** | Pre-built components reduce development time |
| **Consistency** | Ensures uniform design across browsers and devices |
| **Customizable** | Can be tailored using Sass variables and jQuery plugins |
| **Community Support** | Large community, regular updates, extensive resources |
| **Cross-browser Compatibility** | Works consistently across different browsers |
### Bootstrap Package Structure
```
bootstrap/
├── css/
│ ├── bootstrap.css (Uncompressed)
│ └── bootstrap.min.css (Minified)
├── js/
│ ├── bootstrap.js (Uncompressed)
│ └── bootstrap.min.js (Minified)
└── fonts/ (Glyphicons)
```
**Memory Aid**: "CSS for styling, JS for functionality, Fonts for icons"
---
## 2. Getting Started with Bootstrap
### Basic HTML Template
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Template</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv for IE8 support -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
**Important Points**:
- `viewport` meta tag is **essential** for responsive design
- Include **Bootstrap CSS** in `<head>`
- Include **jQuery** before Bootstrap JS
- `bootstrap.bundle.min.js` includes Popper.js for tooltips/popovers
---
## 3. Bootstrap Breakpoints and Media Queries
### What are Breakpoints?
- **Breakpoints** are screen size thresholds where website layout changes.
- Bootstrap uses a **mobile-first** approach (styles for mobile, enhanced for larger screens).
- Based on **CSS media queries** with `min-width`.
### Default Breakpoints (Bootstrap 5)
| Breakpoint | Class Prefix | Dimensions | Description |
|------------|--------------|------------|-------------|
| **X-Small** | `.col-` | < 576px | Phones (portrait) |
| **Small** | `.col-sm-` | ≥ 576px | Phones (landscape) |
| **Medium** | `.col-md-` | ≥ 768px | Tablets |
| **Large** | `.col-lg-` | ≥ 992px | Laptops |
| **X-Large** | `.col-xl-` | ≥ 1200px | Desktops |
| **XX-Large** | `.col-xxl-` | ≥ 1400px | Large Desktops |
### Sass Variables for Breakpoints
```scss
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
```
### Types of Media Queries
#### 1. **min-width** (Mobile-First)
```css
/* Apply styles for screens ≥ 768px */
@media (min-width: 768px) {
.custom-class {
display: block;
}
}
```
#### 2. **max-width** (Desktop-First)
```css
/* Apply styles for screens < 768px */
@media (max-width: 767.98px) {
.custom-class {
display: none;
}
}
```
#### 3. **Single Breakpoint** (Target specific range)
```css
/* Apply styles only for tablets (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.element {
/* Styles for medium devices */
}
}
```
#### 4. **Between Breakpoints** (Multiple ranges)
```css
/* Apply styles from medium to extra large devices */
@media (min-width: 892px) and (max-width: 1278px) {
.element {
/* Styles for multiple devices */
}
}
```
**Memory Aid**: "Min for mobile-first (start from), Max for desktop-first (up to)"
---
## 4. Bootstrap Grid System
### Core Concepts
The grid system uses **containers, rows, and columns** to layout content.
#### 1. **Containers**
- Wraps site content
- Two types: `.container` (fixed width) and `.container-fluid` (full width)
#### 2. **Rows** (`.row`)
- Horizontal groups of columns
- Must be placed inside containers
- Uses negative margins to align columns properly
#### 3. **Columns** (`.col-*`)
- Actual content holders
- 12 columns per row maximum
- Column classes indicate number of grid columns to span
### Grid Formula
$$
text{Row Width} = sum_{i=1}^{n} text{Column}_i leq 12
$$
Where each column uses 1-12 of the available 12 grid columns.
### Basic Grid Example
```html
<div class="container">
<div class="row">
<div class="col">Column 1 (auto)</div>
<div class="col">Column 2 (auto)</div>
<div class="col">Column 3 (auto)</div>
</div>
</div>
```
### Grid Classes and Their Behavior
#### A. Auto-layout Columns
```html
<!-- Equal width columns -->
<div class="row">
<div class="col">Auto</div>
<div class="col">Auto</div>
<div class="col">Auto</div>
</div>
```
#### B. Setting Specific Column Widths
```html
<div class="row">
<div class="col-6">Takes 6/12 (50%)</div>
<div class="col-3">Takes 3/12 (25%)</div>
<div class="col">Auto (remaining 25%)</div>
</div>
```
#### C. Variable Width Content (`.col-{breakpoint}-auto`)
```html
<div class="row">
<div class="col-lg-2">Fixed (lg: 2 cols)</div>
<div class="col-md-auto">Width based on content</div>
<div class="col-lg-2">Fixed (lg: 2 cols)</div>
</div>
```
#### D. Responsive Grid Classes
**1. Stacked to Horizontal**
```html
<div class="row">
<!-- Stacked on xs, horizontal on sm+ -->
<div class="col-sm-6">Column 1</div>
<div class="col-sm-3">Column 2</div>
<div class="col-sm-3">Column 3</div>
</div>
```
**2. Mix and Match**
```html
<div class="row">
<!-- Different sizes at different breakpoints -->
<div class="col-12 col-md-8">Full on mobile, 8 cols on desktop</div>
<div class="col-6 col-md-4">Half on mobile, 4 cols on desktop</div>
</div>
```
#### E. Row Columns (`.row-cols-*`)
Controls how many columns appear per row.
```html
<!-- 2 columns per row -->
<div class="row row-cols-2">
<div class="col">Item 1</div>
<div class="col">Item 2</div>
<div class="col">Item 3 (wraps to new row)</div>
</div>
<!-- Responsive row columns -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<!-- Changes columns based on screen size -->
</div>
```
#### F. Nesting Grids
```html
<div class="row">
<div class="col-sm-8">
Main content
<div class="row"> <!-- Nested row -->
<div class="col-6">Nested column 1</div>
<div class="col-6">Nested column 2</div>
</div>
</div>
<div class="col-sm-4">Sidebar</div>
</div>
```
**Important Rules for Nesting**:
- Always add a new `.row` inside a column
- Nested rows also have 12 columns
- Total of nested columns ≤ 12 (but doesn't have to be exactly 12)
#### G. Gutters (Spacing between columns)
```html
<div class="row g-0"> <!-- No gutters -->
<div class="row g-1"> <!-- Small gutters -->
<div class="row g-4"> <!-- Large gutters -->
<div class="row gx-5"> <!-- Horizontal gutters only -->
<div class="row gy-3"> <!-- Vertical gutters only -->
```
**Memory Aid**: "g for all, gx for horizontal (x-axis), gy for vertical (y-axis)"
---
## 5. Bootstrap Utilities
### Display Utilities
Control element visibility with `.d-*` classes.
| Class | CSS Equivalent | Description |
|-------|----------------|-------------|
| `.d-none` | `display: none` | Completely hidden |
| `.d-inline` | `display: inline` | Inline element |
| `.d-block` | `display: block` | Block element |
| `.d-inline-block` | `display: inline-block` | Inline-block |
| `.d-flex` | `display: flex` | Flex container |
| `.d-grid` | `display: grid` | Grid container |
**Responsive Display**:
- `.d-{breakpoint}-{value}` (e.g., `.d-md-none` hides on medium+ screens)
- Breakpoints: `sm`, `md`, `lg`, `xl`, `xxl`
### Example: Display Classes
```html
<!-- Visible only on large screens -->
<div class="d-none d-lg-block">
This only shows on lg screens and above
</div>
<!-- Hidden on small screens -->
<div class="d-none d-sm-block">
Hidden on xs, visible on sm+
</div>
```
### Spacing Utilities (Margin & Padding)
#### Syntax: `{property}{sides}-{size}`
- **Property**: `m` (margin) or `p` (padding)
- **Sides**: `t` (top), `b` (bottom), `s` (start/left), `e` (end/right), `x` (left+right), `y` (top+bottom), blank (all sides)
- **Size**: `0`-`5` (0=0rem, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem) + `auto`
#### Examples:
```html
<div class="mt-3">Margin top: 1rem</div>
<div class="pb-4">Padding bottom: 1.5rem</div>
<div class="mx-auto">Horizontal margin: auto (centering)</div>
<div class="p-0">No padding</div>
```
### Visibility Utilities
| Class | Description |
|-------|-------------|
| `.visible` | Makes element visible (default) |
| `.invisible` | Hides element but maintains space |
| `.visually-hidden` | Hides from screen but accessible |
**Key Difference**: `.d-none` removes from flow, `.invisible` keeps space.
---
## 6. Bootstrap Components
### A. Alerts
Contextual feedback messages.
```html
<div class="alert alert-primary" role="alert">
Primary alert
</div>
<div class="alert alert-success" role="alert">
Success! Operation completed.
</div>
<div class="alert alert-danger" role="alert">
Error! Something went wrong.
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This can be dismissed.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
```
**Alert Types**: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`
### B. Buttons
#### Basic Button
```html
<button type="button" class="btn btn-primary">Primary</button>
```
#### Button Variants
```html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
```
#### Button Sizes
```html
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
```
#### Outline Buttons
```html
<button class="btn btn-outline-primary">Outline Primary</button>
```
### C. Dropdowns
```html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action 1</a></li>
<li><a class="dropdown-item" href="#">Action 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated action</a></li>
</ul>
</div>
```
### D. Modals
Dialog boxes/popup windows.
```html
<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>Modal content goes here.</p>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
```
**Modal Sizes**: Add `.modal-sm`, `.modal-lg`, or `.modal-xl` to `.modal-dialog`
---
## 7. Important Concepts & Exam Tips
### Mobile-First Approach
1. **Default styles** are for mobile devices
2. **Enhancements** are added for larger screens using `min-width` media queries
3. **Benefits**: Better performance, progressive enhancement
### Grid System Rules
1. **Containers → Rows → Columns** (hierarchy must be maintained)
2. **Maximum 12 columns** per row (can use fewer)
3. **Columns wrap** when total exceeds 12
4. Use **responsive classes** for different screen sizes
### Breakpoint Strategy
- **xs**: Extra small (default, no prefix needed)
- **sm**: Small (≥576px)
- **md**: Medium (≥768px)
- **lg**: Large (≥992px)
- **xl**: Extra large (≥1200px)
- **xxl**: Extra extra large (≥1400px)
### Common Pitfalls to Avoid
1. **Missing viewport meta tag** → Breaks responsiveness
2. **Incorrect JavaScript order** → jQuery must come before Bootstrap JS
3. **Forgetting container/row structure** → Grid won't work properly
4. **Overriding Bootstrap styles improperly** → Use custom CSS files after Bootstrap
### Memory Aids
- **"C-R-C"**: Container → Row → Column (grid hierarchy)
- **"m"** for margin, **"p"** for padding
- **Breakpoint order**: xs < sm < md < lg < xl < xxl (alphabetical-ish)
- **12-column grid**: Think of a clock face (12 hours)
### Quick Revision Checklist
- [ ] Bootstrap is mobile-first and responsive
- [ ] Uses 12-column grid system
- [ ] Six breakpoints: xs, sm, md, lg, xl, xxl
- [ ] Three main components: Container, Row, Column
- [ ] Utilities for spacing, display, and visibility
- [ ] Pre-styled components (buttons, alerts, modals, etc.)
- [ ] Requires jQuery for JavaScript components
- [ ] Comprehensive documentation available
---
## 8. Sample Exam Questions & Answers
**Q1: Explain Bootstrap's mobile-first approach.**
**A**: Bootstrap uses a mobile-first approach where default styles are designed for mobile devices. Media queries with `min-width` are used to add enhancements for larger screens. This ensures better performance on mobile and progressive enhancement.
**Q2: How does Bootstrap's grid system work?**
**A**: The grid uses containers, rows, and columns. Containers wrap content, rows create horizontal groups, and columns (up to 12 per row) hold content. It's responsive with breakpoint-specific classes (.col-sm-*, .col-md-*, etc.).
**Q3: Differentiate between .d-none and .invisible classes.**
**A**: `.d-none` sets `display: none`, removing element from document flow. `.invisible` sets `visibility: hidden`, hiding element but keeping its space.
**Q4: Write HTML for a 3-column layout that becomes vertical on mobile.**
```html
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
```
---
**Keywords for Exams**: Responsive Design, Mobile-First, Grid System, Breakpoints, Media Queries, Containers, Utilities, Components, jQuery Dependency.
**Scoring Tip**: Always include code examples with explanations. Mention specific class names and their purposes. Discuss the 12-column grid system and breakpoints in detail for maximum marks.
## 1. Introduction to Bootstrap
### What is Bootstrap?
- A **free, open-source** front-end framework for developing responsive, mobile-first websites and web applications.
- Developed by **Mark Otto and Jacob Thornton** at Twitter, released in **August 2011**.
- Became the **#1 project on GitHub** in June 2014.
- Built with **HTML, CSS, and JavaScript**.
### Key Features
1. **Mobile-First Approach**: Bootstrap 3+ implements mobile-first styles throughout the entire library.
2. **Responsive Design**: Automatically adjusts layouts for desktops, tablets, and mobile devices.
3. **Browser Compatibility**: Supported by all major browsers (Chrome, Firefox, Safari, Edge, etc.).
4. **Easy to Learn**: Requires only basic knowledge of HTML and CSS.
5. **Comprehensive Documentation**: Well-organized official documentation with examples.
### Why Use Bootstrap?
| Advantage | Description |
|-----------|-------------|
| **Rapid Development** | Pre-built components reduce development time |
| **Consistency** | Ensures uniform design across browsers and devices |
| **Customizable** | Can be tailored using Sass variables and jQuery plugins |
| **Community Support** | Large community, regular updates, extensive resources |
| **Cross-browser Compatibility** | Works consistently across different browsers |
### Bootstrap Package Structure
```
bootstrap/
├── css/
│ ├── bootstrap.css (Uncompressed)
│ └── bootstrap.min.css (Minified)
├── js/
│ ├── bootstrap.js (Uncompressed)
│ └── bootstrap.min.js (Minified)
└── fonts/ (Glyphicons)
```
**Memory Aid**: "CSS for styling, JS for functionality, Fonts for icons"
---
## 2. Getting Started with Bootstrap
### Basic HTML Template
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Template</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 Shiv for IE8 support -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, Bootstrap!</h1>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
```
**Important Points**:
- `viewport` meta tag is **essential** for responsive design
- Include **Bootstrap CSS** in `<head>`
- Include **jQuery** before Bootstrap JS
- `bootstrap.bundle.min.js` includes Popper.js for tooltips/popovers
---
## 3. Bootstrap Breakpoints and Media Queries
### What are Breakpoints?
- **Breakpoints** are screen size thresholds where website layout changes.
- Bootstrap uses a **mobile-first** approach (styles for mobile, enhanced for larger screens).
- Based on **CSS media queries** with `min-width`.
### Default Breakpoints (Bootstrap 5)
| Breakpoint | Class Prefix | Dimensions | Description |
|------------|--------------|------------|-------------|
| **X-Small** | `.col-` | < 576px | Phones (portrait) |
| **Small** | `.col-sm-` | ≥ 576px | Phones (landscape) |
| **Medium** | `.col-md-` | ≥ 768px | Tablets |
| **Large** | `.col-lg-` | ≥ 992px | Laptops |
| **X-Large** | `.col-xl-` | ≥ 1200px | Desktops |
| **XX-Large** | `.col-xxl-` | ≥ 1400px | Large Desktops |
### Sass Variables for Breakpoints
```scss
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
```
### Types of Media Queries
#### 1. **min-width** (Mobile-First)
```css
/* Apply styles for screens ≥ 768px */
@media (min-width: 768px) {
.custom-class {
display: block;
}
}
```
#### 2. **max-width** (Desktop-First)
```css
/* Apply styles for screens < 768px */
@media (max-width: 767.98px) {
.custom-class {
display: none;
}
}
```
#### 3. **Single Breakpoint** (Target specific range)
```css
/* Apply styles only for tablets (768px to 991.98px) */
@media (min-width: 768px) and (max-width: 991.98px) {
.element {
/* Styles for medium devices */
}
}
```
#### 4. **Between Breakpoints** (Multiple ranges)
```css
/* Apply styles from medium to extra large devices */
@media (min-width: 892px) and (max-width: 1278px) {
.element {
/* Styles for multiple devices */
}
}
```
**Memory Aid**: "Min for mobile-first (start from), Max for desktop-first (up to)"
---
## 4. Bootstrap Grid System
### Core Concepts
The grid system uses **containers, rows, and columns** to layout content.
#### 1. **Containers**
- Wraps site content
- Two types: `.container` (fixed width) and `.container-fluid` (full width)
#### 2. **Rows** (`.row`)
- Horizontal groups of columns
- Must be placed inside containers
- Uses negative margins to align columns properly
#### 3. **Columns** (`.col-*`)
- Actual content holders
- 12 columns per row maximum
- Column classes indicate number of grid columns to span
### Grid Formula
$$
text{Row Width} = sum_{i=1}^{n} text{Column}_i leq 12
$$
Where each column uses 1-12 of the available 12 grid columns.
### Basic Grid Example
```html
<div class="container">
<div class="row">
<div class="col">Column 1 (auto)</div>
<div class="col">Column 2 (auto)</div>
<div class="col">Column 3 (auto)</div>
</div>
</div>
```
### Grid Classes and Their Behavior
#### A. Auto-layout Columns
```html
<!-- Equal width columns -->
<div class="row">
<div class="col">Auto</div>
<div class="col">Auto</div>
<div class="col">Auto</div>
</div>
```
#### B. Setting Specific Column Widths
```html
<div class="row">
<div class="col-6">Takes 6/12 (50%)</div>
<div class="col-3">Takes 3/12 (25%)</div>
<div class="col">Auto (remaining 25%)</div>
</div>
```
#### C. Variable Width Content (`.col-{breakpoint}-auto`)
```html
<div class="row">
<div class="col-lg-2">Fixed (lg: 2 cols)</div>
<div class="col-md-auto">Width based on content</div>
<div class="col-lg-2">Fixed (lg: 2 cols)</div>
</div>
```
#### D. Responsive Grid Classes
**1. Stacked to Horizontal**
```html
<div class="row">
<!-- Stacked on xs, horizontal on sm+ -->
<div class="col-sm-6">Column 1</div>
<div class="col-sm-3">Column 2</div>
<div class="col-sm-3">Column 3</div>
</div>
```
**2. Mix and Match**
```html
<div class="row">
<!-- Different sizes at different breakpoints -->
<div class="col-12 col-md-8">Full on mobile, 8 cols on desktop</div>
<div class="col-6 col-md-4">Half on mobile, 4 cols on desktop</div>
</div>
```
#### E. Row Columns (`.row-cols-*`)
Controls how many columns appear per row.
```html
<!-- 2 columns per row -->
<div class="row row-cols-2">
<div class="col">Item 1</div>
<div class="col">Item 2</div>
<div class="col">Item 3 (wraps to new row)</div>
</div>
<!-- Responsive row columns -->
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
<!-- Changes columns based on screen size -->
</div>
```
#### F. Nesting Grids
```html
<div class="row">
<div class="col-sm-8">
Main content
<div class="row"> <!-- Nested row -->
<div class="col-6">Nested column 1</div>
<div class="col-6">Nested column 2</div>
</div>
</div>
<div class="col-sm-4">Sidebar</div>
</div>
```
**Important Rules for Nesting**:
- Always add a new `.row` inside a column
- Nested rows also have 12 columns
- Total of nested columns ≤ 12 (but doesn't have to be exactly 12)
#### G. Gutters (Spacing between columns)
```html
<div class="row g-0"> <!-- No gutters -->
<div class="row g-1"> <!-- Small gutters -->
<div class="row g-4"> <!-- Large gutters -->
<div class="row gx-5"> <!-- Horizontal gutters only -->
<div class="row gy-3"> <!-- Vertical gutters only -->
```
**Memory Aid**: "g for all, gx for horizontal (x-axis), gy for vertical (y-axis)"
---
## 5. Bootstrap Utilities
### Display Utilities
Control element visibility with `.d-*` classes.
| Class | CSS Equivalent | Description |
|-------|----------------|-------------|
| `.d-none` | `display: none` | Completely hidden |
| `.d-inline` | `display: inline` | Inline element |
| `.d-block` | `display: block` | Block element |
| `.d-inline-block` | `display: inline-block` | Inline-block |
| `.d-flex` | `display: flex` | Flex container |
| `.d-grid` | `display: grid` | Grid container |
**Responsive Display**:
- `.d-{breakpoint}-{value}` (e.g., `.d-md-none` hides on medium+ screens)
- Breakpoints: `sm`, `md`, `lg`, `xl`, `xxl`
### Example: Display Classes
```html
<!-- Visible only on large screens -->
<div class="d-none d-lg-block">
This only shows on lg screens and above
</div>
<!-- Hidden on small screens -->
<div class="d-none d-sm-block">
Hidden on xs, visible on sm+
</div>
```
### Spacing Utilities (Margin & Padding)
#### Syntax: `{property}{sides}-{size}`
- **Property**: `m` (margin) or `p` (padding)
- **Sides**: `t` (top), `b` (bottom), `s` (start/left), `e` (end/right), `x` (left+right), `y` (top+bottom), blank (all sides)
- **Size**: `0`-`5` (0=0rem, 1=0.25rem, 2=0.5rem, 3=1rem, 4=1.5rem, 5=3rem) + `auto`
#### Examples:
```html
<div class="mt-3">Margin top: 1rem</div>
<div class="pb-4">Padding bottom: 1.5rem</div>
<div class="mx-auto">Horizontal margin: auto (centering)</div>
<div class="p-0">No padding</div>
```
### Visibility Utilities
| Class | Description |
|-------|-------------|
| `.visible` | Makes element visible (default) |
| `.invisible` | Hides element but maintains space |
| `.visually-hidden` | Hides from screen but accessible |
**Key Difference**: `.d-none` removes from flow, `.invisible` keeps space.
---
## 6. Bootstrap Components
### A. Alerts
Contextual feedback messages.
```html
<div class="alert alert-primary" role="alert">
Primary alert
</div>
<div class="alert alert-success" role="alert">
Success! Operation completed.
</div>
<div class="alert alert-danger" role="alert">
Error! Something went wrong.
</div>
<div class="alert alert-warning alert-dismissible fade show" role="alert">
<strong>Warning!</strong> This can be dismissed.
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
</div>
```
**Alert Types**: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`
### B. Buttons
#### Basic Button
```html
<button type="button" class="btn btn-primary">Primary</button>
```
#### Button Variants
```html
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>
<button class="btn btn-info">Info</button>
<button class="btn btn-light">Light</button>
<button class="btn btn-dark">Dark</button>
<button class="btn btn-link">Link</button>
```
#### Button Sizes
```html
<button class="btn btn-primary btn-lg">Large</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-sm">Small</button>
```
#### Outline Buttons
```html
<button class="btn btn-outline-primary">Outline Primary</button>
```
### C. Dropdowns
```html
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button"
data-bs-toggle="dropdown" aria-expanded="false">
Dropdown Button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action 1</a></li>
<li><a class="dropdown-item" href="#">Action 2</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated action</a></li>
</ul>
</div>
```
### D. Modals
Dialog boxes/popup windows.
```html
<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal"
data-bs-target="#exampleModal">
Launch Modal
</button>
<!-- Modal Structure -->
<div class="modal fade" id="exampleModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<!-- Modal Body -->
<div class="modal-body">
<p>Modal content goes here.</p>
</div>
<!-- Modal Footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
```
**Modal Sizes**: Add `.modal-sm`, `.modal-lg`, or `.modal-xl` to `.modal-dialog`
---
## 7. Important Concepts & Exam Tips
### Mobile-First Approach
1. **Default styles** are for mobile devices
2. **Enhancements** are added for larger screens using `min-width` media queries
3. **Benefits**: Better performance, progressive enhancement
### Grid System Rules
1. **Containers → Rows → Columns** (hierarchy must be maintained)
2. **Maximum 12 columns** per row (can use fewer)
3. **Columns wrap** when total exceeds 12
4. Use **responsive classes** for different screen sizes
### Breakpoint Strategy
- **xs**: Extra small (default, no prefix needed)
- **sm**: Small (≥576px)
- **md**: Medium (≥768px)
- **lg**: Large (≥992px)
- **xl**: Extra large (≥1200px)
- **xxl**: Extra extra large (≥1400px)
### Common Pitfalls to Avoid
1. **Missing viewport meta tag** → Breaks responsiveness
2. **Incorrect JavaScript order** → jQuery must come before Bootstrap JS
3. **Forgetting container/row structure** → Grid won't work properly
4. **Overriding Bootstrap styles improperly** → Use custom CSS files after Bootstrap
### Memory Aids
- **"C-R-C"**: Container → Row → Column (grid hierarchy)
- **"m"** for margin, **"p"** for padding
- **Breakpoint order**: xs < sm < md < lg < xl < xxl (alphabetical-ish)
- **12-column grid**: Think of a clock face (12 hours)
### Quick Revision Checklist
- [ ] Bootstrap is mobile-first and responsive
- [ ] Uses 12-column grid system
- [ ] Six breakpoints: xs, sm, md, lg, xl, xxl
- [ ] Three main components: Container, Row, Column
- [ ] Utilities for spacing, display, and visibility
- [ ] Pre-styled components (buttons, alerts, modals, etc.)
- [ ] Requires jQuery for JavaScript components
- [ ] Comprehensive documentation available
---
## 8. Sample Exam Questions & Answers
**Q1: Explain Bootstrap's mobile-first approach.**
**A**: Bootstrap uses a mobile-first approach where default styles are designed for mobile devices. Media queries with `min-width` are used to add enhancements for larger screens. This ensures better performance on mobile and progressive enhancement.
**Q2: How does Bootstrap's grid system work?**
**A**: The grid uses containers, rows, and columns. Containers wrap content, rows create horizontal groups, and columns (up to 12 per row) hold content. It's responsive with breakpoint-specific classes (.col-sm-*, .col-md-*, etc.).
**Q3: Differentiate between .d-none and .invisible classes.**
**A**: `.d-none` sets `display: none`, removing element from document flow. `.invisible` sets `visibility: hidden`, hiding element but keeping its space.
**Q4: Write HTML for a 3-column layout that becomes vertical on mobile.**
```html
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>
```
---
**Keywords for Exams**: Responsive Design, Mobile-First, Grid System, Breakpoints, Media Queries, Containers, Utilities, Components, jQuery Dependency.
**Scoring Tip**: Always include code examples with explanations. Mention specific class names and their purposes. Discuss the 12-column grid system and breakpoints in detail for maximum marks.
|
|
Notes is a web-based application for online taking notes. You can take your notes and share with others people. If you like taking long notes, notes.io is designed for you. To date, over 8,000,000,000+ notes created and continuing...
With notes.io;
- * You can take a note from anywhere and any device with internet connection.
- * You can share the notes in social platforms (YouTube, Facebook, Twitter, instagram etc.).
- * You can quickly share your contents without website, blog and e-mail.
- * You don't need to create any Account to share a note. As you wish you can use quick, easy and best shortened notes with sms, websites, e-mail, or messaging services (WhatsApp, iMessage, Telegram, Signal).
- * Notes.io has fabulous infrastructure design for a short link and allows you to share the note as an easy and understandable link.
Fast: Notes.io is built for speed and performance. You can take a notes quickly and browse your archive.
Easy: Notes.io doesn’t require installation. Just write and share note!
Short: Notes.io’s url just 8 character. You’ll get shorten link of your note when you want to share. (Ex: notes.io/q )
Free: Notes.io works for 14 years and has been free since the day it was started.
You immediately create your first note and start sharing with the ones you wish. If you want to contact us, you can use the following communication channels;
Email: [email protected]
Twitter: http://twitter.com/notesio
Instagram: http://instagram.com/notes.io
Facebook: http://facebook.com/notesio
Regards;
Notes.io Team
