From 0bb8f991a032ff984f45ede26b53643ffa93891b Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Tue, 19 Jan 2021 08:34:18 +0200 Subject: Add v4.6.0 docs --- docs/4.6/utilities/borders/index.html | 401 +++++++++ docs/4.6/utilities/clearfix/index.html | 326 +++++++ docs/4.6/utilities/close-icon/index.html | 309 +++++++ docs/4.6/utilities/colors/index.html | 410 +++++++++ docs/4.6/utilities/display/index.html | 435 ++++++++++ docs/4.6/utilities/embed/index.html | 351 ++++++++ docs/4.6/utilities/flex/index.html | 1039 +++++++++++++++++++++++ docs/4.6/utilities/float/index.html | 364 ++++++++ docs/4.6/utilities/image-replacement/index.html | 317 +++++++ docs/4.6/utilities/index.html | 11 + docs/4.6/utilities/interactions/index.html | 311 +++++++ docs/4.6/utilities/overflow/index.html | 313 +++++++ docs/4.6/utilities/position/index.html | 329 +++++++ docs/4.6/utilities/screen-readers/index.html | 310 +++++++ docs/4.6/utilities/shadows/index.html | 312 +++++++ docs/4.6/utilities/sizing/index.html | 356 ++++++++ docs/4.6/utilities/spacing/index.html | 391 +++++++++ docs/4.6/utilities/stretched-link/index.html | 400 +++++++++ docs/4.6/utilities/text/index.html | 429 ++++++++++ docs/4.6/utilities/vertical-align/index.html | 343 ++++++++ docs/4.6/utilities/visibility/index.html | 321 +++++++ 21 files changed, 7778 insertions(+) create mode 100644 docs/4.6/utilities/borders/index.html create mode 100644 docs/4.6/utilities/clearfix/index.html create mode 100644 docs/4.6/utilities/close-icon/index.html create mode 100644 docs/4.6/utilities/colors/index.html create mode 100644 docs/4.6/utilities/display/index.html create mode 100644 docs/4.6/utilities/embed/index.html create mode 100644 docs/4.6/utilities/flex/index.html create mode 100644 docs/4.6/utilities/float/index.html create mode 100644 docs/4.6/utilities/image-replacement/index.html create mode 100644 docs/4.6/utilities/index.html create mode 100644 docs/4.6/utilities/interactions/index.html create mode 100644 docs/4.6/utilities/overflow/index.html create mode 100644 docs/4.6/utilities/position/index.html create mode 100644 docs/4.6/utilities/screen-readers/index.html create mode 100644 docs/4.6/utilities/shadows/index.html create mode 100644 docs/4.6/utilities/sizing/index.html create mode 100644 docs/4.6/utilities/spacing/index.html create mode 100644 docs/4.6/utilities/stretched-link/index.html create mode 100644 docs/4.6/utilities/text/index.html create mode 100644 docs/4.6/utilities/vertical-align/index.html create mode 100644 docs/4.6/utilities/visibility/index.html (limited to 'docs/4.6/utilities') diff --git a/docs/4.6/utilities/borders/index.html b/docs/4.6/utilities/borders/index.html new file mode 100644 index 000000000..69a6b9f79 --- /dev/null +++ b/docs/4.6/utilities/borders/index.html @@ -0,0 +1,401 @@ + + + + + + + + + + + + +Borders · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Borders

+
+

Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons, or any other element.

+ + +

Border

+

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

+

Additive

+
+ + + + + +
<span class="border"></span>
+<span class="border-top"></span>
+<span class="border-right"></span>
+<span class="border-bottom"></span>
+<span class="border-left"></span>
+

Subtractive

+
+ + + + + +
<span class="border-0"></span>
+<span class="border-top-0"></span>
+<span class="border-right-0"></span>
+<span class="border-bottom-0"></span>
+<span class="border-left-0"></span>
+

Border color

+

Change the border color using utilities built on our theme colors.

+
+ + + + + + + + + + +
<span class="border border-primary"></span>
+<span class="border border-secondary"></span>
+<span class="border border-success"></span>
+<span class="border border-danger"></span>
+<span class="border border-warning"></span>
+<span class="border border-info"></span>
+<span class="border border-light"></span>
+<span class="border border-dark"></span>
+<span class="border border-white"></span>
+

Border-radius

+

Add classes to an element to easily round its corners.

+
+Example rounded image75x75 + +Example top rounded image75x75 + +Example right rounded image75x75 + +Example bottom rounded image75x75 + +Example left rounded image75x75 + +Completely round image75x75 + +Rounded pill image150x75 + +Example non-rounded image (overrides rounding applied elsewhere)75x75 + +
<img src="..." class="rounded" alt="...">
+<img src="..." class="rounded-top" alt="...">
+<img src="..." class="rounded-right" alt="...">
+<img src="..." class="rounded-bottom" alt="...">
+<img src="..." class="rounded-left" alt="...">
+<img src="..." class="rounded-circle" alt="...">
+<img src="..." class="rounded-pill" alt="...">
+<img src="..." class="rounded-0" alt="...">
+

Sizes

+

Use .rounded-lg or .rounded-sm for larger or smaller border-radius.

