Responsive Grid System

The Container component provides the foundational wrapper for the grid system. It centers content horizontally and applies responsive max-widths at different breakpoints.

Props

Usage

The Row component creates a horizontal group of columns. It handles negative margins to offset column padding for proper alignment.

Props

Usage

The Col component defines a column within a row. It supports responsive width and offset settings across 7 breakpoints.

Props

Usage

Control the aspect ratio of elements, ensuring that they maintain a consistent width-to-height proportion regardless of their content or container width. This is particularly useful for embedding responsive videos, iframes, or images where a specific aspect ratio must be preserved.

How it Works

These utilities leverage a common CSS technique that uses a `padding-top` percentage, which is relative to the element's width, to create a fixed aspect ratio container. The base class, `.ratio`, sets up the necessary positioning context (`position: relative; width: 100%;`) and applies the `padding-top` via a CSS variable (`--bs-aspect-ratio`).

Child elements within the `.ratio` container are then absolutely positioned to `top: 0; left: 0; width: 100%; height: 100%;`, allowing them to fill the space created by the padding hack while maintaining the desired aspect ratio of the parent. This method ensures responsiveness by scaling the height proportionally with the width.

Aspect Ratio Class Selector Reference

The following patterns outline all available aspect ratio utility classes. These classes are applied to the *parent* container of the content you want to maintain an aspect ratio for.

Aspect Ratio Classes:

Control borders with these utility classes. You can add or remove borders from all sides or individual sides, adjust border width, and apply various border radius styles.

Additive Borders

Add borders to an element or just to specific sides.

Subtractive Borders

Remove borders from an element or specific sides.

Border Width

Change the width of an element's border.

Border Radius

Apply different levels of border-radius to elements.

Border Radius by Side

Apply border-radius to specific corners or sides.

Border Class Selector Reference

The following patterns outline all available border utility classes.

Additive Borders:

Subtractive Borders:

Border Width:

Border Radius:

Border Radius by Side:

Control the display property of elements with these utilities. These classes can also be applied responsively using the .d-{breakpoint}-{value} format, and for print-specific layouts with .d-print-{value}.

Basic Display Classes

Apply fundamental display behaviors to any element.

Responsive Display

Apply display utilities responsively by using breakpoint prefixes. For example, .d-md-block will set the display to block on medium screens and up, while .d-lg-none will hide the element on large screens and up.

Print Display

Control the display property specifically for print media. These classes are applied only when the page is printed.

Display Class Selector Reference

The following patterns outline all available display utility classes.

General Display Classes:

Responsive Display Classes:

Apply display utilities responsively by appending the breakpoint abbreviation to the class name. For example, .d-sm-none to hide on small screens and up, or .d-lg-block to make an element block-level on large screens and up.

Print Display Classes:

Control the display property of elements specifically for print using the .d-print-{value} classes.

Utilize these comprehensive flexbox utilities to control the layout, alignment, and responsiveness of content within a flex container. Remember to apply a .d-flex or .d-inline-flex class to the parent element to enable flexbox behavior.

Most flex utilities also support responsive variants (e.g., .flex-md-row, .justify-content-lg-center), allowing you to adapt layouts at different breakpoints.

Flex Direction

Control the direction of flex items along the main axis within a flex container.

.flex-row (default)

Items are laid out in a row (left to right for LTR languages).

.flex-row-reverse

Items are laid out in a row, but in reverse order.

.flex-column

Items are laid out in a column (top to bottom).

.flex-column-reverse

Items are laid out in a column, but in reverse order.

Flex Wrap

Control whether flex items wrap onto multiple lines or stay on a single line.

.flex-wrap

Items wrap onto multiple lines if space is insufficient.

.flex-nowrap (default)

Items stay on a single line, potentially overflowing the container.

.flex-wrap-reverse

Items wrap onto multiple lines in reverse order.

Justify Content

Align flex items along the main axis of the container.

.justify-content-start (default)

.justify-content-end

.justify-content-center

.justify-content-between

.justify-content-around

.justify-content-evenly

Align Items

Align flex items along the cross axis (perpendicular to the main axis) of the container.

.align-items-start

.align-items-end

.align-items-center

.align-items-baseline

.align-items-stretch (default)

Align Content

Align lines of flex items when there's extra space in the cross axis and items are wrapped.

.align-content-start

.align-content-end

.align-content-center

.align-content-between

.align-content-around

.align-content-stretch (default)

Align Self

Align individual flex items along the cross axis, overriding the container's align-items setting.

Flex Grow & Shrink

Control how flex items grow or shrink to fill available space.

.flex-fill

Items with .flex-fill will grow and shrink to fill available space equally.

.flex-grow-1 vs .flex-grow-0

