@extends('backend.layouts.app') @section('title') {{ 'Helper Classes | '.env('APP_NAME') }} @endsection @section('breadcrumbs') @include('backend.layouts.partials.breadcrumbs',['current' => 'Helper Classes']) @endsection @push('before-css') @endpush @push('after-css') @endpush @section('content')
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. |
Class | Description |
---|---|
.font-light |
Font weight will be light (300). |
.font-normal |
Font weight will be normal |
.font-bold |
Font weight will be bold (700) |
Class | Description |
---|---|
.p-0 |
Padding will be 0px from all side. |
.p-10 |
Padding will be 10px from all side. |
.p-20 |
Padding will be 20px from all side |
Class | Description |
---|---|
.p-l-0 |
Only Padding Left will be 0px. |
.p-l-10 |
Only Padding Left will be 10px. |
.p-l-20 |
Only Padding Left will be 20px. |
Class | Description |
---|---|
.p-r-0 |
Only Padding right will be 0px. |
.p-r-10 |
Only Padding right will be 10px. |
.p-r-20 |
Only Padding right will be 20px. |
Class | Description |
---|---|
.p-t-0 |
Only Padding top will be 0px. |
.p-t-10 |
Only Padding top will be 10px. |
.p-t-20 |
Only Padding top will be 20px. |
Class | Description |
---|---|
.m-t-5 |
Only Margin top will be 5px. |
.m-t-10 |
Only Margin top will be 10px. |
.m-t-15 |
Only Margin top will be 15px. |
.m-t-20 |
Only Margin top will be 20px. |
.m-t-30 |
Only Margin top will be 30px. |
.m-t-40 |
Only Margin top will be 40px. |
Class | Description |
---|---|
.m-b-5 |
Only Margin Bottom will be 5px. |
.m-b-10 |
Only Margin Bottom will be 10px. |
.m-b-15 |
Only Margin Bottom will be 15px. |
.m-b-20 |
Only Margin Bottom will be 20px. |
.m-b-30 |
Only Margin Bottom will be 30px. |
Class | Description |
---|---|
.m-r-5 |
Only Margin Right will be 5px. |
.m-r-10 |
Only Margin Right will be 10px. |
.m-r-15 |
Only Margin Right will be 15px. |
.m-r-20 |
Only Margin Right will be 20px. |
.m-r-30 |
Only Margin Right will be 30px. |
.m-r-40 |
Only Margin Right will be 40px. |
Class | Description |
---|---|
.m-l-5 |
Only Margin Left will be 5px. |
.m-l-10 |
Only Margin Left will be 10px. |
.m-l-15 |
Only Margin Left will be 15px. |
.m-l-20 |
Only Margin Left will be 20px. |
.m-l-30 |
Only Margin Left will be 30px. |
.m-l-40 |
Only Margin Left will be 40px. |
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 |
Class | Description |
---|---|
.bg-theme-dark |
For theme dark background color |
.bg-inverse |
For inverse (dark) background color |
.bg-purple |
For Purple background color |
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-left |
Use to add solid border left of 1px on object. |
.border-right |
Use to add solid border right of 1px on object. |
Classes | Use |
---|---|
.no-border |
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-left-0 |
Use when remove border from the left side of the object. |
.border-right-0 |
Use when remove border from the right side of the object. |
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. |
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. |
float
s by adding .clearfix
to the parent
element. Can also be used as a mixin.
<div class="clearfix">...</div>
@php $include = '@include' @endphp
// Mixin itself
@mixin clearfix() {
&::after {
display: block;
content: "";
clear: both;
}
}
// Usage as a mixin
.element {
{{$include}} clearfix;
};
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.
<div class="bg-cyan clearfix">
<button type="button" class="btn btn-secondary float-left">Example Button floated left</button>
<button type="button" class="btn btn-secondary float-right">Example Button floated right</button>
</div>
aria-label
.
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
display
property accepts 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.
<div class="d-inline bg-info">d-inline</div>
<div class="d-inline bg-info">d-inline</div>
<span class="d-block bg-info">d-block</span>
<div class="d-inline-block bg-info">d-inline-block</div>
<div class="d-inline-block bg-info">d-inline-block</div>
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
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
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 |
Rules are directly applied to <iframe>
, <embed>
, <video>
,
and <object>
elements; optionally use an explicit descendant class .embed-responsive-item
when you want to match the styling for other attributes.
Pro-Tip! You don’t need to include frameborder="0"
in your
<iframe>
s as we override that for you.
<iframe>
in a parent
element with .embed-responsive
and an aspect ratio. The .embed-responsive-item
isn’t strictly required, but we encourage it.
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
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.
<div class="d-flex p-2">I'm a flexbox container!</div>
<div class="d-inline-flex p-2">I'm an inline flexbox container!</div>
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
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.
<div class="d-flex flex-row">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-row-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
Use .flex-column
to set a vertical direction, or .flex-column-reverse
to start the vertical direction from the opposite side.
<div class="d-flex flex-column">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
<div class="p-2">Flex item 1</div>
<div class="p-2">Flex item 2</div>
<div class="p-2">Flex item 3</div>
</div>
Responsive variations also exist for 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
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
.
<div class="d-flex justify-content-start">...</div>
<div class="d-flex justify-content-end">...</div>
<div class="d-flex justify-content-center">...</div>
<div class="d-flex justify-content-between">...</div>
<div class="d-flex justify-content-around">...</div>
Responsive variations also exist for 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
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).
<div class="d-flex align-items-start">...</div>
<div class="d-flex align-items-end">...</div>
<div class="d-flex align-items-center">...</div>
<div class="d-flex align-items-baseline">...</div>
<div class="d-flex align-items-stretch">...</div>
Responsive variations also exist for 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
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).
<div class="align-self-start">Aligned flex item</div>
<div class="align-self-end">Aligned flex item</div>
<div class="align-self-center">Aligned flex item</div>
<div class="align-self-baseline">Aligned flex item</div>
<div class="align-self-stretch">Aligned flex item</div>
Responsive variations also exist for 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
.mr-auto
),
and pushing two items to the left (.ml-auto
).justify-content
value. See
this StackOverflow answer for more details.
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="mr-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="ml-auto p-2">Flex item</div>
</div>
align-items
, flex-direction: column
, and margin-top: auto
or margin-bottom: auto
.
<div class="d-flex align-items-start flex-column" style="height: 200px;">
<div class="mb-auto p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
</div>
<div class="d-flex align-items-end flex-column" style="height: 200px;">
<div class="p-2">Flex item</div>
<div class="p-2">Flex item</div>
<div class="mt-auto p-2">Flex item</div>
</div>
.flex-nowrap
, wrapping with .flex-wrap
,
or reverse wrapping with .flex-wrap-reverse
.
<div class="d-flex flex-nowrap">
...
</div>
<div class="d-flex flex-wrap">
...
</div>
<div class="d-flex flex-wrap-reverse">
...
</div>
Responsive variations also exist for 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
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.
<div class="d-flex flex-nowrap">
<div class="order-3 p-2">First flex item</div>
<div class="order-2 p-2">Second flex item</div>
<div class="order-1 p-2">Third flex item</div>
</div>
Responsive variations also exist for 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
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.
<div class="d-flex align-content-start flex-wrap">
...
</div>
<div class="d-flex align-content-end flex-wrap">
...
</div>
<div class="d-flex align-content-center flex-wrap">
...
</div>
<div class="d-flex align-content-between flex-wrap">
...
</div>
<div class="d-flex align-content-around flex-wrap">
...
</div>
<div class="d-flex align-content-stretch flex-wrap">
...
</div>
Responsive variations also exist for 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
property.
!important
is included to avoid specificity issues. These use the same
viewport breakpoints as our grid system.
Toggle a float with a class:
<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>
float
value.
<div class="float-sm-left">Float left on viewports sized SM (small) or wider</div><br>
<div class="float-md-left">Float left on viewports sized MD (medium) or wider</div><br>
<div class="float-lg-left">Float left on viewports sized LG (large) or wider</div><br>
<div class="float-xl-left">Float left on viewports sized XL (extra-large) or wider</div><br>
Here are all the support classes;
.float-left
.float-right
.float-none
.float-sm-left
.float-sm-right
.float-sm-none
.float-md-left
.float-md-right
.float-md-none
.float-lg-left
.float-lg-right
.float-lg-none
.float-xl-left
.float-xl-right
.float-xl-none
.text-hide
class or mixin to help replace an element’s text
content with a background image.
<h1 class="text-hide">Custom heading</h1>
Use the .text-hide
class to maintain the accessibility and SEO benefits of
heading tags, but want to utilize a background-image
instead of text.
<h1 class="text-hide my-2" style="background-image: url('../../assets/images/logo-icon.png'); width: 30px; height: 26px;">Bootstrap</h1>
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. |
<div class="fixed-top">...</div>
<div class="fixed-bottom">...</div>
.sticky-top
utility uses CSS’s position: sticky
,
which isn’t fully supported in all browsers.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.
<div class="sticky-top">...</div>
.sr-only
.
Combine .sr-only
with .sr-only-focusable
to show the element
again when it’s focused (e.g. by a keyboard-only user). Can also be used as mixins.
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
$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.
<div class="w-25 p-3" style="background-color: #eee;">Width 25%</div>
<div class="w-50 p-3" style="background-color: #eee;">Width 50%</div>
<div class="w-75 p-3" style="background-color: #eee;">Width 75%</div>
<div class="w-100 p-3" style="background-color: #eee;">Width 100%</div>
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 25%</div>
<div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 50%</div>
<div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 75%</div>
<div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height 100%</div>
</div>
You can also use max-width: 100%;
and max-height: 100%;
utilities as needed.
<img class="mw-100" src="..." alt="Max-width 100%">
<div style="height: 100px; background-color: rgba(255,0,0,0.1);">
<div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,0.1);">Max-height 100%</div>
</div>
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 |
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 |
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
.
xs
to xl
,
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
, and xl
.
Where property is one of:
m
- for classes that set
margin
p
- for classes that set
padding
Wheresides is one of:
t
- for classes that set
margin-top
or padding-top
b
- for classes that set
margin-bottom
or
padding-bottom
l
- for classes that set
margin-left
or padding-left
r
- for classes that set
margin-right
or
padding-right
x
- for classes that set both
*-left
and
*-right
y
- for classes that set both
*-top
and *-bottom
margin
or padding
on all 4 sides of the elementWhere size is one of:
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
2
- (by default) for classes
that set the margin
or
padding
to $spacer * .5
3
- (by default) for classes
that set the margin
or
padding
to $spacer
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 * 3
auto
- for classes that set the
margin
to auto(You can add more sizes by adding entries to the $spacers
Sass map variable.)
.mx-auto
class
for horizontally centering fixed-width block level content—that is, content that has display: block
and a width
set—by setting the horizontal margins to auto
.
<div class="mx-auto" style="width: 200px;">
Centered element
</div>
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 |
<table style="height: 100px;">
<tbody>
<tr>
<td class="align-baseline">baseline</td>
<td class="align-top">top</td>
<td class="align-middle">middle</td>
<td class="align-bottom">bottom</td>
<td class="align-text-top">text-top</td>
<td class="align-text-bottom">text-bottom</td>
</tr>
</tbody>
</table>
Set the visibility
of elements with our visibility utilities. These do not
modify the display
value at all and are helpful for hiding content from most
users, but still keeping them for screen readers.
Apply .visible
or .invisible
as needed.
<div class="visible">...</div>
<div class="invisible">...</div>