+
+Example small rounded image75x75 + +Example large rounded image75x75 + +
<img src="..." class="rounded-sm" alt="...">
+<img src="..." class="rounded-lg" alt="...">
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/clearfix/index.html b/docs/4.6/utilities/clearfix/index.html new file mode 100644 index 000000000..bb12ab76d --- /dev/null +++ b/docs/4.6/utilities/clearfix/index.html @@ -0,0 +1,326 @@ + + + + + + + + + + + + +Clearfix · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Clearfix

+
+

Quickly and easily clear floated content within a container by adding a clearfix utility.

+ + +

Easily clear floats by adding .clearfix to the parent element. Can also be used as a mixin.

+
<div class="clearfix">...</div>
+
// 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-info 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>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/close-icon/index.html b/docs/4.6/utilities/close-icon/index.html new file mode 100644 index 000000000..40550ab85 --- /dev/null +++ b/docs/4.6/utilities/close-icon/index.html @@ -0,0 +1,309 @@ + + + + + + + + + + + + +Close icon · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Close icon

+
+

Use a generic close icon for dismissing content like modals and alerts.

+ + +

Be sure to include text for screen readers, as we’ve done with aria-label.

+
+ +
<button type="button" class="close" aria-label="Close">
+  <span aria-hidden="true">&times;</span>
+</button>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/colors/index.html b/docs/4.6/utilities/colors/index.html new file mode 100644 index 000000000..bec1d3123 --- /dev/null +++ b/docs/4.6/utilities/colors/index.html @@ -0,0 +1,410 @@ + + + + + + + + + + + + +Colors · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Colors

+
+

Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.

+ + +
+

Dealing with specificity

+

Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> with the class. +

+ +
+
Conveying meaning to assistive technologies
+

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class. +

+ +

Color

+
+ +

.text-primary

+

.text-secondary

+

.text-success

+

.text-danger

+

.text-warning

+

.text-info

+

.text-light

+

.text-dark

+

.text-body

+

.text-muted

+

.text-white

+

.text-black-50

+

.text-white-50

+
<p class="text-primary">.text-primary</p>
+<p class="text-secondary">.text-secondary</p>
+<p class="text-success">.text-success</p>
+<p class="text-danger">.text-danger</p>
+<p class="text-warning">.text-warning</p>
+<p class="text-info">.text-info</p>
+<p class="text-light bg-dark">.text-light</p>
+<p class="text-dark">.text-dark</p>
+<p class="text-body">.text-body</p>
+<p class="text-muted">.text-muted</p>
+<p class="text-white bg-dark">.text-white</p>
+<p class="text-black-50">.text-black-50</p>
+<p class="text-white-50 bg-dark">.text-white-50</p>
+

Contextual text classes also work well on anchors with the provided hover and focus states. Note that the .text-white and .text-muted class has no additional link styling beyond underline.

+
+ +

Primary link

+

Secondary link

+

Success link

+

Danger link

+

Warning link

+

Info link

+

Light link

+

Dark link

+

Muted link

+

White link

+
<p><a href="#" class="text-primary">Primary link</a></p>
+<p><a href="#" class="text-secondary">Secondary link</a></p>
+<p><a href="#" class="text-success">Success link</a></p>
+<p><a href="#" class="text-danger">Danger link</a></p>
+<p><a href="#" class="text-warning">Warning link</a></p>
+<p><a href="#" class="text-info">Info link</a></p>
+<p><a href="#" class="text-light bg-dark">Light link</a></p>
+<p><a href="#" class="text-dark">Dark link</a></p>
+<p><a href="#" class="text-muted">Muted link</a></p>
+<p><a href="#" class="text-white bg-dark">White link</a></p>
+

Background color

+

Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities do not set color, so in some cases you’ll want to use .text-* utilities.

+
+ +
.bg-primary
+
.bg-secondary
+
.bg-success
+
.bg-danger
+
.bg-warning
+
.bg-info
+
.bg-light
+
.bg-dark
+
.bg-white
+
.bg-transparent
+
<div class="p-3 mb-2 bg-primary text-white">.bg-primary</div>
+<div class="p-3 mb-2 bg-secondary text-white">.bg-secondary</div>
+<div class="p-3 mb-2 bg-success text-white">.bg-success</div>
+<div class="p-3 mb-2 bg-danger text-white">.bg-danger</div>
+<div class="p-3 mb-2 bg-warning text-dark">.bg-warning</div>
+<div class="p-3 mb-2 bg-info text-white">.bg-info</div>
+<div class="p-3 mb-2 bg-light text-dark">.bg-light</div>
+<div class="p-3 mb-2 bg-dark text-white">.bg-dark</div>
+<div class="p-3 mb-2 bg-white text-dark">.bg-white</div>
+<div class="p-3 mb-2 bg-transparent text-dark">.bg-transparent</div>
+

Background gradient

+

When $enable-gradients is set to true (default is false), you can use .bg-gradient- utility classes. Learn about our Sass options to enable these classes and more.

+
    +
  • .bg-gradient-primary
    • +
  • .bg-gradient-secondary
    • +
  • .bg-gradient-success
    • +
  • .bg-gradient-danger
    • +
  • .bg-gradient-warning
    • +
  • .bg-gradient-info
    • +
  • .bg-gradient-light
    • +
  • .bg-gradient-dark
    • +
