helper-class
Text Color Classes
Class | Description |
---|---|
.text-muted | Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-primary | Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-success | Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-info | Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-warning | Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh. |
.text-danger | Nullam id dolor id nibh ultricies vehicula ut id elit. |
.text-dark | Nullam id dolor id nibh ultricies vehicula ut id elit. |
Font Weight
Class | Description |
---|---|
.fw-light | Font weight will be light (300). |
.fw-normal | Font weight will be normal |
.fw-bold | Font weight will be bold (600) |
Padding Classes
Class | Description |
---|---|
.p-0 | Padding will be 0px from all side. |
.p-1 | Padding will be 4px from all side. |
.p-2 | Padding will be 8px from all side. |
.p-3 | Padding will be 16px from all side. |
.p-4 | Padding will be 24px from all side |
.p-5 | Padding will be 48px from all side. |
Padding Left Classes
Class | Description |
---|---|
.ps-0 | Only Padding Left will be 0px. |
.ps-1 | Only Padding Left will be 4px. |
.ps-2 | Only Padding Left will be 8px. |
.ps-3 | Only Padding Left will be 16px. |
.ps-4 | Only Padding Left will be 24px. |
.ps-5 | Only Padding Left will be 48px. |
Padding Right Classes
Class | Description |
---|---|
.pe-0 | Only Padding right will be 0px. |
.pe-1 | Only Padding right will be 4px. |
.pe-2 | Only Padding right will be 8px. |
.pe-3 | Only Padding right will be 16px. |
.pe-4 | Only Padding right will be 24px. |
.pe-5 | Only Padding right will be 48px. |
Padding Top Classes
Class | Description |
---|---|
.pt-0 | Only Padding top will be 0px. |
.pt-1 | Only Padding top will be 4px. |
.pt-2 | Only Padding top will be 8px. |
.pt-3 | Only Padding top will be 16px. |
.pt-4 | Only Padding top will be 24px. |
.pt-5 | Only Padding top will be 48px. |
Margin Top Classes
Class | Description |
---|---|
.mt-0 | Only Margin top will be 0px. |
.mt-1 | Only Margin top will be 4px. |
.mt-2 | Only Margin top will be 8px. |
.mt-3 | Only Margin top will be 16px. |
.mt-4 | Only Margin top will be 24px. |
.mt-5 | Only Margin top will be 48px. |
Margin Bottom Classes
Class | Description |
---|---|
.mb-0 | Only Margin Bottom will be 0px. |
.mb-1 | Only Margin Bottom will be 4px. |
.mb-2 | Only Margin Bottom will be 8px. |
.mb-3 | Only Margin Bottom will be 16px. |
.mb-4 | Only Margin Bottom will be 24px. |
.mb-5 | Only Margin Bottom will be 48px. |
Margin Right Classes
Class | Description |
---|---|
.me-0 | Only Margin Right will be 0px. |
.me-1 | Only Margin Right will be 4px. |
.me-2 | Only Margin Right will be 8px. |
.me-3 | Only Margin Right will be 16px. |
.me-4 | Only Margin Right will be 24px. |
.me-5 | Only Margin Right will be 48px. |
Margin Left Classes
Class | Description |
---|---|
.ms-0 | Only Margin Left will be 0px. |
.ms-1 | Only Margin Left will be 4px. |
.ms-2 | Only Margin Left will be 8px. |
.ms-3 | Only Margin Left will be 16px. |
.ms-4 | Only Margin Left will be 24px. |
.ms-5 | Only Margin Left will be 48px. |
Background Colors
Class | Description |
---|---|
.bg-primary | For Primary background color |
.bg-success | For Success (green) background color |
.bg-info | For info (Blue) background color |
Class | Description |
---|---|
.bg-warning | For Warning (yellow) background color |
.bg-danger | For Danger (red) background color |
.bg-theme | For Theme background color |
Bootstrap Classes
Borders
Additive border
Classes | Use |
---|---|
.border | Use to add solid border of 1px on every side of the object. |
.border-top | Use to add solid border top of 1px on obejct. |
.border-bottom | Use to add solid border bottom of 1px on object. |
.border-start | Use to add solid border left of 1px on object. |
.border-end | Use to add solid border right of 1px on object. |
Subtractive border
Classes | Use |
---|---|
.border-0 | Use when remove border from all side of the object. |
.border-top-0 | Use when remove border from the top side of the object. |
.border-bottom-0 | Use when remove border from the bottom side of the object. |
.border-start-0 | Use when remove border from the left side of the object. |
.border-end-0 | Use when remove border from the right side of the object. |
Border color
Classes | Use |
---|---|
.border border-primary | Use when add primary color border to all side of the object. |
.border border-secondary | Use when add secondary color border to all side of the object. |
.border border-success | Use when add success color border to all side of the object. |
.border border-danger | Use when add danger color border to all side of the object. |
.border border-warning | Use when add warning color border to all side of the object. |
.border border-info | Use when add info color border to all side of the object. |
.border border-light | Use when add light color border to all side of the object. |
.border border-dark | Use when add dark color border to all side of the object. |
.border border-white | Use when add white color border to all side of the object. |
Border-radius
Classes | Use |
---|---|
.rounded | Add round corners border to all side of the object. |
.rounded-top | Add round corners border to top side only of the object. |
.rounded-bottom | Add round corners border to bottom side only of the object. |
.rounded-left | Add round corners border to left side only of the object. |
.rounded-right | Add round corners border to right side only of the object. |
.rounded-circle | Create round circle border of the object. |
.rounded-0 | Remove border corder from the all side of the object. |
Clearfix
float
s by adding .clearfix
to the parent element. Can also be used as a mixin.The following example shows how the clearfix can be used. Without the clearfix the wrapping div would not span around the buttons which would cause a broken layout.
Close icon
aria-label
.Display property
Basic display values
display
propertyaccepts a handful of values and we support many of them with utility classes. We purposefully don’t provide every value as a utility, so here’s what we support:Classes | Use |
---|---|
.d-none | Used for object to hide on all viewports. |
.d-inline | Used for object to behave like an inline object. |
.d-inline-block | Used for object to behave like an inline-block object. |
.d-block | Used for object to behave like an block object. |
.d-table | Used for object to behave like <table> object. |
.d-table-cell | Used for object to behave like <td> object. |
.d-flex | Used for object as a block-level flex container. |
.d-inline-flex | Used for object as an inline-level flex container. |
Use above classes as per your requirements. For example, here’s how you could use the inline, block, or inline-block utilities.
Responsive variations also exist for every single utility mentioned above.
.d-none
.d-inline
.d-inline-block
.d-block
.d-table
.d-table-cell
.d-flex
.d-inline-flex
.d-sm-none
.d-sm-inline
.d-sm-inline-block
.d-sm-block
.d-sm-table
.d-sm-table-cell
.d-sm-flex
.d-sm-inline-flex
.d-md-none
.d-md-inline
.d-md-inline-block
.d-md-block
.d-md-table
.d-md-table-cell
.d-md-flex
.d-md-inline-flex
.d-lg-none
.d-lg-inline
.d-lg-inline-block
.d-lg-block
.d-lg-table
.d-lg-table-cell
.d-lg-flex
.d-lg-inline-flex
.d-xl-none
.d-xl-inline
.d-xl-inline-block
.d-xl-block
.d-xl-table
.d-xl-table-cell
.d-xl-flex
.d-xl-inline-flex
Hiding Elements
For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.
To hide elements simply use the .d-none
class or one of the .d-sm,md,lg,xl-none
classes for any responsive screen variation.
To show an element only on a given interval of screen sizes you can combine one .d-*-none
class with a .d-*-*
class, for example .d-none.d-md-block.d-xl-none
will hide the element for all screen sizes except on medium and large devices.
Screen Size | Class |
---|---|
Hidden on all | d-none |
Hidden only on xs | d-none d-sm-block |
Hidden only on sm | d-sm-none d-md-block |
Hidden only on md | d-md-none d-lg-block |
Hidden only on lg | d-lg-none d-xl-block |
Hidden only on xl | d-xl-none |
Visible on all | d-block |
Visible only on xs | d-block d-sm-none |
Visible only on sm | d-none d-sm-block d-md-none |
Visible only on md | d-none d-md-block d-lg-none |
Visible only on lg | d-none d-lg-block d-xl-none |
Visible only on xl | d-none d-xl-block |
Display in print
display
value of elements when printing with our print display utilities.Class | Print style |
---|---|
.d-print-none | Applies display: none to the element when printing |
.d-print-inline | Applies display: inline to the element when printing |
.d-print-inline-block | Applies display: inline-block to the element when printing |
.d-print-block | Applies display: block to the element when printing |
Flex
Enable flex behaviors
display
utilities to create a flexbox container and transform direct children elements into flex items. Flex containers and items are able to be modified further with additional flex properties.Responsive variations also exist for .d-flex
and .d-inline-flex
.
.d-flex
.d-inline-flex
.d-sm-flex
.d-sm-inline-flex
.d-md-flex
.d-md-inline-flex
.d-lg-flex
.d-lg-inline-flex
.d-xl-flex
.d-xl-inline-flex
Direction
Set the direction of flex items in a flex container with direction utilities. In most cases you can omit the horizontal class here as the browser default is row
. However, you may encounter situations where you needed to explicitly set this value (like responsive layouts).
Use .flex-row
to set a horizontal direction (the browser default), or .flex-row-reverse
to start the horizontal direction from the opposite side.
Use .flex-column
to set a vertical direction, or .flex-column-reverse
to start the vertical direction from the opposite side.
flex-direction
..flex-row
.flex-row-reverse
.flex-column
.flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse
Justify content
justify-content
utilities on flexbox containers to change the alignment of flex items on the main axis (the x-axis to start, y-axis if flex-direction: column
). Choose from start
(browser default), end
, center
,between
, or around
.justify-content
..justify-content-start
.justify-content-end
.justify-content-center
.justify-content-between
.justify-content-around
.justify-content-sm-start
.justify-content-sm-end
.justify-content-sm-center
.justify-content-sm-between
.justify-content-sm-around
.justify-content-md-start
.justify-content-md-end
.justify-content-md-center
.justify-content-md-between
.justify-content-md-around
.justify-content-lg-start
.justify-content-lg-end
.justify-content-lg-center
.justify-content-lg-between
.justify-content-lg-around
.justify-content-xl-start
.justify-content-xl-end
.justify-content-xl-center
.justify-content-xl-between
.justify-content-xl-around
Align items
align-items
utilities on flexbox containers to change the alignment of flex items on the cross axis (the y-axis to start, x-axis if flex-direction: column
). Choose from start
, end
, center
, baseline
, or stretch
(browser default).align-items
..align-items-start
.align-items-end
.align-items-center
.align-items-baseline
.align-items-stretch
.align-items-sm-start
.align-items-sm-end
.align-items-sm-center
.align-items-sm-baseline
.align-items-sm-stretch
.align-items-md-start
.align-items-md-end
.align-items-md-center
.align-items-md-baseline
.align-items-md-stretch
.align-items-lg-start
.align-items-lg-end
.align-items-lg-center
.align-items-lg-baseline
.align-items-lg-stretch
.align-items-xl-start
.align-items-xl-end
.align-items-xl-center
.align-items-xl-baseline
.align-items-xl-stretch
Align self
align-self
utilities on flexbox items to individually change their alignment on the cross axis (the y-axis to start, x-axis if flex-direction: column
). Choose from the same options as align-items
: start
, end
, center
, baseline
, or stretch
(browser default).align-self
..align-self-start
.align-self-end
.align-self-center
.align-self-baseline
.align-self-stretch
.align-self-sm-start
.align-self-sm-end
.align-self-sm-center
.align-self-sm-baseline
.align-self-sm-stretch
.align-self-md-start
.align-self-md-end
.align-self-md-center
.align-self-md-baseline
.align-self-md-stretch
.align-self-lg-start
.align-self-lg-end
.align-self-lg-center
.align-self-lg-baseline
.align-self-lg-stretch
.align-self-xl-start
.align-self-xl-end
.align-self-xl-center
.align-self-xl-baseline
.align-self-xl-stretch
Auto margins
.mr-auto
), and pushing two items to the left (.ml-auto
).justify-content
value. See this StackOverflow answer for more details.With align-items
align-items
, flex-direction: column
, and margin-top: auto
or margin-bottom: auto
.Wrap
.flex-nowrap
, wrapping with .flex-wrap
, or reverse wrapping with .flex-wrap-reverse
.flex-wrap
..flex-nowrap
.flex-wrap
.flex-wrap-reverse
.flex-sm-nowrap
.flex-sm-wrap
.flex-sm-wrap-reverse
.flex-md-nowrap
.flex-md-wrap
.flex-md-wrap-reverse
.flex-lg-nowrap
.flex-lg-wrap
.flex-lg-wrap-reverse
.flex-xl-nowrap
.flex-xl-wrap
.flex-xl-wrap-reverse
Order
order
utilities. We only provide options for making an item first or last, as well as a reset to use the DOM order. As order
takes any integer value (e.g., 5
), add custom CSS for any additional values needed.order
..order-1
.order-2
.order-3
.order-4
.order-5
.order-6
.order-7
.order-8
.order-9
.order-10
.order-11
.order-12
.order-sm-1
.order-sm-2
.order-sm-3
.order-sm-4
.order-sm-5
.order-sm-6
.order-sm-7
.order-sm-8
.order-sm-9
.order-sm-10
.order-sm-11
.order-sm-12
.order-md-1
.order-md-2
.order-md-3
.order-md-4
.order-md-5
.order-md-6
.order-md-7
.order-md-8
.order-md-9
.order-md-10
.order-md-11
.order-md-12
.order-lg-1
.order-lg-2
.order-lg-3
.order-lg-4
.order-lg-5
.order-lg-6
.order-lg-7
.order-lg-8
.order-lg-9
.order-lg-10
.order-lg-11
.order-lg-12
.order-xl-1
.order-xl-2
.order-xl-3
.order-xl-4
.order-xl-5
.order-xl-6
.order-xl-7
.order-xl-8
.order-xl-9
.order-xl-10
.order-xl-11
.order-xl-12
Align content
align-content
utilities on flexbox containers to align flex items together on the cross axis. Choose from start
(browser default), end
, center
, between
, around
, or stretch
. To demonstrate these utilities, we’ve enforced flex-wrap: wrap
and increased the number of flex items.align-content
..align-content-start
.align-content-end
.align-content-center
.align-content-around
.align-content-stretch
.align-content-sm-start
.align-content-sm-end
.align-content-sm-center
.align-content-sm-around
.align-content-sm-stretch
.align-content-md-start
.align-content-md-end
.align-content-md-center
.align-content-md-around
.align-content-md-stretch
.align-content-lg-start
.align-content-lg-end
.align-content-lg-center
.align-content-lg-around
.align-content-lg-stretch
.align-content-xl-start
.align-content-xl-end
.align-content-xl-center
.align-content-xl-around
.align-content-xl-stretch
Float
float
property.!important
is included to avoid specificity issues. These use the same viewport breakpoints as our grid system.Toggle a float with a class:Responsive
float
value..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
Position
Classes | Use |
---|---|
.position-fixed | Changes object's position to fixed. |
.position-relative | Changes object's position to relative. |
.position-absolute | Changes object's position to absolute. |
.position-static | Changes object's position to static. |
.position-sticky | Changes object's position to static. |
Fixed top
<div className="fixed-top">...</div>
Fixed bottom
<div className="fixed-bottom">...</div>
Sticky top
.sticky-top
utility uses CSS’s position: sticky
, which isn’t fully supported in all browsers.<div className="sticky-top">...</div>
position: sticky
as position: relative
. As such, we wrap the styles in a @supports
query, limiting the stickiness to only browsers that properly can render it.Sizing
$sizes
Sass map in _variables.scss
. Includes support for 25%
,50%
, 75%
, and 100%
by default. Modify those values as you need to generate different utilities here.max-width: 100%;
and max-height: 100%;
utilities as needed.Fixed Width
Classes | Description |
---|---|
.width-size | Set content fixed width in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e .width-50 |
.width-size-per | Set content fixed width in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e .width-5-per |
Fixed Height
Classes | Description |
---|---|
.height-size | Set content fixed height in pixel of selected size where size can be 50, 100, 150, 200, 250, 300, 350, 400, 450, 500, 550, 600, 650, 700, 750 and 800. i.e .height-50 |
.height-size-per | Set content fixed height in percentage of selected size where size can be 5%, 10%, 15%, 20%, 25%, 30%, 35%, 40%, 45%, 50%, 55%, 60%, 65%, 70%, 75% and 80%. i.e .height-5-per |
Vertical alignment
Change the alignment of elements with the vertical-alignment
utilities. Please note that vertical-align only affects inline, inline-block, inline-table, and table cell elements.
Choose from .align-baseline
, .align-top
, .align-middle
, .align-bottom
, .align-text-bottom
, and .align-text-top
as needed.
Classes | Description |
---|---|
.align-top | Changes element's vertical alignment to top. |
.align-middle | Changes element's vertical alignment to middle. |
.align-bottom | Changes element's vertical alignment to bottom. |
.align-baseline | Changes element's vertical alignment to baseline. |
.align-text-top | Top of the element is aligned with the top of the parent element's font. |
.align-text-bottom | The bottom of the element is aligned with the bottom of the parent element's font. |
With table cells:
baseline | top | middle | bottom | text-top | text-bottom |