mirrors/bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-20 20:00:36 +03:00
Code Activity

Add sticky bottom utility (#35518)

Browse Source 
Co-authored-by: XhmikosR <xhmikosr@gmail.com>
This commit is contained in:
Florian Lacreuse
2021-12-16 09:27:00 +01:00
committed by GitHub
parent 2d07383e32
commit d17801265e
5 changed files with 42 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/content/docs/5.1/helpers/position.md
+20 -1
View File
@@ -24,7 +24,7 @@ Position an element at the bottom of the viewport, from edge to edge. Be sure yo
## 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.
Position an element at the top of the viewport, from edge to edge, but only after you scroll past it.
```html
<div class="sticky-top">...</div>
@@ -40,3 +40,22 @@ Responsive variations also exist for `.sticky-top` utility.
<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>
```
## Sticky bottom
Position an element at the bottom of the viewport, from edge to edge, but only after you scroll past it.
```html
<div class="sticky-bottom">...</div>
```
## Responsive sticky bottom
Responsive variations also exist for `.sticky-bottom` utility.
```html
<div class="sticky-sm-bottom">Stick to the bottom on viewports sized SM (small) or wider</div>
<div class="sticky-md-bottom">Stick to the bottom on viewports sized MD (medium) or wider</div>
<div class="sticky-lg-bottom">Stick to the bottom on viewports sized LG (large) or wider</div>
<div class="sticky-xl-bottom">Stick to the bottom on viewports sized XL (extra-large) or wider</div>
```