+ + +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/display/index.html b/docs/4.6/utilities/display/index.html new file mode 100644 index 000000000..a04dc7a17 --- /dev/null +++ b/docs/4.6/utilities/display/index.html @@ -0,0 +1,435 @@ + + + + + + + + + + + + +Display property · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Display property

+
+

Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

+ + +

How it works

+

Change the value of the display property with our responsive display utility classes. We purposely support only a subset of all possible values for display. Classes can be combined for various effects as you need.

+

Notation

+

Display utility classes that apply to all breakpoints, from 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.

+

As such, the classes are named using the format:

+
    +
  • .d-{value} for xs
    • +
  • .d-{breakpoint}-{value} for sm, md, lg, and xl.
    • +
+

Where value is one of:

+
    +
  • none
    • +
  • inline
    • +
  • inline-block
    • +
  • block
    • +
  • table
    • +
  • table-cell
    • +
  • table-row
    • +
  • flex
    • +
  • inline-flex
    • +
+

The display values can be altered by changing the $displays variable and recompiling the SCSS.

+

The media queries affect screen widths with the given breakpoint or larger. For example, .d-lg-none sets display: none; on both lg and xl screens.

+

Examples

+
+
d-inline
+
d-inline
+
<div class="d-inline p-2 bg-primary text-white">d-inline</div>
+<div class="d-inline p-2 bg-dark text-white">d-inline</div>
+
+d-block +d-block +
<span class="d-block p-2 bg-primary text-white">d-block</span>
+<span class="d-block p-2 bg-dark text-white">d-block</span>
+

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 elements 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 SizeClass
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
+
+
hide on lg and wider screens
+
hide on screens smaller than lg
+
<div class="d-lg-none">hide on lg and wider screens</div>
+<div class="d-none d-lg-block">hide on screens smaller than lg</div>
+

Display in print

+

Change the display value of elements when printing with our print display utility classes. Includes support for the same display values as our responsive .d-* utilities.

+
    +
  • .d-print-none
    • +
  • .d-print-inline
    • +
  • .d-print-inline-block
    • +
  • .d-print-block
    • +
  • .d-print-table
    • +
  • .d-print-table-row
    • +
  • .d-print-table-cell
    • +
  • .d-print-flex
    • +
  • .d-print-inline-flex
    • +
+

The print and display classes can be combined.

+
+
Screen Only (Hide on print only)
+
Print Only (Hide on screen only)
+
Hide up to large on screen, but always show on print
+
<div class="d-print-none">Screen Only (Hide on print only)</div>
+<div class="d-none d-print-block">Print Only (Hide on screen only)</div>
+<div class="d-none d-lg-block d-print-block">Hide up to large on screen, but always show on print</div>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/embed/index.html b/docs/4.6/utilities/embed/index.html new file mode 100644 index 000000000..d15cf1578 --- /dev/null +++ b/docs/4.6/utilities/embed/index.html @@ -0,0 +1,351 @@ + + + + + + + + + + + + +Embeds · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Embeds

+
+

Create responsive video or slideshow embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

+ + +

About

+

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.

+

Example

+

Wrap any embed like an <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>
+

Aspect ratios

+

Aspect ratios can be customized with modifier classes. By default the following ratio classes are provided:

+
<!-- 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>
+

Within _variables.scss, you can change the aspect ratios you want to use. Here’s an example of the $embed-responsive-aspect-ratios list:

+
$embed-responsive-aspect-ratios: (
+  (21 9),
+  (16 9),
+  (4 3),
+  (1 1)
+) !default;
+
+
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/flex/index.html b/docs/4.6/utilities/flex/index.html new file mode 100644 index 000000000..dff624d9d --- /dev/null +++ b/docs/4.6/utilities/flex/index.html @@ -0,0 +1,1039 @@ + + + + + + + + + + + + +Flex · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Flex

+
+

Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. For more complex implementations, custom CSS may be necessary.

+ + +

Enable flex behaviors

+

Apply 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.

+
+
I'm a flexbox container!
+
<div class="d-flex p-2 bd-highlight">I'm a flexbox container!</div>
+
+
I'm an inline flexbox container!
+
<div class="d-inline-flex p-2 bd-highlight">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
    • +
+ +

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.

+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
<div class="d-flex flex-row bd-highlight mb-3">
+  <div class="p-2 bd-highlight">Flex item 1</div>
+  <div class="p-2 bd-highlight">Flex item 2</div>
+  <div class="p-2 bd-highlight">Flex item 3</div>
+</div>
+<div class="d-flex flex-row-reverse bd-highlight">
+  <div class="p-2 bd-highlight">Flex item 1</div>
+  <div class="p-2 bd-highlight">Flex item 2</div>
+  <div class="p-2 bd-highlight">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.

+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
+
Flex item 1
+
Flex item 2
+
Flex item 3
+
+
<div class="d-flex flex-column bd-highlight mb-3">
+  <div class="p-2 bd-highlight">Flex item 1</div>
+  <div class="p-2 bd-highlight">Flex item 2</div>
+  <div class="p-2 bd-highlight">Flex item 3</div>
+</div>
+<div class="d-flex flex-column-reverse bd-highlight">
+  <div class="p-2 bd-highlight">Flex item 1</div>
+  <div class="p-2 bd-highlight">Flex item 2</div>
+  <div class="p-2 bd-highlight">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

+

Use 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.

+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
<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

+

Use 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).