.flex-grow-1 allows an item to grow, .flex-grow-0 prevents it from growing.

.flex-shrink-1 vs .flex-shrink-0

.flex-shrink-1 allows an item to shrink, .flex-shrink-0 prevents it from shrinking.

Flex Class Selector Reference

The following patterns outline all available flexbox utility classes.

Flex Direction:

Flex Wrap:

Justify Content (Main Axis Alignment):

Align Items (Cross Axis Alignment - Single Line):

Align Content (Cross Axis Alignment - Multi-Line):

Note: This only applies when flex items wrap (i.e., when using .flex-wrap).

Align Self (Cross Axis Alignment - Individual Item):

Flex Grow & Shrink:

Float elements to the left or right of a container, or disable floating, with these utility classes. Floats affect the layout of surrounding content, causing text to wrap around the floated element.

These utilities also include responsive variants (e.g., .float-md-start, .float-lg-none) to control float behavior at specific breakpoints.

.float-start

Floats an element to the left.

.float-end

Floats an element to the right.

.float-none

Disables floating on an element. Useful for resetting float behavior inherited from parent elements or previous responsive breakpoints.

Clearfix

The .clearfix utility can be applied to a parent element to clear (contain) its floated children. This prevents the parent from collapsing in height and ensures that subsequent content appears below the floated elements, not alongside them.

Float Class Selector Reference

The following patterns outline all available float utility classes.

Float Classes:

Responsive Float Classes:

Apply float utilities responsively by appending the breakpoint abbreviation to the class name. This allows for different float behaviors based on screen size.

Clearfix Utility:

                                            .clearfix::after {
                                            display: block;
                                            clear: both;
                                            content: "";
                                            }
                                        

The gap utilities allow you to control the spacing between items in flexbox and grid layouts. They provide a shorthand for setting both row-gap and column-gap, or you can specify them individually.

How it Works

The gap CSS property sets the space between rows and columns. It's a shorthand for row-gap and column-gap. These utilities are applied to the *container* of flex items or grid items, not to the items themselves. They are essential for creating clean and consistent spacing within dynamic layouts without resorting to margins on individual items, which can often lead to layout complexities.

These utilities support a range of predefined spacing values, which correspond to a spacing scale (e.g., `0.25rem`, `0.5rem`, `1rem`, `1.5rem`, `3rem`), and include responsive variations for different screen sizes.

Examples

Observe how different gap utilities affect the spacing of items within a flex container.

Code Examples

<!-- General gap (both row and column gap) -->
<div class="d-flex flex-wrap gap-3">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Row gap only -->
<div class="d-flex flex-wrap row-gap-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Column gap only -->
<div class="d-flex flex-wrap column-gap-5">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>

<!-- Responsive gap example -->
<div class="d-flex flex-wrap gap-xxs-0 gap-lg-4">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
</div>
                            

Gap Class Selector Reference

The following patterns outline all available gap utility classes, including their responsive variations. Values (0-5) correspond to a spacing scale where 0 is 0, 1 is 0.25rem, 2 is 0.5rem, 3 is 1rem, 4 is 1.5rem, and 5 is 3rem.

Base Gap Classes:

Responsive Gap Classes:

These classes apply the gap only at the specified breakpoint and up. Breakpoints include xxs, xs, sm, md, lg, xl, and xxl.

Control user interaction with elements, including cursor styles and focus indicators, using these utility classes.

Cursor Utilities

Change the appearance of the mouse cursor when hovering over an element. This is useful for providing visual feedback to the user about interactive elements or non-interactive areas.

Focus Utilities

The .focus-ring utility provides a custom, consistent visual indicator when an interactive element receives keyboard focus (e.g., by tabbing through elements) or is clicked. It overrides the browser's default outline with a styled box-shadow, improving accessibility and visual consistency.

Interactions Class Selector Reference

The following patterns outline all available interaction utility classes.

Cursor Classes:

Focus Ring Class:

    .focus-ring:focus {
        outline: 0 !important;
        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
        }
                                        

Control how images, videos, and other replaced elements are resized to fit their container. These utilities apply the object-fit CSS property, which is crucial for maintaining aspect ratios and preventing content distortion within responsive layouts.

How it Works

The object-fit property specifies how the content of a replaced element (like <img> or <video>) should be resized to fit its container, while maintaining its aspect ratio if desired. Unlike background images, which use background-size, object-fit applies directly to the element itself.

These utility classes offer five different behaviors: contain, cover, fill, scale-down, and none, providing flexible control over how your media scales and crops within a given dimension.

Examples

See how different object-fit classes affect an image within a fixed-size container. The container for each image is 150px by 150px.

.object-fit-contain

