Overflow and visibility
Overflow
Helper classes for controlling how an element handles content that is too large for the container.
.overflow-auto
or .overflow-{xs,sm,md,lg,xl,xxl}-auto
|
overflow: auto;
|
.overflow-hidden
or .overflow-{xs,sm,md,lg,xl,xxl}-hidden
|
overflow: hidden;
|
.overflow-visible
or .overflow-{xs,sm,md,lg,xl,xxl}-visible
|
overflow: visible;
|
.overflow-scroll
or .overflow-{xs,sm,md,lg,xl,xxl}-scroll
|
overflow: scroll;
|
.overflow-x-auto
or .overflow-x-{xs,sm,md,lg,xl,xxl}-auto
|
overflow-x: auto;
|
.overflow-x-hidden
or .overflow-x-{xs,sm,md,lg,xl,xxl}-hidden
|
overflow-x: hidden;
|
.overflow-x-visible
or .overflow-x-{xs,sm,md,lg,xl,xxl}-visible
|
overflow-x: visible;
|
.overflow-x-scroll
or .overflow-x-{xs,sm,md,lg,xl,xxl}-scroll
|
overflow-x: scroll;
|
.overflow-y-auto
or .overflow-y-{xs,sm,md,lg,xl,xxl}-auto
|
overflow-y: auto;
|
.overflow-y-hidden
or .overflow-y-{xs,sm,md,lg,xl,xxl}-hidden
|
overflow-y: hidden;
|
.overflow-y-visible
or .overflow-y-{xs,sm,md,lg,xl,xxl}-visible
|
overflow-y: visible;
|
.overflow-y-scroll
or .overflow-y-{xs,sm,md,lg,xl,xxl}-scroll
|
overflow-y: scroll;
|
<!-- Overflow -->
<div class="overflow-hidden"> ... </div>
<div class="overflow-x-scroll"> ... </div>
<!-- or with breakpoints -->
<div class="overflow-x-xs-auto"> for min-width: 550px and up </div>
<div class="overflow-x-sm-auto"> for min-width: 769px and up </div>
<div class="overflow-x-md-auto"> for min-width: 992px and up </div>
<div class="overflow-x-lg-auto"> for min-width: 1280px and up </div>
<div class="overflow-x-xl-auto"> for min-width: 1440px and up </div>
<div class="overflow-x-xxl-auto"> for min-width: 1680px and up </div>
Visibility
Use visibility classes to add display or to hide and element.
Here are all the supported classes:
.visibile
or .visibile-{xs,sm,md,lg,xl,xxl}
|
visibility: visibile;
|
.invisible
or .invisible-{xs,sm,md,lg,xl,xxl}
|
visibility: hidden;
|
<div class="visible"> ... </div>
<div class="visible-sm"> ... </div>
<div class="invisible"> ... </div>
<div class="invisible-lg"> ... </div>
Z-index
Helper classes for controlling the stack order of an element.
Here are all the supported classes:
.z-index-0
-z-index: 0;
.z-index-1
-z-index: 1;
.z-index-2
-z-index: 2;
.z-index-3
-z-index: 3;
.z-index-4
-z-index: 4;
.z-index-5
-z-index: 5;
.z-index-10
-z-index: 10;
.z-index-20
-z-index: 20;
.z-index-50
-z-index: 50;
.z-index-auto
-z-index: auto;
<div class="z-index-3"> ... </div>