+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
Flex item
+
Flex item
+
Flex item
+
+
+
<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

+

Use 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).

+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
Flex item
+
Aligned flex item
+
Flex item
+
+
+
<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
    • +
+ +

Fill

+

Use the .flex-fill class on a series of sibling elements to force them into widths equal to their content (or equal widths if their content does not surpass their border-boxes) while taking up all available horizontal space.

+
+
+
Flex item with a lot of content
+
Flex item
+
Flex item
+
+
<div class="d-flex bd-highlight">
+  <div class="p-2 flex-fill bd-highlight">Flex item with a lot of content</div>
+  <div class="p-2 flex-fill bd-highlight">Flex item</div>
+  <div class="p-2 flex-fill bd-highlight">Flex item</div>
+</div>
+

Responsive variations also exist for flex-fill.

+
    +
  • .flex-fill
    • +
  • .flex-sm-fill
    • +
  • .flex-md-fill
    • +
  • .flex-lg-fill
    • +
  • .flex-xl-fill
    • +
+ +

Grow and shrink

+

Use .flex-grow-* utilities to toggle a flex item’s ability to grow to fill available space. In the example below, the .flex-grow-1 elements uses all available space it can, while allowing the remaining two flex items their necessary space.

+
+
+
Flex item
+
Flex item
+
Third flex item
+
+
<div class="d-flex bd-highlight">
+  <div class="p-2 flex-grow-1 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Third flex item</div>
+</div>
+

Use .flex-shrink-* utilities to toggle a flex item’s ability to shrink if necessary. In the example below, the second flex item with .flex-shrink-1 is forced to wrap its contents to a new line, “shrinking” to allow more space for the previous flex item with .w-100.

+
+
+
Flex item
+
Flex item
+
+
<div class="d-flex bd-highlight">
+  <div class="p-2 w-100 bd-highlight">Flex item</div>
+  <div class="p-2 flex-shrink-1 bd-highlight">Flex item</div>
+</div>
+

Responsive variations also exist for flex-grow and flex-shrink.

+
    +
  • .flex-{grow|shrink}-0
    • +
  • .flex-{grow|shrink}-1
    • +
  • .flex-sm-{grow|shrink}-0
    • +
  • .flex-sm-{grow|shrink}-1
    • +
  • .flex-md-{grow|shrink}-0
    • +
  • .flex-md-{grow|shrink}-1
    • +
  • .flex-lg-{grow|shrink}-0
    • +
  • .flex-lg-{grow|shrink}-1
    • +
  • .flex-xl-{grow|shrink}-0
    • +
  • .flex-xl-{grow|shrink}-1
    • +
+ +

Auto margins

+

Flexbox can do some pretty awesome things when you mix flex alignments with auto margins. Shown below are three examples of controlling flex items via auto margins: default (no auto margin), pushing two items to the right (.mr-auto), and pushing two items to the left (.ml-auto).

+

Unfortunately, IE10 and IE11 do not properly support auto margins on flex items whose parent has a non-default justify-content value. See this StackOverflow answer for more details.

+
+
+
Flex item
+
Flex item
+
Flex item
+
+ +
+
Flex item
+
Flex item
+
Flex item
+
+ +
+
Flex item
+
Flex item
+
Flex item
+
+
<div class="d-flex bd-highlight mb-3">
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+</div>
+
+<div class="d-flex bd-highlight mb-3">
+  <div class="mr-auto p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+</div>
+
+<div class="d-flex bd-highlight mb-3">
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="ml-auto p-2 bd-highlight">Flex item</div>
+</div>
+

With align-items

+

Vertically move one flex item to the top or bottom of a container by mixing align-items, flex-direction: column, and margin-top: auto or margin-bottom: auto.

+
+
+
Flex item
+
Flex item
+
Flex item
+
+ +
+
Flex item
+
Flex item
+
Flex item
+
+
<div class="d-flex align-items-start flex-column bd-highlight mb-3" style="height: 200px;">
+  <div class="mb-auto p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+</div>
+
+<div class="d-flex align-items-end flex-column bd-highlight mb-3" style="height: 200px;">
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="p-2 bd-highlight">Flex item</div>
+  <div class="mt-auto p-2 bd-highlight">Flex item</div>
+</div>
+

Wrap

+

Change how flex items wrap in a flex container. Choose from no wrapping at all (the browser default) with .flex-nowrap, wrapping with .flex-wrap, or reverse wrapping with .flex-wrap-reverse.

+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<div class="d-flex flex-nowrap">
+  ...
+</div>
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<div class="d-flex flex-wrap">
+  ...
+</div>
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<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

+

Change the visual order of specific flex items with a handful of 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.

+
+
+
First flex item
+
Second flex item
+
Third flex item
+
+
<div class="d-flex flex-nowrap bd-highlight">
+  <div class="order-3 p-2 bd-highlight">First flex item</div>
+  <div class="order-2 p-2 bd-highlight">Second flex item</div>
+  <div class="order-1 p-2 bd-highlight">Third flex item</div>
+</div>
+

Responsive variations also exist for order.

+
    +
  • .order-0
    • +
  • .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-0
    • +
  • .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-0
    • +
  • .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-0
    • +
  • .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-0
    • +
  • .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

+

Use 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.

+

Heads up! This property has no effect on single rows of flex items.

