11. Bootstrap

Source: Dev.to

What is Bootstrap?

Bootstrap is a popular CSS framework (alongside Foundation, MUI, Tailwind, etc.) used for fast, responsive, mobile‑first development.

When to use

• Projects that need a quick, consistent UI
• Responsive layouts across many devices

When to avoid

• Very simple projects where the overhead isn’t justified
• Highly customized or complex designs that require a bespoke approach

How to include Bootstrap via CDN

• CSS (place inside “)

• JavaScript (place before “)

The minified files (*.min.css, *.min.js) load faster because they contain no unnecessary whitespace.

Official website:

Bootstrap Layout

Bootstrap’s grid system is based on a 12‑column layout using the pattern:

container → row → col

Containers

Columns

Columns automatically adjust to the available space. Example:

  
    Hello
    Hello
    Hello
  

Breakpoints

Bootstrap defines six breakpoints:

• `

---

## Bootstrap Components

Bootstrap ships with a wide range of ready‑made components such as cards, buttons, carousels, navbars, and more.

### Navbar

A navbar can include icons via SVG:

```html
[Image: briefcase]

Or embed the SVG directly:

Snippets (Pre‑built sections)

Bootstrap provides pre‑built sections (heroes, features, footers, etc.) that you can inspect, copy, paste, and customize.

Carousel

Place a carousel inside a .container for a responsive layout:

Spacing utilities

Bootstrap offers concise classes for margin and padding:

• Property: m (margin) or p (padding)
• Side: t (top), b (bottom), s (start), e (end), x (horizontal), y (vertical)
• Size: 0 – 5 or auto

Examples:

...   
...   

Dark mode

Enable dark mode by adding the data-bs-theme="dark" attribute to the “ element:

Jumbotron‑style sections

Use a large, attention‑grabbing area (often called a “jumbotron”) to highlight testimonials, key messages, or important content.