DEV Community

Cover image for Day 8 Bootstrap 5 helper
Brijesh Dobariya
Brijesh Dobariya

Posted on

Day 8 Bootstrap 5 helper

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.

Use in HTML:

<div class="clearfix">...</div>
Enter fullscreen mode Exit fullscreen mode

The mixin source code:

@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}
Enter fullscreen mode Exit fullscreen mode

Use the mixin in SCSS:

.element {
  @include clearfix;
}
Enter fullscreen mode Exit fullscreen mode

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.

Alt Text

<div class="bg-info clearfix">
  <button type="button" class="btn btn-secondary float-start">Example Button floated left</button>
  <button type="button" class="btn btn-secondary float-end">Example Button floated right</button>
</div>
Enter fullscreen mode Exit fullscreen mode

Colored links

You can use the .link-* classes to colorize links. Unlike the .text-* classes, these classes have a :hover and :focus state.

Alt Text

<a href="#" class="link-primary">Primary link</a>
<a href="#" class="link-secondary">Secondary link</a>
<a href="#" class="link-success">Success link</a>
<a href="#" class="link-danger">Danger link</a>
<a href="#" class="link-warning">Warning link</a>
<a href="#" class="link-info">Info link</a>
<a href="#" class="link-light">Light link</a>
<a href="#" class="link-dark">Dark link</a>
Enter fullscreen mode Exit fullscreen mode

Note: Some of the link styles use a relatively light foreground color, and should only be used on a dark background in order to have sufficient contrast.

Ratios

Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.

About

Use the ratio helper to manage the aspect ratios of external content like <iframe>s, <embed>s, <video>s, and <object>s.
These helpers also can be used on any standard HTML child element (e.g., a <div> or <img>). Styles are applied from the parent .ratio class directly to the child.

Aspect ratios are declared in a Sass map and included in each class via CSS variable, which also allows custom aspect ratios.
Note: You don’t need frameborder="0" on your <iframe>s as we override that for you in Reboot.

Example

Wrap any embed, like an <iframe>, in a parent element with .ratio and an aspect ratio class. The immediate child element is automatically sized thanks to our universal selector .ratio > *.

<div class="ratio ratio-16x9">
  <iframe src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" title="YouTube video" allowfullscreen></iframe>
</div>
Enter fullscreen mode Exit fullscreen mode

Aspect ratios

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

Alt Text

<div class="ratio ratio-1x1">
  <div>1x1</div>
</div>
<div class="ratio ratio-4x3">
  <div>4x3</div>
</div>
<div class="ratio ratio-16x9">
  <div>16x9</div>
</div>
<div class="ratio ratio-21x9">
  <div>21x9</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Custom ratios

Each .ratio-* class includes a CSS custom property (or CSS variable) in the selector. You can override this CSS variable to create custom aspect ratios on the fly with some quick math on your part.

For example, to create a 2x1 aspect ratio, set --bs-aspect-ratio: 50% on the .ratio.

Alt Text

<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>
Enter fullscreen mode Exit fullscreen mode

This CSS variable makes it easy to modify the aspect ratio across breakpoints. The following is 4x3 to start, but changes to a custom 2x1 at the medium breakpoint.

.ratio-4x3 {
  @include media-breakpoint-up(md) {
    --bs-aspect-ratio: 50%; // 2x1
  }
}
Enter fullscreen mode Exit fullscreen mode

Alt Text

<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>
Enter fullscreen mode Exit fullscreen mode

Position

Use these helpers for quickly configuring the position of an element.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

<div class="sticky-top">...</div>
Responsive sticky top
Responsive variations also exist for .sticky-top utility.
<div class="sticky-sm-top">Stick to the top on viewports sized SM (small) or wider</div>
<div class="sticky-md-top">Stick to the top on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-top">Stick to the top on viewports sized LG (large) or wider</div>
<div class="sticky-xl-top">Stick to the top on viewports sized XL (extra-large) or wider</div>
Enter fullscreen mode Exit fullscreen mode

Top comments (0)