+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<div class="d-flex align-content-start flex-wrap">
+  ...
+</div>
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<div class="d-flex align-content-end flex-wrap">...</div>
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<div class="d-flex align-content-center flex-wrap">...</div>
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<div class="d-flex align-content-between flex-wrap">...</div>
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<div class="d-flex align-content-around flex-wrap">...</div>
+
+
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
Flex item
+
+
+
<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
    • +
+ + +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/float/index.html b/docs/4.6/utilities/float/index.html new file mode 100644 index 000000000..0ef3c6dc2 --- /dev/null +++ b/docs/4.6/utilities/float/index.html @@ -0,0 +1,364 @@ + + + + + + + + + + + + +Float · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Float

+
+

Toggle floats on any element, across any breakpoint, using our responsive float utilities.

+ + +

Overview

+

These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport breakpoints as our grid system. Please be aware float utilities have no effect on flex items.

+

Classes

+

Toggle a float with a class:

+
+
Float left on all viewport sizes

+
Float right on all viewport sizes

+
Don't float on all viewport sizes
+
<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>
+

Mixins

+

Or by Sass mixin:

+
.element {
+  @include float-left;
+}
+.another-element {
+  @include float-right;
+}
+.one-more {
+  @include float-none;
+}
+

Responsive

+

Responsive variations also exist for each float value.

+
+
Float left on viewports sized SM (small) or wider

+
Float left on viewports sized MD (medium) or wider

+
Float left on viewports sized LG (large) or wider

+
Float left on viewports sized XL (extra-large) or wider

+
<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
    • +
+ + +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/image-replacement/index.html b/docs/4.6/utilities/image-replacement/index.html new file mode 100644 index 000000000..b27be6ca1 --- /dev/null +++ b/docs/4.6/utilities/image-replacement/index.html @@ -0,0 +1,317 @@ + + + + + + + + + + + + +Image replacement · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Image replacement

+
+

Swap text for background images with the image replacement class.

+ + +
+
Warning
+

The text-hide() class and mixin has been deprecated as of v4.1. It will be removed entirely in v5. +

+ +

Utilize the .text-hide class or mixin to help replace an element’s text content with a background image.

+
<h1 class="text-hide">Custom heading</h1>
+
// Usage as a mixin
+.heading {
+  @include text-hide;
+}
+

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.

+
+

Bootstrap

+
+
<h1 class="text-hide" style="background-image: url('...');">Bootstrap</h1>
+
+
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/index.html b/docs/4.6/utilities/index.html new file mode 100644 index 000000000..ef815fce1 --- /dev/null +++ b/docs/4.6/utilities/index.html @@ -0,0 +1,11 @@ + + + + + + https://getbootstrap.com/docs/4.6/utilities/borders/ + + + + + diff --git a/docs/4.6/utilities/interactions/index.html b/docs/4.6/utilities/interactions/index.html new file mode 100644 index 000000000..a5beea142 --- /dev/null +++ b/docs/4.6/utilities/interactions/index.html @@ -0,0 +1,311 @@ + + + + + + + + + + + + +Interactions · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Interactions

+
+

Utility classes that change how users interact with the contents of a website.

+ + +

Text selection

+

Change how the content is selected when the user interacts with it. Note that Internet Explorer and Legacy Edge have no support for the all value for user-select, and as such, .user-select-all is not supported by either browser.

+
+

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

+

This paragraph has the default select behavior.

+

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

+
<p class="user-select-all">This paragraph will be entirely selected when clicked by the user.</p>
+<p class="user-select-auto">This paragraph has the default select behavior.</p>
+<p class="user-select-none">This paragraph will not be selectable when clicked by the user.</p>
+

Customize the available classes by changing the $user-selects Sass list in _variables.scss.

+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/overflow/index.html b/docs/4.6/utilities/overflow/index.html new file mode 100644 index 000000000..061ad61ff --- /dev/null +++ b/docs/4.6/utilities/overflow/index.html @@ -0,0 +1,313 @@ + + + + + + + + + + + + +Overflow · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Overflow

+
+

Use these shorthand utilities for quickly configuring how content overflows an element.

+ + +

Barebones overflow functionality is provided for two values by default, and they are not responsive.

+
+
+ This is an example of using .overflow-auto on an element with set width and height dimensions. By design, this content will vertically scroll. +
+
+ This is an example of using .overflow-hidden on an element with set width and height dimensions. +
+
+
<div class="overflow-auto">...</div>
+<div class="overflow-hidden">...</div>
+

Using Sass variables, you may customize the overflow utilities by changing the $overflows variable in _variables.scss.

+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/position/index.html b/docs/4.6/utilities/position/index.html new file mode 100644 index 000000000..8ca9381f3 --- /dev/null +++ b/docs/4.6/utilities/position/index.html @@ -0,0 +1,329 @@ + + + + + + + + + + + + +Position · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Position

+
+

Use these shorthand utilities for quickly configuring the position of an element.

+ + +

Common values

+

Quick positioning classes are available, though they are not responsive.

+
<div class="position-static">...</div>
+<div class="position-relative">...</div>
+<div class="position-absolute">...</div>
+<div class="position-fixed">...</div>
+<div class="position-sticky">...</div>
+

Fixed top

+

Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

+
<div class="fixed-top">...</div>
+

Fixed bottom

