Position - Bootstrap

Skip to main content There's a newer version of Bootstrap! Menu Getting started

• Introduction
• Download
• Contents
• Browsers & devices
• JavaScript
• Theming
• Build tools
• Webpack
• Accessibility

Layout

• Overview
• Grid
• Media object
• Utilities for layout

Content

• Reboot
• Typography
• Code
• Images
• Tables
• Figures

Components

• Alerts
• Badge
• Breadcrumb
• Buttons
• Button group
• Card
• Carousel
• Collapse
• Dropdowns
• Forms
• Input group
• Jumbotron
• List group
• Modal
• Navs
• Navbar
• Pagination
• Popovers
• Progress
• Scrollspy
• Tooltips

Utilities

• Borders
• Clearfix
• Close icon
• Colors
• Display
• Embed
• Flex
• Float
• Image replacement
• Position
• Screenreaders
• Sizing
• Spacing
• Text
• Vertical align
• Visibility

Extend

• Approach
• Icons

Migration About

• Overview
• Brand
• License
• Translations

• Common values
• Fixed top
• Fixed bottom
• Sticky top

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