The image is scaled down to fit within the container while maintaining its aspect ratio. Empty space is added if necessary.

.object-fit-cover

The image fills the container, maintaining its aspect ratio. Portions of the image may be clipped if its aspect ratio differs from the container.

.object-fit-fill

The image fills the container, stretching or squishing to do so. The aspect ratio is **not** maintained.

.object-fit-scale (maps to `scale-down`)

The image is scaled down to the smallest size as if `none` or `contain` were specified. The smaller concrete size is used.

.object-fit-none

The image is not resized. It maintains its intrinsic size. If larger than the container, it will be clipped.

Code Examples

<!-- Container for demonstration (fixed size, overflow hidden) -->
<div style="width: 150px; height: 150px; overflow: hidden;">
    <img src="path/to/your/image.jpg" class="object-fit-contain" alt="Description">
</div>

<!-- object-fit: contain -->
<img src="path/to/your/image.jpg" class="object-fit-contain" style="width: 100%; height: 100%;">

<!-- object-fit: cover -->
<img src="path/to/your/image.jpg" class="object-fit-cover" style="width: 100%; height: 100%;">

<!-- object-fit: fill -->
<img src="path/to/your/image.jpg" class="object-fit-fill" style="width: 100%; height: 100%;">

<!-- object-fit: scale-down (using .object-fit-scale utility) -->
<img src="path/to/your/image.jpg" class="object-fit-scale" style="width: 100%; height: 100%;">

<!-- object-fit: none -->
<img src="path/to/your/image.jpg" class="object-fit-none" style="width: 100%; height: 100%;">
                            

Object Fit Class Selector Reference

The following patterns outline all available object-fit utility classes.

Object Fit Classes:

Control the opacity (transparency) of elements with these utility classes. Opacity values range from `0` (fully transparent) to `100` (fully opaque), affecting the visibility of the element itself and its content.

Examples

Opacity Class Selector Reference

The following patterns outline all available opacity utility classes.

Opacity Classes:

Control the visual order of flex items with these utility classes. These classes apply the order CSS property, allowing you to reorder items within a flex container regardless of their source order in the HTML.

How it Works

Order utility classes are used on **flex items** (direct children of a flex container, i.e., an element with `display: flex` or `display: inline-flex`). The base classes follow the pattern .order-{value}, where {value} typically ranges from 0 to 5. Additionally, special classes like .order-first and .order-last are available to quickly position items at the beginning or end of the flex line, respectively.

Order utilities also support responsive variations using standard breakpoints (e.g., .order-md-2, .order-lg-first), allowing for different visual orders on various screen sizes.

Examples

Demonstrations of how order utilities reorder flex items:

Order Class Selector Reference

The following patterns outline all available order utility classes.

Default Order Classes:

Responsive Order Classes:

Apply order utilities responsively by appending the breakpoint abbreviation to the class name. This allows for different visual orders based on screen size.

Control how content that overflows an element's box is handled. These utilities apply the CSS overflow, overflow-x, and overflow-y properties.

Common Overflow Values

Apply these classes to control overflow on both horizontal and vertical axes simultaneously.

Horizontal Overflow (overflow-x)

Control horizontal content overflow behavior only, while vertical overflow remains at its default or defined value (e.g., `visible`).

Vertical Overflow (overflow-y)

Control vertical content overflow behavior only, while horizontal overflow remains at its default or defined value (e.g., `visible`).

Overflow Class Selector Reference

The following patterns outline all available overflow utility classes.

General Overflow Classes:

Horizontal Overflow Classes (X-axis):

Vertical Overflow Classes (Y-axis):

Control the positioning method and exact placement of elements using these utility classes.

Position Types

Apply these classes to change the position property of an element, affecting how it is positioned in the document flow.

Top, Bottom, Start, End Positioning

Use these utilities (e.g., `top-0`, `start-50`, `bottom-100`) to precisely place positioned elements (like `position-absolute` or `position-fixed`) relative to their containing block or the viewport.

Position Class Selector Reference

Translate for Centering

Conveniently center an absolutely positioned element (both horizontally and vertically) within its parent by combining `top-50`, `start-50`, and the `translate-middle` utility.

Apply various box shadows to elements for depth and visual elevation using these utility classes.

Shadow Class Selector Reference

Examples

Sizing Class Selector Reference

Set the width and height of elements quickly and responsively using these concise utility classes, supporting percentage and viewport units.

Width Utilities

Height Utilities

Max-Width & Max-Height

Min-Viewport & Viewport Sizing

Examples

Note: To see `vh-100` or `vw-100` in action, you'd typically apply them to a top-level element or test in a separate context to observe full viewport coverage.