+

Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS.

+
<div class="fixed-bottom">...</div>
+

Sticky top

+

Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The .sticky-top utility uses CSS’s position: sticky, which isn’t fully supported in all browsers.

+

IE11 and IE10 will render position: sticky as position: relative. As such, we wrap the styles in a @supports query, limiting the stickiness to only browsers that can render it properly.

+
<div class="sticky-top">...</div>
+
+
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/screen-readers/index.html b/docs/4.6/utilities/screen-readers/index.html new file mode 100644 index 000000000..81cecdde2 --- /dev/null +++ b/docs/4.6/utilities/screen-readers/index.html @@ -0,0 +1,310 @@ + + + + + + + + + + + + +Screen readers · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Screen readers

+
+

Use screen reader utilities to hide elements on all devices except screen readers.

+ + +

Hide an element to all devices except screen readers with .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.

+
+Skip to main content +
<a class="sr-only sr-only-focusable" href="#content">Skip to main content</a>
+
// Usage as a mixin
+.skip-navigation {
+  @include sr-only;
+  @include sr-only-focusable;
+}
+
+
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/shadows/index.html b/docs/4.6/utilities/shadows/index.html new file mode 100644 index 000000000..a3603f6ee --- /dev/null +++ b/docs/4.6/utilities/shadows/index.html @@ -0,0 +1,312 @@ + + + + + + + + + + + + +Shadows · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Shadows

+
+

Add or remove shadows to elements with box-shadow utilities.

+ + +

Examples

+

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
+
Small shadow
+
Regular shadow
+
Larger shadow
+
<div class="shadow-none p-3 mb-5 bg-light rounded">No shadow</div>
+<div class="shadow-sm p-3 mb-5 bg-white rounded">Small shadow</div>
+<div class="shadow p-3 mb-5 bg-white rounded">Regular shadow</div>
+<div class="shadow-lg p-3 mb-5 bg-white rounded">Larger shadow</div>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/sizing/index.html b/docs/4.6/utilities/sizing/index.html new file mode 100644 index 000000000..b1e9c1ef6 --- /dev/null +++ b/docs/4.6/utilities/sizing/index.html @@ -0,0 +1,356 @@ + + + + + + + + + + + + +Sizing · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Sizing

+
+

Easily make an element as wide or as tall with our width and height utilities.

+ + +

Relative to the parent

+

Width and height utilities are generated from the $sizes Sass map in _variables.scss. Includes support for 25%, 50%, 75%, 100%, and auto by default. Modify those values as you need to generate different utilities here.

+
+
Width 25%
+
Width 50%
+
Width 75%
+
Width 100%
+
Width auto
+
<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 class="w-auto p-3" style="background-color: #eee;">Width auto</div>
+
+
+
Height 25%
+
Height 50%
+
Height 75%
+
Height 100%
+
Height auto
+
+
<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 class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Height auto</div>
+</div>
+

You can also use max-width: 100%; and max-height: 100%; utilities as needed.

+
+PlaceholderMax-width 100% + +
<img src="..." class="mw-100" alt="...">
+
+
+
Max-height 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>
+

Relative to the viewport

+

You can also use utilities to set the width and height relative to the viewport.

+
<div class="min-vw-100">Min-width 100vw</div>
+<div class="min-vh-100">Min-height 100vh</div>
+<div class="vw-100">Width 100vw</div>
+<div class="vh-100">Height 100vh</div>
+
+
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/spacing/index.html b/docs/4.6/utilities/spacing/index.html new file mode 100644 index 000000000..54b84b53e --- /dev/null +++ b/docs/4.6/utilities/spacing/index.html @@ -0,0 +1,391 @@ + + + + + + + + + + + + +Spacing · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Spacing

+
+

Bootstrap includes a wide range of shorthand responsive margin and padding utility classes to modify an element’s appearance.

+ + +

How it works

+

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.

+

Notation

+

Spacing utilities that apply to all breakpoints, from 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
    • +
+

Where sides 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
    • +
  • blank - for classes that set a margin or padding on all 4 sides of the element
    • +
+

Where 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.)

+

Examples

+

Here are some representative examples of these classes:

+
.mt-0 {
+  margin-top: 0 !important;
+}
+
+.ml-1 {
+  margin-left: ($spacer * .25) !important;
+}
+
+.px-2 {
+  padding-left: ($spacer * .5) !important;
+  padding-right: ($spacer * .5) !important;
+}
+
+.p-3 {
+  padding: $spacer !important;
+}
+

Horizontal centering

+

Additionally, Bootstrap also includes an .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.

+
+
+ Centered element +
+
+
<div class="mx-auto" style="width: 200px;">
+  Centered element
+</div>
+

Negative margin

+

In CSS, margin properties can utilize negative values (padding cannot). As of 4.2, we’ve added negative margin utilities for every non-zero integer size listed above (e.g., 1, 2, 3, 4, 5). These utilities are ideal for customizing grid column gutters across breakpoints.

+

The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here’s an example class that’s the opposite of .mt-1:

+
.mt-n1 {
+  margin-top: -0.25rem !important;
+}
+

Here’s an example of customizing the Bootstrap grid at the medium (md) breakpoint and above. We’ve increased the .col padding with .px-md-5 and then counteracted that with .mx-md-n5 on the parent .row.

