FM / utilities

/usr/share/doc/libjs-bootstrap4/utilities/

/usr/share/doc/libjs-bootstrap4/utilities

Name	Size	Mode	Actions
borders.md	2463	0644	edit dl rm
clearfix.md	916	0644	edit dl rm
close-icon.md	365	0644	edit dl rm
colors.md	2741	0644	edit dl rm
display.md	3971	0644	edit dl rm
embed.md	1916	0644	edit dl rm
flex.md.gz	2852	0644	edit dl rm
float.md	1706	0644	edit dl rm
image-replacement.md	968	0644	edit dl rm
interactions.md	814	0644	edit dl rm
overflow.md	1006	0644	edit dl rm
position.md	1415	0644	edit dl rm
screen-readers.md	596	0644	edit dl rm
shadows.md	740	0644	edit dl rm
sizing.md	2179	0644	edit dl rm
spacing.md	4043	0644	edit dl rm
stretched-link.md.gz	1496	0644	edit dl rm
text.md.gz	1537	0644	edit dl rm
vertical-align.md	1279	0644	edit dl rm
visibility.md	914	0644	edit dl rm

Edit: /usr/share/doc/libjs-bootstrap4/utilities/position.md (1415B)

---
layout: docs
title: Position
description: Use these shorthand utilities for quickly configuring the position of an element.
group: utilities
toc: true
---

## Common values

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

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

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

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

```html
<div class="sticky-top">...</div>
```

--- layout: docs title: Position description: Use these shorthand utilities for quickly configuring the position of an element. group: utilities toc: true --- ## Common values Quick positioning classes are available, though they are not responsive. ```html

...

``` ## 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. ```html

...

``` ## 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. ```html

...

``` ## 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. ```html

...

```