Adjust the display of an element with
As of Primer v10.10.0,
primer-base includes a rule that sets
display: none !important for any element with the
hidden attribute. You can safely use the
hidden attribute with display utilities, but we suggest:
d-none and/or its responsive variants (
d-lg-none) to conditionally show content at different screen sizes.
Rather than toggling the
hidden property on an element. This means that you won't have to restore any more specific display utility (
d-flex, for instance) just to work around the order in which they're listed in the stylesheet.
// Good:element.hidden = !visible// Bad:element.classList.toggle('d-none', !visible)element.classList.toggle('d-inline', visible)
There are known issues with using
display:table and wrapping long strings, particularly in Firefox. You may need to use
table-fixed on elements with
d-table and apply column widths to table cells, which you can do with our column width styles.
A selection of display utilities are able to be applied or changed per breakpoint.
.d-inline-block are available as responsive utilities using the following formula:
d-[breakpoint]-[property]. For example:
d-md-inline-block. Each responsive display utility is applied to the specified breakpoint and up.
In the following example, the
ul element switches from
display: block on mobile to
display: inline-block at the
md breakpoint, while the list items remain inline.
Hide utilities are able to be applied or changed per breakpoint using the following formula:
hide-[breakpoint], for example:
hide-sm. Hide utilities act differently from other responsive styles and are applied to each breakpoint-range only.
|1012px and above
.direction-rtl can be used to change the text direction. This is especially helpful when paired with
.v-align-middle to create equal height, vertically centered, alternating content.
Adjust the visibility of an element with
Adjust element overflow with
.overflow-auto, or use
.overflow-visible to undo the effects of CSS with overflow issues.
.overflow-hidden can also be used to create a new block formatting context or clear floats.
Overflow utilities can also target x- and y-axes independently via:
Overflow utilities can be applied or changed per breakpoint. Each responsive overflow utility is applied to the specified breakpoint and up, using the following formula:
overflow-[breakpoint]-[axis]-[property]. For example:
Using floats are discouraged since flexbox offers more features and doesn't need to be cleared. If you still need it, you can use
.float-right to set floats, and
.clearfix to clear.
Float utilities can be applied or changed per breakpoint. This can be useful for responsive layouts when you want an element to be full width on mobile but floated at a larger breakpoint.
Each responsive float utility is applied to the specified breakpoint and up, using the following formula:
float-[breakpoint]-[property]. For example:
float-md-left. Remember to use
.clearfix to clear.
Adjust the alignment of an element with
.v-align-bottom. The vertical-align property only applies to inline or table-cell boxes.
v-align-text-bottom to adjust the alignment of an element with the top or bottom of the parent element's font.
.width-fit to set max-width 100%.
.width-full to set width to 100%.
.width-auto to reset width to
auto (initial value). Typically used with responsive variants. Resize the window to see the effect in the example below.
.height-fit to set max-height 100%.
.height-full to set height to 100%.
Position utilities can be used to alter the default document flow. Be careful when using positioning, it's often unnecessary and commonly misused.
The position of an element depends on the content. Use
left-0 to further specify an elements final position.
Using the responsive variants (e.g.
.right-md-0) can be helpful for positioning select menus, dropdowns, popovers etc. when the content gets shuffled around for certain responsive breakpoints. You can also use
auto to "reset" a final position for wider breakpoints (e.g.
.position-relative to create a new stacking context.
Note how the other elements are displayed as if "Two" were in its normal position and taking up space.
.position-absolute to take elements out of the normal document flow.
.position-fixed to position an element relative to the viewport. Be careful when using fixed positioning. It is tricky to use and can lead to unwanted side effects.
Note: This example is shown in an
<iframe> and therefore will not be positioned to the viewport of this page.
To fill an entire width or height, use opposing directions.
Note: fixed positioning has been disabled here for demonstration only.
.position-sticky to keep an element stuck to an edge as long as its parent is visible. Things to keep in mind:
.position-sticky class by itself doesn't have any effect. An additional
[top|bottom|left|right]-0 class is needed. See the examples below.
style="z-index: 1;" (or higher) in case there are other elements with
.top-0 to keep an element stuck to the top.
.bottom-0 to keep an element stuck to the bottom. Can be used as a footer or toolbar.
.right-0 to keep elements stuck to the left or right when scrolling horizontally.
Position utilities can be applied or changed per breakpoint in responsive layouts. Each responsive position utility is applied to the specified breakpoint and up, using the following formula:
position-[breakpoint]-[property]. For example:
.sr-only to position an element outside of the viewport for screen reader access only. Even though the element can't be seen, make sure it still has a sensible tab order.
.show-on-focus to visually hide an element and only show it when focused. This utility can be used to provide additional functionality for keyboard users.
Create a media object with utilities.
Create a double-sided media object for a container with a flexible center.
You can also create a media object with flexbox utilities instead of floats which can be useful for changing the vertical alignment.