Turning Learners into Developers
What is Bootstrap 5?
Bootstrap was created in 2011 by Mark Otto and Jacob Thornton at Twitter as an open-source framework to build responsive websites quickly. Over time, it evolved into Bootstrap 5, offering modern, mobile-first design without jQuery.
- Layout & Grid System
Class | Example | Description |
|---|---|---|
.container | <div class="container"> | Fixed responsive container |
.container-fluid | <div class="container-fluid"> | Full-width container |
.container-sm/md/lg/xl/xxl | <div class="container-lg"> | Breakpoint container |
.row | <div class="row"> | Grid row |
.col | <div class="col"> | Auto column |
| <div class="col-6"> | Fixed columns |
.col-sm-* | <div class="col-sm-4"> | Responsive columns |
.offset-* | <div class="offset-3"> |
|
.g-* | <div class="g-3"> | Gutters |
.gx-* / .gy-* | <div class="gx-2"> | Horizontal/Vertical gutters |
- Typography
Class | Example | Description |
|---|---|---|
.h1–.h6 | <p class="h1"> | Heading styles |
.display-1–6 | <h1 class="display-1"> | Large headings |
.lead | <p class="lead"> | Lead paragraph |
.fw-bold | <p class="fw-bold"> | Bold |
.fw-normal | <p class="fw-normal"> | Normal |
.fw-light | <p class="fw-light"> | Light |
.fst-italic | <p class="fst-italic"> | Italic |
.fst-normal | <p class="fst-normal"> | Normal font style |
.lh-1 / sm / base / lg | <p class="lh-lg"> | Line height |
- Text Alignment & Transform
Class | Example | Description |
|---|---|---|
.text-start |
| Left |
.text-center | <p class="text-center"> | Center |
.text-end | <p class="text-end"> | Right |
.text-uppercase | <p class="text-uppercase"> | Uppercase |
.text-lowercase | <p class="text-lowercase"> | Lowercase |
.text-capitalize | <p class="text-capitalize"> | <p class="text-capitalize"> |
.text-decoration-none | <a class="text-decoration-none"> | Remove underline |
.text-break | <p class="text-break"> | Break long text |
- Text & Background Colors
Class | Example | Description |
|---|---|---|
.text-primary | <p class="text-primary"> | Primary |
.text-secondary | <p class="text-secondary"> | Secondary |
.text-success | <p class="text-success"> | Success |
.text-danger | <p class="text-danger"> | Danger |
.text-warning | <p class="text-warning"> | Warning |
.text-info | <p class="text-info"> | Info |
.text-dark | <p class="text-dark"> | Dark |
.text-muted | <p class="text-muted"> | Muted |
.bg-primary | <div class="bg-primary"> | Background |
.bg-light / dark / success / danger | <div class="bg-dark"> | Background colors |
- Spacing Utilities
Class | Example | Description |
|---|---|---|
.m-0–5 | <div class="m-3"> | Margin |
.mt / mb / ms / me-* | <div class="mt-4"> | Directional margin |
.mx / my-* | <div class="mx-2"> | Horizontal/Vertical |
.p-0–5 | <div class="p-3"> | Padding |
.pt / pb / ps / pe-* | <div class="pt-2"> | Directional padding |
- Display & Visibility
Class | Example | Description |
|---|---|---|
.d-none | <div class="d-none"> | Hide |
.d-block | <div class="d-block"> | Block |
.d-inline | <span class="d-inline"> | Inline |
.d-inline-block | <span class="d-inline-block"> | Inline block |
.d-flex | <div class="d-flex"> | Flex |
.d-grid | <div class="d-grid"> | CSS Grid |
.d-sm-none | <div class="d-sm-none"> | Responsive display |
- Flex Utilities
Class | Example | Description |
|---|---|---|
.flex-row | <div class="flex-row"> | Row |
.flex-column | <div class="flex-column"> | Column |
.flex-wrap | <div class="flex-wrap"> | Wrap |
.justify-content-start/center/end/between/around | <div class="justify-content-center"> | Horizontal alignment |
.align-items-start/center/end/stretch | <div class="align-items-center"> | Vertical alignment |
.align-self-start/end | <div class="align-self-end"> | Self alignment |
- Buttons
Class | Example | Description |
|---|---|---|
.btn | <button class="btn"> | Base |
.btn-primary | <button class="btn btn-primary"> | Primary |
.btn-secondary | <button class="btn btn-secondary"> | Secondary |
.btn-success/danger/warning/info | <button class="btn btn-success"> | Colors |
.btn-outline-* | <button class="btn btn-outline-primary"> | Outline |
.btn-lg | <button class="btn btn-lg"> | Large |
.btn-sm | <button class="btn btn-sm"> | Small |
.disabled | <button class="disabled"> | Disabled |
- Forms
Class | Example | Description |
|---|---|---|
.form-control | <input class="form-control"> | Input |
.form-label | <label class="form-label"> | Label |
.form-check | <div class="form-check"> | Checkbox |
.form-check-input | <input class="form-check-input"> | Input |
.form-check-label | <label class="form-check-label"> | Label |
.form-select | [select class="form-select"] | Dropdown |
.form-range | <input type="range" class="form-range"> | Range |
.is-valid / is-invalid | <input class="is-valid"> | Validation |
- Tables
Class | Example | Description |
|---|---|---|
.table | <table class="table"> | Base table |
.table-striped | <table class="table-striped"> | Striped |
.table-bordered | <table class="table-bordered"> | Bordered |
.table-hover | <table class="table-hover"> | Hover |
.table-sm | <table class="table-sm"> | Small |
.table-responsive | <div class="table-responsive"> | Scrollable |
- Components
Class | Example | Description |
|---|---|---|
.card | <div class="card"> | Card |
.card-header/body/footer | <div class="card-body"> | Card sections |
.alert | <div class="alert alert-success"> | Alerts |
.badge | <span class="badge bg-primary"> | Badge |
.navbar | <nav class="navbar"> | Navbar |
.breadcrumb | <nav class="breadcrumb"> | Breadcrumb |
<div class="progress"> | <div class="progress"> | Progress |
.list-group | <ul class="list-group"> | Lists |
- Images & Media
Class | Example | Description |
|---|---|---|
.img-fluid | <img class="img-fluid"> | Responsive image |
.img-thumbnail | <img class="img-thumbnail"> | Thumbnail |
.figure | <figure class="figure"> | Figure |
.figure-caption | <figcaption> | Caption |
- Position & Overflow
Class | Example | Description |
|---|---|---|
.position-static | <div class="position-static"> | Static |
.position-relative | <div class="position-relative"> | Relative |
.position-absolute | <div class="position-absolute"> | Absolute |
.position-fixed | <div class="position-fixed"> | Fixed |
.position-sticky | <div class="position-sticky"> | Sticky |
.top-0 / bottom-0 / start-0 / end-0 | <div class="top-0"> | Position helpers |
.overflow-hidden | <div class="overflow-hidden"> | Hide overflow |
.overflow-auto | <div class="overflow-auto"> | Scroll |
- Utilities & Helpers
Class | Example | Description |
|---|---|---|
.shadow / shadow-sm / shadow-lg | <div class="shadow"> | Shadows |
.rounded / rounded-pill | <div class="rounded-pill"> | Rounded |
.rounded-circle | <div class="rounded-circle"> | Circle |
.opacity-0–100 | <div class="opacity-50"> | Transparency |
.ratio-1x1 / 16x9 / 4x3 | <div class="ratio ratio-16x9"> | Aspect ratio |
.visually-hidden | <span class="visually-hidden"> | Screen reader only |
