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 |
