OBE:BS4 REFERENCE
Sortable and filterable tables of color space codes and Bootstrap 4 classes that are used throughout your library.
Use the input to search and the column headers to sort!
| Name | JS Key/Prop | Hex | RGB | RGBa | HSL | HSV |
|---|
If you need to access any OBE:BS4 color values in JavaScript, you can use these handy JSON strings to bring those values into your application. You can either choose a single color space type or bring them all! NOTE: To use RGBa values in JavaScript, be sure to copy our utility function that will allow you to change the alpha value for any color value, to whatever alpha value you need. The defalut alpha value for each RGBa color value string defaluts to a string of '0.5', so you can replace that exact string with your custom alpha value.
// EXAMPLE: Parse the JSON string
const myColors = JSON.parse('PASTE_RGBa_JSON_INSIDE_THESE_QUOTES');
// EXAMPLE: Utility function to customize the alpha value of an rgba string
// NOTE: The Default alpha value for all RGBa strings is: '0.5'
const setRGBa = function (rgbaString, alphaValue) {
return alphaValue ? rgbaString.replace('0.5', alphaValue) : rgbaString;
}
// EXAMPLES IN ACTION:
let darkGray = setRGBa( myColors.darkGray.rgba, '0.75' );
let blue = myColors.blue.rgba; // Uses the default alpha value
let azure = setRGBa( myColors.azure.rgba ); // Calling without an alpha value returns default
let azure300 = setRGBa( myColors.azure300.rgba, 0.9 ); // Passed alpha value can be a number
// EXAMPLE: Parse the JSON string
const myColors = JSON.parse('PASTE_HEX_JSON_INSIDE_THESE_QUOTES');
// EXAMPLES IN ACTION:
let darkGray = myColors.darkGray.hex;
let blue = myColors.blue.hex;
let azure300 = myColors.azure300.hex;
// EXAMPLE: Parse the JSON string
const myColors = JSON.parse('PASTE_RGB_JSON_INSIDE_THESE_QUOTES');
// EXAMPLES IN ACTION:
let darkGray = myColors.darkGray.rgb;
let blue = myColors.blue.rgb;
let azure300 = myColors.azure300.rgb;
// EXAMPLE: Parse the JSON string
const myColors = JSON.parse('PASTE_HSL_JSON_INSIDE_THESE_QUOTES');
// EXAMPLES IN ACTION:
let darkGray = myColors.darkGray.hsl;
let blue = myColors.blue.hsl;
let azure300 = myColors.azure300.hsl;
// EXAMPLE: Parse the JSON string
const myColors = JSON.parse('PASTE_HSV_JSON_INSIDE_THESE_QUOTES');
// EXAMPLES IN ACTION:
let darkGray = myColors.darkGray.hsv;
let blue = myColors.blue.hsv;
let azure300 = myColors.azure300.hsv;
// EXAMPLE: Parse the JSON string
const myColors = JSON.parse('PASTE_JSON_INSIDE_THESE_QUOTES');
// EXAMPLE: Utility function to customize the alpha value of an rgba string
// NOTE: The Default alpha value for all RGBa strings is: '0.5'
const setRGBa = function (rgbaString, alphaValue) {
return alphaValue ? rgbaString.replace('0.5', alphaValue) : rgbaString;
}
// EXAMPLES IN ACTION:
let rgba_darkGray = setRGBa( myColors.darkGray.rgba, '0.75' );
let hex_blue = myColors.blue.hex;
let rgb_orange300 = myColors.orange300.rgb;
let hsl_red = myColors.red.hsl;
let hsv_chartreuse = myColors.chartreuse.hsv;
These are the available Bootstrap 4 responsive column utility classe.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .col | .col-sm | .col-md | .col-lg | .col-xl |
| .col-1 | .col-sm-1 | .col-md-1 | .col-lg-1 | .col-xl-1 |
| .col-2 | .col-sm-2 | .col-md-2 | .col-lg-2 | .col-xl-2 |
| .col-3 | .col-sm-3 | .col-md-3 | .col-lg-3 | .col-xl-3 |
| .col-4 | .col-sm-4 | .col-md-4 | .col-lg-4 | .col-xl-4 |
| .col-5 | .col-sm-5 | .col-md-5 | .col-lg-5 | .col-xl-5 |
| .col-6 | .col-sm-6 | .col-md-6 | .col-lg-6 | .col-xl-6 |
| .col-7 | .col-sm-7 | .col-md-7 | .col-lg-7 | .col-xl-7 |
| .col-8 | .col-sm-8 | .col-md-8 | .col-lg-8 | .col-xl-8 |
| .col-9 | .col-sm-9 | .col-md-9 | .col-lg-9 | .col-xl-9 |
| .col-10 | .col-sm-10 | .col-md-10 | .col-lg-10 | .col-xl-10 |
| .col-11 | .col-sm-11 | .col-md-11 | .col-lg-11 | .col-xl-11 |
| .col-12 | .col-sm-12 | .col-md-12 | .col-lg-12 | .col-xl-12 |
Use these classes to set when and how content should be displayed depending on responsive breakpoints as needed.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .d-none | .d-sm-none | .d-md-none | .d-lg-none | .d-xl-none |
| .d-inline | .d-sm-inline | .d-md-inline | .d-lg-inline | .d-xl-inline |
| .d-inline-block | .d-sm-inline-block | .d-md-inline-block | .d-lg-inline-block | .d-xl-inline-block |
| .d-block | .d-sm-block | .d-md-block | .d-lg-block | .d-xl-block |
| .d-table | .d-sm-table | .d-md-table | .d-lg-table | .d-xl-table |
| .d-table-cell | .d-sm-table-cell | .d-md-table-cell | .d-lg-table-cell | .d-xl-table-cell |
| .d-table-row | .d-sm-table-row | .d-md-table-row | .d-lg-table-row | .d-xl-table-row |
| .d-flex | .d-sm-flex | .d-md-flex | .d-lg-flex | .d-xl-flex |
| .d-inline-flex | .d-sm-inline-flex | .d-md-inline-flex | .d-lg-inline-flex | .d-xl-inline-flex |
Use these classes to set when and how flexbox content should flow depending on responsive breakpoints as needed.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .flex-row | .flex-sm-row | .flex-md-row | .flex-lg-row | .flex-xl-row |
| .flex-row-reverse | .flex-sm-row-reverse | .flex-md-row-reverse | .flex-lg-row-reverse | .flex-xl-row-reverse |
| .flex-column | .flex-sm-column | .flex-md-column | .flex-lg-column | .flex-xl-column |
| .flex-column-reverse | .flex-sm-column-reverse | .flex-md-column-reverse | .flex-lg-column-reverse | .flex-xl-column-reverse |
Use these classes to set when and how flexbox content should be aligned depending on responsive breakpoints as needed.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .justify-content-start | .justify-content-sm-start | .justify-content-md-start | .justify-content-lg-start | .justify-content-xl-start |
| .justify-content-end | .justify-content-sm-end | .justify-content-md-end | .justify-content-lg-end | .justify-content-xl-end |
| .justify-content-center | .justify-content-sm-center | .justify-content-md-center | .justify-content-lg-center | .justify-content-xl-center |
| .justify-content-between | .justify-content-sm-between | .justify-content-md-between | .justify-content-lg-between | .justify-content-xl-between |
| .justify-content-around | .justify-content-sm-around | .justify-content-md-around | .justify-content-lg-around | .justify-content-xl-around |
Use these classes to set when and how flexbox content should be vertically aligned depending on responsive breakpoints as needed.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .align-items-start | .align-items-sm-start | .align-items-md-start | .align-items-lg-start | .align-items-xl-start |
| .align-items-end | .align-items-sm-end | .align-items-md-end | .align-items-lg-end | .align-items-xl-end |
| .align-items-center | .align-items-sm-center | .align-items-md-center | .align-items-lg-center | .align-items-xl-center |
| .align-items-baseline | .align-items-sm-baseline | .align-items-md-baseline | .align-items-lg-baseline | .align-items-xl-baseline |
| .align-items-stretch | .align-items-sm-stretch | .align-items-md-stretch | .align-items-lg-stretch | .align-items-xl-stretch |
Use these classes to set when and how flexbox content should vertically align itself depending on responsive breakpoints as needed.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .align-self-start | .align-self-sm-start | .align-self-md-start | .align-self-lg-start | .align-self-xl-start |
| .align-self-end | .align-self-sm-end | .align-self-md-end | .align-self-lg-end | .align-self-xl-end |
| .align-self-center | .align-self-sm-center | .align-self-md-center | .align-self-lg-center | .align-self-xl-center |
| .align-self-baseline | .align-self-sm-baseline | .align-self-md-baseline | .align-self-lg-baseline | .align-self-xl-baseline |
| .align-self-stretch | .align-self-sm-stretch | .align-self-md-stretch | .align-self-lg-stretch | .align-self-xl-stretch |
Use these classes to set when and how flexbox content should fill all the horizontal space that is available.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .flex-fill | .flex-sm-fill | .flex-md-fill | .flex-lg-fill | .flex-xl-fill |
Use these classes to set when and how flexbox content should collapse or expand based on the surrounding flex content.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .flex-grow-1 | .flex-sm-grow-1 | .flex-md-grow-1 | .flex-lg-grow-1 | .flex-xl-grow-1 |
| .flex-grow-0 | .flex-sm-grow-0 | .flex-md-grow-0 | .flex-lg-grow-0 | .flex-xl-grow-0 |
| .flex-shrink-1 | .flex-sm-shrink-1 | .flex-md-shrink-1 | .flex-lg-shrink-1 | .flex-xl-shrink-1 |
| .flex-shrink-0 | .flex-sm-shrink-0 | .flex-md-shrink-0 | .flex-lg-shrink-0 | .flex-xl-shrink-0 |
Use these classes to seperate content apart from the surrounding flex content.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .ml-auto | .ml-sm-auto | .ml-md-auto | .ml-lg-auto | .ml-xl-auto |
| .mr-auto | .mr-sm-auto | .mr-md-auto | .mr-lg-auto | .mr-xl-auto |
| .mt-auto | .mt-sm-auto | .mt-md-auto | .mt-lg-auto | .mt-xl-auto |
| .mb-auto | .mb-sm-auto | .mb-md-auto | .mb-lg-auto | .mb-xl-auto |
Use these classes to set how flexbox content flows inside of a flex parent.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .flex-wrap | .flex-sm-wrap | .flex-md-wrap | .flex-lg-wrap | .flex-xl-wrap |
| .flex-nowrap | .flex-sm-nowrap | .flex-md-nowrap | .flex-lg-nowrap | .flex-xl-nowrap |
| .flex-mwrap-reverset | .flex-sm-mwrap-reverset | .flex-md-mwrap-reverset | .flex-lg-mwrap-reverset | .flex-xl-mwrap-reverset |
Use these classes to set the order of flexbox content depending on responsive breakpoints as needed.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .order-1 | .order-sm-1 | .order-md-1 | .order-lg-1 | .order-xl-1 |
| .order-2 | .order-sm-2 | .order-md-2 | .order-lg-2 | .order-xl-2 |
| .order-3 | .order-sm-3 | .order-md-3 | .order-lg-3 | .order-xl-3 |
| .order-4 | .order-sm-4 | .order-md-4 | .order-lg-4 | .order-xl-4 |
| .order-5 | .order-sm-5 | .order-md-5 | .order-lg-5 | .order-xl-5 |
| .order-6 | .order-sm-6 | .order-md-6 | .order-lg-6 | .order-xl-6 |
| .order-7 | .order-sm-7 | .order-md-7 | .order-lg-7 | .order-xl-7 |
| .order-8 | .order-sm-8 | .order-md-8 | .order-lg-8 | .order-xl-8 |
| .order-9 | .order-sm-9 | .order-md-9 | .order-lg-9 | .order-xl-9 |
| .order-10 | .order-sm-10 | .order-md-10 | .order-lg-10 | .order-xl-10 |
| .order-11 | .order-sm-11 | .order-md-11 | .order-lg-11 | .order-xl-11 |
| .order-12 | .order-sm-12 | .order-md-12 | .order-lg-12 | .order-xl-12 |
Use these classes to align the wrapping flexbox content depending on responsive breakpoints as needed.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .align-content-start | .align-content-sm-start | .align-content-md-start | .align-content-lg-start | .align-content-xl-start |
| .align-content-end | .align-content-sm-end | .align-content-md-end | .align-content-lg-end | .align-content-xl-end |
| .align-content-center | .align-content-sm-center | .align-content-md-center | .align-content-lg-center | .align-content-xl-center |
| .align-content-around | .align-content-sm-around | .align-content-md-around | .align-content-lg-around | .align-content-xl-around |
| .align-content-stretch | .align-content-sm-stretch | .align-content-md-stretch | .align-content-lg-stretch | .align-content-xl-stretch |
These are the available Bootstrap 4 list group horizontal utility classe.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .list-group-horizontal | .list-group-horizontal-sm | .list-group-horizontal-md | .list-group-horizontal-lg | .list-group-horizontal-xl |
| Never Collapse | Collapse: SM | Collapse: MD | Collapse: LG | Collapse: XL |
|---|---|---|---|---|
| .navbar-expand | .navbar-expand-sm | .navbar-expand-md | .navbar-expand-lg | .navbar-expand-xl |
Use these classes to ensure that specific content is displayed when a user opts to print something they are viewing in a browser.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .d-print-none | .d-print-sm-none | .d-print-md-none | .d-print-lg-none | .d-print-xl-none |
| .d-print-inline | .d-print-sm-inline | .d-print-md-inline | .d-print-lg-inline | .d-print-xl-inline |
| .d-print-inline-block | .d-print-sm-inline-block | .d-print-md-inline-block | .d-print-lg-inline-block | .d-print-xl-inline-block |
| .d-print-block | .d-print-sm-block | .d-print-md-block | .d-print-lg-block | .d-print-xl-block |
| .d-print-table | .d-print-sm-table | .d-print-md-table | .d-print-lg-table | .d-print-xl-table |
| .d-print-table-cell | .d-print-sm-table-cell | .d-print-md-table-cell | .d-print-lg-table-cell | .d-print-xl-table-cell |
| .d-print-table-row | .d-print-sm-table-row | .d-print-md-table-row | .d-print-lg-table-row | .d-print-xl-table-row |
| .d-print-flex | .d-print-sm-flex | .d-print-md-flex | .d-print-lg-flex | .d-print-xl-flex |
| .d-print-inline-flex | .d-print-sm-inline-flex | .d-print-md-inline-flex | .d-print-lg-inline-flex | .d-print-xl-inline-flex |
Use these classes to float content which allows for other content like text to flow around the floated element(s).
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .float-left | .float-sm-left | .float-md-left | .float-lg-left | .float-xl-left |
| .float-right | .float-sm-right | .float-md-right | .float-lg-right | .float-xl-right |
| .float-none | .float-sm-none | .float-md-none | .float-lg-none | .float-xl-none |
These are examples of different block-level positioning options in Bootstrap 4.
| Static | Relative | Absolute | Fixed | Sticky |
|---|---|---|---|---|
| .position-static | .position-relative | .position-absolute | .position-fixed | .position-sticky |
These are a couple of screen reader specific classes for use in Bootstrap 4 sites and applications.
| Class | Description |
|---|---|
| .sr-only | Use this class to hide an element from all devices except for screen readers. |
| .sr-only-focusable | Combine this class with .sr-only to show the element again when it’s focused (e.g. by a keyboard-only user). |
These are the available Bootstrap 4 responsive container utility classes and their corresponding widths at specfic system breakpoints.
| Type | Extra Small (<576px)< /th> | Small (≥576px) | Medium (≥768px) | Large (≥992px) | Extra Large (≥1200px) |
|---|---|---|---|---|---|
| .container | 100% | 540px | 720px | 960px | 1140px |
| .container-sm | 100% | 540px | 720px | 960px | 1140px |
| .container-md | 100% | 100% | 720px | 960px | 1140px |
| .container-lg | 100% | 100% | 100% | 960px | 1140px |
| .container-xl | 100% | 100% | 100% | 100% | 1140px |
| .container-fluid | 100% | 100% | 100% | 100% | 100% |
These are the available Bootstrap 4 row column utility classes.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .row-cols-1 | .row-cols-sm-1 | .row-cols-md-1 | .row-cols-lg-1 | .row-cols-xl-1 |
| .row-cols-2 | .row-cols-sm-2 | .row-cols-md-2 | .row-cols-lg-2 | .row-cols-xl-2 |
| .row-cols-3 | .row-cols-sm-3 | .row-cols-md-3 | .row-cols-lg-3 | .row-cols-xl-3 |
| .row-cols-4 | .row-cols-sm-4 | .row-cols-md-4 | .row-cols-lg-4 | .row-cols-xl-4 |
| .row-cols-5 | .row-cols-sm-5 | .row-cols-md-5 | .row-cols-lg-5 | .row-cols-xl-5 |
| .row-cols-6 | .row-cols-sm-6 | .row-cols-md-6 | .row-cols-lg-6 | .row-cols-xl-6 |
These are the Bootstrap 4 element margin, padding, and negative margin utility classes.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .m-n1 | .m-sm-n1 | .m-md-n1 | .m-lg-n1 | .m-xl-n1 |
| .mx-n1 | .mx-sm-n1 | .mx-md-n1 | .mx-lg-n1 | .mx-xl-n1 |
| .my-n1 | .my-sm-n1 | .my-md-n1 | .my-lg-n1 | .my-xl-n1 |
| .mt-n1 | .mt-sm-n1 | .mt-md-n1 | .mt-lg-n1 | .mt-xl-n1 |
| .mr-n1 | .mr-sm-n1 | .mr-md-n1 | .mr-lg-n1 | .mr-xl-n1 |
| .mb-n1 | .mb-sm-n1 | .mb-md-n1 | .mb-lg-n1 | .mb-xl-n1 |
| .ml-n1 | .ml-sm-n1 | .ml-md-n1 | .ml-lg-n1 | .ml-xl-n1 |
| .m-n2 | .m-sm-n2 | .m-md-n2 | .m-lg-n2 | .m-xl-n2 |
| .mx-n2 | .mx-sm-n2 | .mx-md-n2 | .mx-lg-n2 | .mx-xl-n2 |
| .my-n2 | .my-sm-n2 | .my-md-n2 | .my-lg-n2 | .my-xl-n2 |
| .mt-n2 | .mt-sm-n2 | .mt-md-n2 | .mt-lg-n2 | .mt-xl-n2 |
| .mr-n2 | .mr-sm-n2 | .mr-md-n2 | .mr-lg-n2 | .mr-xl-n2 |
| .mb-n2 | .mb-sm-n2 | .mb-md-n2 | .mb-lg-n2 | .mb-xl-n2 |
| .ml-n2 | .ml-sm-n2 | .ml-md-n2 | .ml-lg-n2 | .ml-xl-n2 |
| .m-n3 | .m-sm-n3 | .m-md-n3 | .m-lg-n3 | .m-xl-n3 |
| .mx-n3 | .mx-sm-n3 | .mx-md-n3 | .mx-lg-n3 | .mx-xl-n3 |
| .my-n3 | .my-sm-n3 | .my-md-n3 | .my-lg-n3 | .my-xl-n3 |
| .mt-n3 | .mt-sm-n3 | .mt-md-n3 | .mt-lg-n3 | .mt-xl-n3 |
| .mr-n3 | .mr-sm-n3 | .mr-md-n3 | .mr-lg-n3 | .mr-xl-n3 |
| .mb-n3 | .mb-sm-n3 | .mb-md-n3 | .mb-lg-n3 | .mb-xl-n3 |
| .ml-n3 | .ml-sm-n3 | .ml-md-n3 | .ml-lg-n3 | .ml-xl-n3 |
| .m-n4 | .m-sm-n4 | .m-md-n4 | .m-lg-n4 | .m-xl-n4 |
| .mx-n4 | .mx-sm-n4 | .mx-md-n4 | .mx-lg-n4 | .mx-xl-n4 |
| .my-n4 | .my-sm-n4 | .my-md-n4 | .my-lg-n4 | .my-xl-n4 |
| .mt-n4 | .mt-sm-n4 | .mt-md-n4 | .mt-lg-n4 | .mt-xl-n4 |
| .mr-n4 | .mr-sm-n4 | .mr-md-n4 | .mr-lg-n4 | .mr-xl-n4 |
| .mb-n4 | .mb-sm-n4 | .mb-md-n4 | .mb-lg-n4 | .mb-xl-n4 |
| .ml-n4 | .ml-sm-n4 | .ml-md-n4 | .ml-lg-n4 | .ml-xl-n4 |
| .m-n5 | .m-sm-n5 | .m-md-n5 | .m-lg-n5 | .m-xl-n5 |
| .mx-n5 | .mx-sm-n5 | .mx-md-n5 | .mx-lg-n5 | .mx-xl-n5 |
| .my-n5 | .my-sm-n5 | .my-md-n5 | .my-lg-n5 | .my-xl-n5 |
| .mt-n5 | .mt-sm-n5 | .mt-md-n5 | .mt-lg-n5 | .mt-xl-n5 |
| .mr-n5 | .mr-sm-n5 | .mr-md-n5 | .mr-lg-n5 | .mr-xl-n5 |
| .mb-n5 | .mb-sm-n5 | .mb-md-n5 | .mb-lg-n5 | .mb-xl-n5 |
| .ml-n5 | .ml-sm-n5 | .ml-md-n5 | .ml-lg-n5 | .ml-xl-n5 |
| .m-0 | .m-sm-0 | .m-md-0 | .m-lg-0 | .m-xl-0 |
| .mx-0 | .mx-sm-0 | .mx-md-0 | .mx-lg-0 | .mx-xl-0 |
| .my-0 | .my-sm-0 | .my-md-0 | .my-lg-0 | .my-xl-0 |
| .mt-0 | .mt-sm-0 | .mt-md-0 | .mt-lg-0 | .mt-xl-0 |
| .mr-0 | .mr-sm-0 | .mr-md-0 | .mr-lg-0 | .mr-xl-0 |
| .mb-0 | .mb-sm-0 | .mb-md-0 | .mb-lg-0 | .mb-xl-0 |
| .ml-0 | .ml-sm-0 | .ml-md-0 | .ml-lg-0 | .ml-xl-0 |
| .m-1 | .m-sm-1 | .m-md-1 | .m-lg-1 | .m-xl-1 |
| .mx-1 | .mx-sm-1 | .mx-md-1 | .mx-lg-1 | .mx-xl-1 |
| .my-1 | .my-sm-1 | .my-md-1 | .my-lg-1 | .my-xl-1 |
| .mt-1 | .mt-sm-1 | .mt-md-1 | .mt-lg-1 | .mt-xl-1 |
| .mr-1 | .mr-sm-1 | .mr-md-1 | .mr-lg-1 | .mr-xl-1 |
| .mb-1 | .mb-sm-1 | .mb-md-1 | .mb-lg-1 | .mb-xl-1 |
| .ml-1 | .ml-sm-1 | .ml-md-1 | .ml-lg-1 | .ml-xl-1 |
| .m-2 | .m-sm-2 | .m-md-2 | .m-lg-2 | .m-xl-2 |
| .mx-2 | .mx-sm-2 | .mx-md-2 | .mx-lg-2 | .mx-xl-2 |
| .my-2 | .my-sm-2 | .my-md-2 | .my-lg-2 | .my-xl-2 |
| .mt-2 | .mt-sm-2 | .mt-md-2 | .mt-lg-2 | .mt-xl-2 |
| .mr-2 | .mr-sm-2 | .mr-md-2 | .mr-lg-2 | .mr-xl-2 |
| .mb-2 | .mb-sm-2 | .mb-md-2 | .mb-lg-2 | .mb-xl-2 |
| .ml-2 | .ml-sm-2 | .ml-md-2 | .ml-lg-2 | .ml-xl-2 |
| .m-3 | .m-sm-3 | .m-md-3 | .m-lg-3 | .m-xl-3 |
| .mx-3 | .mx-sm-3 | .mx-md-3 | .mx-lg-3 | .mx-xl-3 |
| .my-3 | .my-sm-3 | .my-md-3 | .my-lg-3 | .my-xl-3 |
| .mt-3 | .mt-sm-3 | .mt-md-3 | .mt-lg-3 | .mt-xl-3 |
| .mr-3 | .mr-sm-3 | .mr-md-3 | .mr-lg-3 | .mr-xl-3 |
| .mb-3 | .mb-sm-3 | .mb-md-3 | .mb-lg-3 | .mb-xl-3 |
| .ml-3 | .ml-sm-3 | .ml-md-3 | .ml-lg-3 | .ml-xl-3 |
| .m-4 | .m-sm-4 | .m-md-4 | .m-lg-4 | .m-xl-4 |
| .mx-4 | .mx-sm-4 | .mx-md-4 | .mx-lg-4 | .mx-xl-4 |
| .my-4 | .my-sm-4 | .my-md-4 | .my-lg-4 | .my-xl-4 |
| .mt-4 | .mt-sm-4 | .mt-md-4 | .mt-lg-4 | .mt-xl-4 |
| .mr-4 | .mr-sm-4 | .mr-md-4 | .mr-lg-4 | .mr-xl-4 |
| .mb-4 | .mb-sm-4 | .mb-md-4 | .mb-lg-4 | .mb-xl-4 |
| .ml-4 | .ml-sm-4 | .ml-md-4 | .ml-lg-4 | .ml-xl-4 |
| .m-5 | .m-sm-5 | .m-md-5 | .m-lg-5 | .m-xl-5 |
| .mx-5 | .mx-sm-5 | .mx-md-5 | .mx-lg-5 | .mx-xl-5 |
| .my-5 | .my-sm-5 | .my-md-5 | .my-lg-5 | .my-xl-5 |
| .mt-5 | .mt-sm-5 | .mt-md-5 | .mt-lg-5 | .mt-xl-5 |
| .mr-5 | .mr-sm-5 | .mr-md-5 | .mr-lg-5 | .mr-xl-5 |
| .mb-5 | .mb-sm-5 | .mb-md-5 | .mb-lg-5 | .mb-xl-5 |
| .ml-5 | .ml-sm-5 | .ml-md-5 | .ml-lg-5 | .ml-xl-5 |
| .m-auto | .m-sm-auto | .m-md-auto | .m-lg-auto | .m-xl-auto |
| .mx-auto | .mx-sm-auto | .mx-md-auto | .mx-lg-auto | .mx-xl-auto |
| .my-auto | .my-sm-auto | .my-md-auto | .my-lg-auto | .my-xl-auto |
| .mt-auto | .mt-sm-auto | .mt-md-auto | .mt-lg-auto | .mt-xl-auto |
| .mr-auto | .mr-sm-auto | .mr-md-auto | .mr-lg-auto | .mr-xl-auto |
| .mb-auto | .mb-sm-auto | .mb-md-auto | .mb-lg-auto | .mb-xl-auto |
| .ml-auto | .ml-sm-auto | .ml-md-auto | .ml-lg-auto | .ml-xl-auto |
| .p-0 | .p-sm-0 | .p-md-0 | .p-lg-0 | .p-xl-0 |
| .px-0 | .px-sm-0 | .px-md-0 | .px-lg-0 | .px-xl-0 |
| .py-0 | .py-sm-0 | .py-md-0 | .py-lg-0 | .py-xl-0 |
| .pt-0 | .pt-sm-0 | .pt-md-0 | .pt-lg-0 | .pt-xl-0 |
| .pr-0 | .pr-sm-0 | .pr-md-0 | .pr-lg-0 | .pr-xl-0 |
| .pb-0 | .pb-sm-0 | .pb-md-0 | .pb-lg-0 | .pb-xl-0 |
| .pl-0 | .pl-sm-0 | .pl-md-0 | .pl-lg-0 | .pl-xl-0 |
| .p-1 | .p-sm-1 | .p-md-1 | .p-lg-1 | .p-xl-1 |
| .px-1 | .px-sm-1 | .px-md-1 | .px-lg-1 | .px-xl-1 |
| .py-1 | .py-sm-1 | .py-md-1 | .py-lg-1 | .py-xl-1 |
| .pt-1 | .pt-sm-1 | .pt-md-1 | .pt-lg-1 | .pt-xl-1 |
| .pr-1 | .pr-sm-1 | .pr-md-1 | .pr-lg-1 | .pr-xl-1 |
| .pb-1 | .pb-sm-1 | .pb-md-1 | .pb-lg-1 | .pb-xl-1 |
| .pl-1 | .pl-sm-1 | .pl-md-1 | .pl-lg-1 | .pl-xl-1 |
| .p-2 | .p-sm-2 | .p-md-2 | .p-lg-2 | .p-xl-2 |
| .px-2 | .px-sm-2 | .px-md-2 | .px-lg-2 | .px-xl-2 |
| .py-2 | .py-sm-2 | .py-md-2 | .py-lg-2 | .py-xl-2 |
| .pt-2 | .pt-sm-2 | .pt-md-2 | .pt-lg-2 | .pt-xl-2 |
| .pr-2 | .pr-sm-2 | .pr-md-2 | .pr-lg-2 | .pr-xl-2 |
| .pb-2 | .pb-sm-2 | .pb-md-2 | .pb-lg-2 | .pb-xl-2 |
| .pl-2 | .pl-sm-2 | .pl-md-2 | .pl-lg-2 | .pl-xl-2 |
| .p-3 | .p-sm-3 | .p-md-3 | .p-lg-3 | .p-xl-3 |
| .px-3 | .px-sm-3 | .px-md-3 | .px-lg-3 | .px-xl-3 |
| .py-3 | .py-sm-3 | .py-md-3 | .py-lg-3 | .py-xl-3 |
| .pt-3 | .pt-sm-3 | .pt-md-3 | .pt-lg-3 | .pt-xl-3 |
| .pr-3 | .pr-sm-3 | .pr-md-3 | .pr-lg-3 | .pr-xl-3 |
| .pb-3 | .pb-sm-3 | .pb-md-3 | .pb-lg-3 | .pb-xl-3 |
| .pl-3 | .pl-sm-3 | .pl-md-3 | .pl-lg-3 | .pl-xl-3 |
| .p-4 | .p-sm-4 | .p-md-4 | .p-lg-4 | .p-xl-4 |
| .px-4 | .px-sm-4 | .px-md-4 | .px-lg-4 | .px-xl-4 |
| .py-4 | .py-sm-4 | .py-md-4 | .py-lg-4 | .py-xl-4 |
| .pt-4 | .pt-sm-4 | .pt-md-4 | .pt-lg-4 | .pt-xl-4 |
| .pr-4 | .pr-sm-4 | .pr-md-4 | .pr-lg-4 | .pr-xl-4 |
| .pb-4 | .pb-sm-4 | .pb-md-4 | .pb-lg-4 | .pb-xl-4 |
| .pl-4 | .pl-sm-4 | .pl-md-4 | .pl-lg-4 | .pl-xl-4 |
| .p-5 | .p-sm-5 | .p-md-5 | .p-lg-5 | .p-xl-5 |
| .px-5 | .px-sm-5 | .px-md-5 | .px-lg-5 | .px-xl-5 |
| .py-5 | .py-sm-5 | .py-md-5 | .py-lg-5 | .py-xl-5 |
| .pt-5 | .pt-sm-5 | .pt-md-5 | .pt-lg-5 | .pt-xl-5 |
| .pr-5 | .pr-sm-5 | .pr-md-5 | .pr-lg-5 | .pr-xl-5 |
| .pb-5 | .pb-sm-5 | .pb-md-5 | .pb-lg-5 | .pb-xl-5 |
| .pl-5 | .pl-sm-5 | .pl-md-5 | .pl-lg-5 | .pl-xl-5 |
| .p-auto | .p-sm-auto | .p-md-auto | .p-lg-auto | .p-xl-auto |
| .px-auto | .px-sm-auto | .px-md-auto | .px-lg-auto | .px-xl-auto |
| .py-auto | .py-sm-auto | .py-md-auto | .py-lg-auto | .py-xl-auto |
| .pt-auto | .pt-sm-auto | .pt-md-auto | .pt-lg-auto | .pt-xl-auto |
| .pr-auto | .pr-sm-auto | .pr-md-auto | .pr-lg-auto | .pr-xl-auto |
| .pb-auto | .pb-sm-auto | .pb-md-auto | .pb-lg-auto | .pb-xl-auto |
| .pl-auto | .pl-sm-auto | .pl-md-auto | .pl-lg-auto | .pl-xl-auto |
These are Bootstrap 4 text alignment utility classes.
| Extra Small | Small | Medium | Large | Extra Large |
|---|---|---|---|---|
| .text-left | .text-sm-left | .text-md-left | .text-lg-left | .text-xl-left |
| .text-right | .text-sm-right | .text-md-right | .text-lg-right | .text-xl-right |
| .text-center | .text-sm-center | .text-md-center | .text-lg-center | .text-xl-center |