@extends('layouts.master') @section('title') @lang('translation.Utilities') @endsection @section('content') @component('components.breadcrumb') @slot('li_1') UI Elements @endslot @slot('title') Utilities @endslot @endcomponent

Borders

Use border utilities to add or remove an element’s borders. Choose from all borders or one at a time.

Border Width
.border
.border-1
.border-2
.border-3
.border-4
.border-5
Additive
.border
.border-top
.border-end
.border-bottom
.border-start
Subtractive
.border-0
.border-top-0
.border-end-0
.border-bottom-0
.border-start-0
Border Color
.border-primary
.border-secondary
.border-success
.border-danger
.border-info
.border-warning
.border-dark
Border Opacity
default
.border-opacity-75
.border-opacity-50
.border-opacity-25
.border-opacity-10
Border Radius
.rounded
.rounded-top
.rounded-end
.rounded-bottom
.rounded-start
.rounded-circle
.rounded-pill
Border Radius Sizes
.rounded-0
.rounded-1
.rounded-2
.rounded-3
.rounded-4
.rounded-5

Stacks - Vertical

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

First item
Second item
Third item
Vertical Stacks Example

Stacks - Horizontal

Use .vstack to create vertical layouts. Stacked items are full-width by default. Use .gap-* utilities to add space between items.

First item
Second item
Third item

Using horizontal margin utilities like ms-auto as spacers:

First item
Second item
Third item
Horizontal Stacks Examples

Object fit

Add the object-fit-{value} class to the replaced element

... .object-fit-contain
... .object-fit-cover
... .object-fit-fill
... .object-fit-scale
... .object-fit-none

Z-index

Use z-index utilities to stack elements on top of one another. Requires a position value other than static, which can be set with custom styles or using our position utilities.

Shadows

While shadows on components are disabled by default in Bootstrap and can be enabled via $enable-shadows, you can also quickly add or remove a shadow with our box-shadow utility classes. Includes support for .shadow-none and three default sizes (which have associated variables to match).

No shadow .shadow-none
Small shadow shadow-sm
Regular shadow shadow
Larger shadow shadow-lg
@endsection @section('script') @endsection