+
+
+
Custom column padding
+
Custom column padding
+
+
<div class="row mx-md-n5">
+  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
+  <div class="col px-md-5"><div class="p-3 border bg-light">Custom column padding</div></div>
+</div>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/stretched-link/index.html b/docs/4.6/utilities/stretched-link/index.html new file mode 100644 index 000000000..a75904919 --- /dev/null +++ b/docs/4.6/utilities/stretched-link/index.html @@ -0,0 +1,400 @@ + + + + + + + + + + + + +Stretched link · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Stretched link

+
+

Make any HTML element or Bootstrap component clickable by “stretching” a nested link via CSS.

+ + +

Add .stretched-link to a link to make its containing block clickable via a ::after pseudo element. In most cases, this means that an element with position: relative; that contains a link with the .stretched-link class is clickable. Please note given how CSS position works, .stretched-link cannot be mixed with most table elements.

+

Cards have position: relative by default in Bootstrap, so in this case you can safely add the .stretched-link class to a link in the card without any other HTML changes.

+

Multiple links and tap targets are not recommended with stretched links. However, some position and z-index styles can help should this be required.

+
+
+ Card image cap + +
+
Card with stretched link
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Go somewhere +
+
+
<div class="card" style="width: 18rem;">
+  <img src="..." class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title">Card with stretched link</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
+  </div>
+</div>
+

Media objects do not have position: relative by default, so we need to add the .position-relative here to prevent the link from stretching outside the media object.

+
+
+ Generic placeholder image + +
+
Media with stretched link
+

This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.

+ Go somewhere +
+
+
<div class="media position-relative">
+  <img src="..." class="mr-3" alt="...">
+  <div class="media-body">
+    <h5 class="mt-0">Media with stretched link</h5>
+    <p>This is some placeholder content for the media object. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
+    <a href="#" class="stretched-link">Go somewhere</a>
+  </div>
+</div>
+

Columns are position: relative by default, so clickable columns only require the .stretched-link class on a link. However, stretching a link over an entire .row requires .position-static on the column and .position-relative on the row.

+
+
+
+ Generic placeholder image + +
+
+
Columns with stretched link
+

Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.

+ Go somewhere +
+
+
<div class="row no-gutters bg-light position-relative">
+  <div class="col-md-6 mb-md-0 p-md-4">
+    <img src="..." class="w-100" alt="...">
+  </div>
+  <div class="col-md-6 position-static p-4 pl-md-0">
+    <h5 class="mt-0">Columns with stretched link</h5>
+    <p>Another instance of placeholder content for this other custom component. It is intended to mimic what some real-world content would look like, and we're using it here to give the component a bit of body and size.</p>
+    <a href="#" class="stretched-link">Go somewhere</a>
+  </div>
+</div>
+

Identifying the containing block

+

If the stretched link doesn’t seem to work, the containing block will probably be the cause. The following CSS properties will make an element the containing block:

+
    +
  • A position value other than static
    • +
  • A transform or perspective value other than none
    • +
  • A will-change value of transform or perspective
    • +
  • A filter value other than none or a will-change value of filter (only works on Firefox)
    • +
+
+
+ Card image cap + +
+
Card with stretched links
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+

+ Stretched link will not work here, because position: relative is added to the link +

+

+ This stretched link will only be spread over the p-tag, because a transform is applied to it. +

+
+
+
<div class="card" style="width: 18rem;">
+  <img src="..." class="card-img-top" alt="...">
+  <div class="card-body">
+    <h5 class="card-title">Card with stretched links</h5>
+    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+    <p class="card-text">
+      <a href="#" class="stretched-link text-danger" style="position: relative;">Stretched link will not work here, because <code>position: relative</code> is added to the link</a>
+    </p>
+    <p class="card-text bg-light" style="transform: rotate(0);">
+      This <a href="#" class="text-warning stretched-link">stretched link</a> will only be spread over the <code>p</code>-tag, because a transform is applied to it.
+    </p>
+  </div>
+</div>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/text/index.html b/docs/4.6/utilities/text/index.html new file mode 100644 index 000000000..05910456e --- /dev/null +++ b/docs/4.6/utilities/text/index.html @@ -0,0 +1,429 @@ + + + + + + + + + + + + +Text · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + + + +
+
+ View on GitHub +

Text

+
+

Documentation and examples for common text utilities to control alignment, wrapping, weight, and more.

+ + +

Text alignment

+

Easily realign text to components with text alignment classes.

+
+

Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.

+
<p class="text-justify">Some placeholder text to demonstrate justified text alignment. Will you do the same for me? It's time to face the music I'm no longer your muse. Heard it's beautiful, be the judge and my girls gonna take a vote. I can feel a phoenix inside of me. Heaven is jealous of our love, angels are crying from up above. Yeah, you take me to utopia.</p>
+

For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.

+
+

Left aligned text on all viewport sizes.

+

Center aligned text on all viewport sizes.

+

Right aligned text on all viewport sizes.

+ +

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

+

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

+

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

+

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

+
<p class="text-left">Left aligned text on all viewport sizes.</p>
+<p class="text-center">Center aligned text on all viewport sizes.</p>
+<p class="text-right">Right aligned text on all viewport sizes.</p>
+
+<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
+<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
+<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
+<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
+

Text wrapping and overflow

+