Control the margin and padding of elements with a comprehensive set of responsive spacing utility classes. These classes are built on a consistent spacing scale, allowing for precise control over element positioning and layout.

How it Works

Spacing classes are named using the format .{property}{sides}-{size} for fixed spacing, .{property}{sides}-{breakpoint}-{size} for responsive spacing, and .m{sides}-n{size} for negative margins.

Spacing Scale Values

The spacing scale is based on a default $spacer of 1rem (typically 16px). The sizes correspond to:

Examples

Here are some practical examples of using spacing utilities:

Spacing Class Selector Reference

The following patterns outline all available spacing utility classes. Breakpoints (sm, md, lg, xl, xxl) can be inserted before the size for responsive variants.

Margin Classes (m):

Padding Classes (p):

Control the appearance and behavior of text content with a comprehensive set of utility classes for alignment, transformation, weight, style, decoration, line height, font size, user selection, and pointer events.

How it Works

Text utility classes are primarily named using descriptive patterns such as .text-{value} for alignment, .fw-{value} for font weight, or .fs-{value} for font size. Many text alignment classes also support responsive variations using standard breakpoints (sm, md, lg, xl, xxl), following the pattern .text-{breakpoint}-{align}.

Responsive Text Alignment

Text alignment can be applied responsively to different screen sizes. For example, applying .text-center will center text on all screen sizes, whereas .text-md-start will align text to the start (left in LTR) only on medium (md) screens and up, overriding any smaller breakpoint alignment.

Examples

Demonstrations of various text utility classes:

Text Class Selector Reference

The following patterns outline all available text utility classes. Responsive variants are primarily available for text alignment.

Text Alignment:

Text Transformation:

Text Wrapping & Overflow:

Font Weight:

Font Style:

Text Decoration:

Line Height:

Font Size:

User Selection:

Pointer Events:

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements with these utility classes. These classes apply the vertical-align CSS property.

How it Works

Vertical alignment utility classes are named using the pattern .align-{value}, where {value} corresponds to standard CSS vertical-align property values. These classes are designed to work effectively on elements that have an intrinsic vertical alignment behavior, such as images, icons, or cells within a table layout.

Examples

Demonstrations of various vertical alignment utility classes, applied to inline elements within a shared baseline:

Vertical Alignment Class Selector Reference

The following patterns outline all available vertical alignment utility classes.

Vertical Alignment:

Control the visibility of elements without affecting their layout in the document flow. Elements with these utilities will still occupy their designated space even when hidden.

How it Works

Visibility utility classes are straightforward, directly applying the visibility CSS property. The .visible class makes an element visible, while the .invisible class hides it. Importantly, unlike display: none, hidden elements still consume layout space.

Examples

Demonstrations of visibility utility classes and their effect on layout:

Visibility Class Selector Reference

The following patterns outline all available visibility utility classes.

Visibility:

Control the stacking order of elements along the Z-axis (depth). These utilities apply the z-index CSS property, allowing you to specify which elements appear on top of others when they overlap.

How it Works

The z-index property affects elements that are positioned (i.e., have a position value other than static, such as relative, absolute, fixed, or sticky). Elements with a higher z-index value will appear on top of elements with a lower value when they overlap within the same stacking context.

These utilities provide predefined z-index values from -1 to 3, allowing for quick control over stacking order for common UI patterns like modals, tooltips, and overlapping components. Remember that `z-index` only works on positioned elements.

Examples

Observe how different z-index utilities affect the stacking order of overlapping elements. Each example uses absolutely positioned elements within a relative container.

Code Examples

<!-- Example of Z-index usage -->
<div class="position-relative" style="height: 150px; border: 1px dashed #ccc;">
    <div class="position-absolute z-1" style="top: 10px; left: 10px; background-color: red;">Element A (z-1)</div>
    <div class="position-absolute z-3" style="top: 30px; left: 30px; background-color: green;">Element B (z-3)</div>
    <div class="position-absolute z-2" style="top: 50px; left: 50px; background-color: blue;">Element C (z-2)</div>
</div>

<!-- Example with negative z-index -->
<div class="position-relative" style="height: 150px; border: 1px dashed #ccc;">
    <div class="position-absolute" style="top: 0; left: 0; width: 100%; height: 100%; background-color: lightyellow; z-index: 0;">Background Layer (z-0)</div>
    <div class="position-absolute z-n1" style="top: 20px; left: 20px; background-color: lightcoral;">Hidden Behind (z-n1)</div>
    <div class="position-absolute z-1" style="top: 40px; left: 40px; background-color: lightblue;">On Top (z-1)</div>
</div>
                        

Z-Index Class Selector Reference

The following patterns outline all available z-index utility classes.

Z-Index Classes: