Colors

Colors · Bootstrap v5.0

Convey meaning through color with a handful of color utility classes.

Text Color

   .text-primary

   .text-success

   .text-danger

   .text-warning

   .text-gold

   .text-light

   .text-info

   .text-dark

   .text-muted

   .text-white

Background color

Similar to the contextual text color classes, set the background of an element to any contextual class. Background utilities do not set color, so in some cases you’ll want to use .text-* color utilities.

   .bg-primary

   .bg-success

   .bg-danger

   .bg-warning

   .bg-gold

   .bg-light

   .bg-info

   .bg-dark

   .bg-muted

   .bg-white

Margin and Padding

Spacing · Bootstrap v5.0

 Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .25rem to 3rem.

 Using the CSS Grid layout module? Consider using the gap utility.

 Properties

 Spacing utilities that apply to all breakpoints, from xs to xxl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

   The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, xl, and xxl.

   Where property is one of:

•        m - for classes that set margin    
•        p - for classes that set padding    

   Where sides is one of:

•        t - for classes that set margin-top or padding-top    
•        b - for classes that set margin-bottom or padding-bottom    
•        s - (start) for classes that set margin-left or padding-left in LTR, margin-right or padding-right in RTL    
•        e - (end) for classes that set margin-right or padding-right in LTR, margin-left or padding-left in RTL    
•        x - for classes that set both *-left and *-right    
•        y - for classes that set both *-top and *-bottom    
•        blank - for classes that set a margin or padding on all 4 sides of the element    

   Where size is one of:

   (( $spacer: 1rem !default; ))

•        0 - for classes that eliminate the margin or padding by setting it to 0    
•        1 - (by default) for classes that set the margin or padding to $spacer * .25 // 4px    
•        2 - (by default) for classes that set the margin or padding to $spacer * .5 // 8px    
•        3 - (by default) for classes that set the margin or padding to $spacer    // 16px   
•        4 - (by default) for classes that set the margin or padding to $spacer * 1.5   
•        5 - (by default) for classes that set the margin or padding to $spacer * 2    
•        6 - (by default) for classes that set the margin or padding to $spacer * 3    
•        7 - (by default) for classes that set the margin or padding to $spacer * 4    
•        8 - (by default) for classes that set the margin or padding to $spacer * 5    
•        9 - (by default) for classes that set the margin or padding to $spacer * 6    
•        10 - (by default) for classes that set the margin or padding to $spacer * 7    
•        auto - for classes that set the margin to auto    

Usage Examples

.mt-0 {
    margin-top: 0 !important;
}
.ms-1 {
    margin-left: ($spacer * .25) !important;
}
.px-2 {
    padding-left: ($spacer * .5) !important;
    padding-right: ($spacer * .5) !important;
}
.p-3 {
    padding: $spacer !important;
}

Float

Float · Bootstrap v5.0

   Toggle floats on any element, across any breakpoint, using our responsive float utilities.

<div class="float-start">Float start on all viewport sizes</div><br>
<div class="float-end">Float end on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

   Here are all the support classes:

•        .float-start    
•        .float-end    
•        .float-none    
•        .float-sm-start    
•        .float-sm-end    
•        .float-sm-none    
•        .float-md-start    
•        .float-md-end    
•        .float-md-none    
•        .float-lg-start    
•        .float-lg-end    
•        .float-lg-none    
•        .float-xl-start    
•        .float-xl-end    
•        .float-xl-none    
•        .float-xxl-start    
•        .float-xxl-end    
•        .float-xxl-none    

Breakpoints

Breakpoints · Bootstrap v5.0

   Breakpoints are customizable widths that determine how your responsive layout behaves across device or viewport sizes in Bootstrap.

Available breakpoints

   Bootstrap includes six default breakpoints, sometimes referred to as grid tiers, for building responsively. These breakpoints can be customized if you’re using our source Sass files.

Each breakpoint was chosen to comfortably hold containers whose widths are multiples of 12. Breakpoints are also representative of a subset of common device sizes and viewport dimensions—they don’t specifically target every use case or device. Instead, the ranges provide a strong and consistent foundation to build on for nearly any device.

Grid system

Grid system · Bootstrap v5.0

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

Basic Grid Structure

<div class="container">
    <div class="row">
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
        <div class="col">
            Column
        </div>
    </div>
</div>

Grid options

   Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:

•        Extra small (xs)    
•        Small (sm)    
•        Medium (md)    
•        Large (lg)    
•        Extra large (xl)    

•        Extra extra large (xxl)    

        

   For more information on grid systems, please read the documentation on usage: https://getbootstrap.com/docs/5.0/layout/grid/

Typography

Typography · Bootstrap v5.0

   Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

Font Weight and Italics   

<p class="text-start">Start aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-end">End aligned text on all viewport sizes.</p>

Font Weights and Italics

<p class="fw-bold">Bold text.</p>
<p class="fst-italic">Italic text.</p>
<p class="fst-normal">Text with normal font style</p>