Wrap text with a .text-wrap class.

+
+
+ This text should wrap. +
+
<div class="badge badge-primary text-wrap" style="width: 6rem;">
+  This text should wrap.
+</div>
+

Prevent text from wrapping with a .text-nowrap class.

+
+
+ This text should overflow the parent. +
+
<div class="text-nowrap bd-highlight" style="width: 8rem;">
+  This text should overflow the parent.
+</div>
+

For longer content, you can add a .text-truncate class to truncate the text with an ellipsis. Requires display: inline-block or display: block.

+
+ +
+
+ Praeterea iter est quasdam res quas ex communi. +
+
+ + + + Praeterea iter est quasdam res quas ex communi. + +
<!-- Block level -->
+<div class="row">
+  <div class="col-2 text-truncate">
+    Praeterea iter est quasdam res quas ex communi.
+  </div>
+</div>
+
+<!-- Inline level -->
+<span class="d-inline-block text-truncate" style="max-width: 150px;">
+  Praeterea iter est quasdam res quas ex communi.
+</span>
+

Word break

+

Prevent long strings of text from breaking your components' layout by using .text-break to set word-wrap: break-word and word-break: break-word. We use word-wrap instead of the more common overflow-wrap for wider browser support, and add the deprecated word-break: break-word to avoid issues with flex containers.

+
+

mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm

+
<p class="text-break">mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm</p>
+

Text transform

+

Transform text in components with text capitalization classes.

+
+

Lowercased text.

+

Uppercased text.

+

CapiTaliZed text.

+
<p class="text-lowercase">Lowercased text.</p>
+<p class="text-uppercase">Uppercased text.</p>
+<p class="text-capitalize">CapiTaliZed text.</p>
+

Note how .text-capitalize only changes the first letter of each word, leaving the case of any other letters unaffected.

+

Font weight and italics

+

Quickly change the weight (boldness) of text or italicize text.

+
+

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.

+
<p class="font-weight-bold">Bold text.</p>
+<p class="font-weight-bolder">Bolder weight text (relative to the parent element).</p>
+<p class="font-weight-normal">Normal weight text.</p>
+<p class="font-weight-light">Light weight text.</p>
+<p class="font-weight-lighter">Lighter weight text (relative to the parent element).</p>
+<p class="font-italic">Italic text.</p>
+

Monospace

+

Change a selection to our monospace font stack with .text-monospace.

+
+

This is in monospace

+
<p class="text-monospace">This is in monospace</p>
+

Reset color

+

Reset a text or link’s color with .text-reset, so that it inherits the color from its parent.

+
+

+ Muted text with a reset link. +

+
<p class="text-muted">
+  Muted text with a <a href="#" class="text-reset">reset link</a>.
+</p>
+

Text decoration

+

Remove a text decoration with a .text-decoration-none class.

+
+Non-underlined link +
<a href="#" class="text-decoration-none">Non-underlined link</a>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/vertical-align/index.html b/docs/4.6/utilities/vertical-align/index.html new file mode 100644 index 000000000..2ad4e76e8 --- /dev/null +++ b/docs/4.6/utilities/vertical-align/index.html @@ -0,0 +1,343 @@ + + + + + + + + + + + + +Vertical alignment · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Vertical alignment

+
+

Easily change the vertical alignment of inline, inline-block, inline-table, and table cell elements.

+ + +

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.

+

With inline elements:

+
+baseline +top +middle +bottom +text-top +text-bottom +
<span class="align-baseline">baseline</span>
+<span class="align-top">top</span>
+<span class="align-middle">middle</span>
+<span class="align-bottom">bottom</span>
+<span class="align-text-top">text-top</span>
+<span class="align-text-bottom">text-bottom</span>
+

With table cells:

+
+ + + + + + + + + + + +
baselinetopmiddlebottomtext-toptext-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>
+ +
+
+
+ + + + + + + + + + + + + diff --git a/docs/4.6/utilities/visibility/index.html b/docs/4.6/utilities/visibility/index.html new file mode 100644 index 000000000..e27a492c7 --- /dev/null +++ b/docs/4.6/utilities/visibility/index.html @@ -0,0 +1,321 @@ + + + + + + + + + + + + +Visibility · Bootstrap v4.6 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ Skip to main content + Skip to docs navigation +
+
+ + +
+ + Bootstrap + + +
+ +
+ + + + Download +
+ + +
+
+
+ + +
+ +
+ +
+ + + +
+
+ View on GitHub +

Visibility

+
+

Control the visibility, without modifying the display, of elements with visibility utilities.

+ + +

Set the visibility of elements with our visibility utilities. These utility classes do not modify the display value at all and do not affect layout – .invisible elements still take up space in the page. Content will be hidden both visually and for assistive technology/screen reader users.

+

Apply .visible or .invisible as needed.

+
<div class="visible">...</div>
+<div class="invisible">...</div>
+
// Class
+.visible {
+  visibility: visible !important;
+}
+.invisible {
+  visibility: hidden !important;
+}
+
+// Usage as a mixin
+// Warning: The `invisible()` mixin has been deprecated as of v4.3.0. It will be removed entirely in v5.
+.element {
+  @include invisible(visible);
+}
+.element {
+  @include invisible(hidden);
+}
+
+
+
+
+ + + + + + + + + + + + + -- cgit v1.2.3