Day 8 Bootstrap 5 helper
Tags: bootstrap, tutorial
Published: 2022-11-05 03:34:42


**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>
```

**The mixin source code:**
```
@mixin clearfix() {
  &::after {
    display: block;
    clear: both;
    content: "";
  }
}
```

**Use the mixin in SCSS:**
```
.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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1apiqziy0zwf53ob1pa5.png)
```
<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>
```

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cq2jllnpcylnrd6ctjfi.png)
```
<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>
```

**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>
```

**Aspect ratios**

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nxgtxzxd31adfdktq4fh.png)
```
<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>
```

**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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8dqitkdguqgtow9uaay.png)
```
<div class="ratio" style="--bs-aspect-ratio: 50%;">
  <div>2x1</div>
</div>
```

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
  }
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8s0bde3hiovuabv15n5.png)
```
<div class="ratio ratio-4x3">
  <div>4x3, then 2x1</div>
</div>
```

**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>
```

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

```
<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>
```