Grid System
| Name |
Syntax |
Description |
|
|
.container
|
<div class="container">
|
A responsive fixed-width container. Centers content and provides horizontal padding. Use .container-fluid for full width...
|
Details →
|
|
.row
|
<div class="row">
|
Creates a horizontal group of columns using flexbox. Must be placed inside a .container.
|
Details →
|
|
.col-*
|
<div class="col-sm-6 col-md-4 col-lg-3">
|
Grid column classes. Numbers 1-12 define width. Breakpoints: xs (default), sm, md, lg, xl, xxl.
|
Details →
|
Utilities
| Name |
Syntax |
Description |
|
|
d-* (display)
|
class="d-none d-md-block"
|
Control display property at any breakpoint. Values: none, block, inline, inline-block, flex, grid, table.
|
Details →
|
|
p-* / m-* (spacing)
|
class="p-3 mt-2 mb-4 px-5 py-2 ms-auto"
|
Margin (m) and padding (p) utilities. Sizes 0-5 and auto. Directions: t, b, s, e, x, y, or all sides.
|
Details →
|
|
w-* / h-* (sizing)
|
class="w-100 h-50 mw-100 vh-100"
|
Width and height utilities as percentages: 25, 50, 75, 100, auto. Viewport: vw-100, vh-100.
|
Details →
|
|
rounded / shadow / border
|
class="rounded rounded-circle shadow border"
|
Utility classes for border radius, shadows, and borders.
|
Details →
|
|
position utilities
|
class="position-relative position-absolute top-0 s...
|
Position utility classes. Values: static, relative, absolute, fixed, sticky. Combined with top/start/end/bottom.
|
Details →
|
Typography
| Name |
Syntax |
Description |
|
|
Display headings
|
class="display-1" through class="display-6"
|
Extra-large headings for hero sections. Larger and lighter weight than default h1-h6.
|
Details →
|
|
text-* (alignment & transform)
|
class="text-center text-uppercase text-truncate"
|
Text alignment, transformation, and overflow utilities.
|
Details →
|
Colors
| Name |
Syntax |
Description |
|
|
text-* (colors)
|
class="text-primary text-success text-danger"
|
Apply theme colors to text. Available: primary, secondary, success, danger, warning, info, light, dark, muted.
|
Details →
|
|
bg-* (backgrounds)
|
class="bg-primary bg-light bg-dark"
|
Apply theme background colors to any element.
|
Details →
|
Components
| Name |
Syntax |
Description |
|
|
.btn
|
<button class="btn btn-primary">Click</button>
|
Bootstrap button styles. Combine .btn with .btn-{variant} and optionally .btn-sm or .btn-lg.
|
Details →
|
|
.card
|
<div class="card">
|
A flexible content container with options for headers, footers, images, and body.
|
Details →
|
|
.navbar
|
<nav class="navbar navbar-expand-lg">
|
A responsive navigation header. Use .navbar-expand-{bp} to set the collapse breakpoint.
|
Details →
|
|
.modal
|
<div class="modal fade" id="myModal">
|
A dialog overlay for lightboxes, user notifications, or custom content. Requires Bootstrap JS.
|
Details →
|
|
.alert
|
<div class="alert alert-success" role="alert">
|
Provides contextual feedback messages for user actions.
|
Details →
|
|
.badge
|
<span class="badge bg-primary">New</span>
|
Small count and labelling component. Adapts to parent element size.
|
Details →
|
|
.form-control / .form-label
|
<input class="form-control" type="text">
|
Style form controls to look consistent and Bootstrap-themed.
|
Details →
|
Flexbox Utilities
| Name |
Syntax |
Description |
|
|
justify-content-* / align-items-*
|
class="d-flex justify-content-between align-items-...
|
Flexbox alignment utilities for distributing and aligning items along main and cross axes.
|
Details →
|
|
gap-* / flex-wrap
|
class="d-flex flex-wrap gap-3"
|
gap-* adds spacing between flex items; flex-wrap allows items to wrap to a new line.
|
Details →
|
No results found. Try a different search term.