@extends('layouts.master') @section('title')Utilities @endsection @section('content') {{-- breadcrumbs --}} @section('breadcrumb') @component('components.breadcrumb') @slot('li_1') UI Elements @endslot @slot('title') Utilities @endslot @endcomponent @endsection

Background Colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white
.bg-transparent

Background Gradient

.bg-primary .bg-gradient
.bg-secondary .bg-gradient
.bg-success .bg-gradient
.bg-danger .bg-gradient
.bg-warning .bg-gradient
.bg-info .bg-gradient
.bg-light .bg-gradient
.bg-dark .bg-gradient
.bg-white .bg-gradient
.bg-transparent .bg-gradient

Additive Border

Subtractive Border

Border Width

Border Radius

Rounded Sizes

Colors

.text-primary

.text-secondary

.text-success

.text-danger

.text-info

.text-muted

.text-dark

.text-black-50

.text-warning

.text-light

.text-white

.text-white-50

Direction of Flex Row & Reverse

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Grow and Shrink

Flex item
Flex item
Third flex item
Flex item
Flexitem

Enable Flex Behaviors

I'm a flexbox container!
I'm an inline flexbox container!

Justify Content

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Wrap

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9

Direction of Flex Column & Reverse

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Align Self

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

Align Items

Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3

With Alignitems

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Fill

Flex item with a lot of content
Flex item
Flex item

Auto Margins

Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item
Flex item

Gap

Grid item 1
Grid item 2
Grid item 3

Text Wrapping and Overflow

This text should wrap.
This text should overflow the parent.

Align Content

Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9
Flex item 1
Flex item 2
Flex item 3
Flex item 4
Flex item 5
Flex item 6
Flex item 7
Flex item 8
Flex item 9

Order

First flex item
Second flex item
Third flex item

Float

Float start on all viewport sizes

Float end on all viewport sizes

Don't float on all viewport sizes

Text Selection

This paragraph will be entirely selected when clicked by the user.

This paragraph has default select behavior.

This paragraph will not be selectable when clicked by the user.

Pointer Events

This link can not be clicked.

This link can be clicked (this is default behavior).

This link can not be clicked because the pointer-events property is inherited from its parent. However, this link has a pe-auto class and can be clicked.

Text Alignment

Start aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

End aligned text on all viewport sizes.

Start aligned text on viewports sized SM (small) or wider.

Start aligned text on viewports sized MD (medium) or wider.

Start aligned text on viewports sized LG (large) or wider.

Start aligned text on viewports sized XL (extra-large) or wider.

Stacks

Vertical

First item
Second item
Third item
Vertical Stacks Examples

Horizontal

First item
Second item
Third item

Using horizontal margin utilities like .ms-auto as spacers:

First item
Second item
Third item
Horizontal Stacks Examples

Overflow Auto

This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll.

Overflow Hidden

This is an example of using .overflow-hidden on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Overflow Visible

This is an example of using .overflow-visible on an element with set width and height dimensions.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Overflow Scroll

This is an example of using .overflow-scroll on an element with set width and height dimensions. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Arrange Elements

Center Elements

Center Elements

Shadows

No shadow
Small shadow
Regular shadow
Larger shadow

Width

Width 25%
Width 50%
Width 75%
Width 100%
Width auto

Height

Height25%
Height 50%
Height 75%
Height 100%
Height auto

Line Height

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

This is a long paragraph written to show how the line-height of an element is affected by our utilities.

Font Weight and Italics

Bold text.

Bolder weight text (relative to the parent element).

Normal weight text.

Light weight text.

Lighter weight text (relative to the parent element).

Italic text.

Text with normal font style

Display Property

d-inline
d-inline
d-block d-block

Text Transform

Lowercased text.

Uppercased text.

CapiTaliZed text.

Text Decoration

This text has a line underneath it.

This text has a line going through it.

This link has its text decoration removed

Visibility

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Vertical Alignment

baseline top middle bottom text-top text-bottom

Monospace & Reset Color

This is in monospace

Muted text with a reset link.

@endsection @section('script') @endsection