Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • How to Read This Documentation
    • Composition Philosophy
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Display

  • Display
    • Sm
    • Md
    • Lg
    • Xl
  • Hiding Elements

Display

The utility d-* sets the display property.

Utility Description Example
d-none none
This is none text.
d-inline inline
This is inline text.
d-inline-block inline-block
This is inline-block text.
d-block block
This is block text.
d-inline-flex inline-flex
This is inline-flex text.
d-flex flex
This is flex text.
d-grid grid
This is grid text.
d-table table
This is table text.
d-table-row table-row
This is table-row text.
d-table-cell table-cell
This is table-cell text.
Copied!
Code Sample (expand to see it)
<div class="d-none">This is none text.</div>
<div class="d-inline">This is inline text.</div>
<div class="d-inline">This is inline-block text.</div>
<div class="d-block">This is block text.</div>
<div class="d-inline-flex">This is inline-flex text.</div>
<div class="d-flex">This is flex text.</div>
<div class="d-grid">This is grid text.</div>
<div class="d-table">This is table text.</div>
<div class="d-table-row">This is table-row text.</div>
<div class="d-table-cell">This is table-cell text.</div>

Sm

The utility d-sm-* sets the display property for screen sizes 576px(sm) and up.

Utility Description Example
d-sm-none Hidden on min-width: 576px (sm)
This is visible between 0 and 576px.
d-none d-sm-inline Hidden between 0 and 575px and `inline` on min-width: 576px (sm)
This is inline text.
d-none d-sm-inline-block Hidden between 0 and 575px and `inline-block` on min-width: 576px (sm)
This is inline-block text.
d-none d-sm-block Hidden between 0 and 575px and `block` on min-width: 576px (sm)
This is block text.
d-none d-sm-inline-flex Hidden between 0 and 575px and `inline-flex` on min-width: 576px (sm)
This is inline-flex text.
d-none d-sm-flex Hidden between 0 and 575px and `flex` on min-width: 576px (sm)
This is flex text.
d-none d-sm-grid Hidden between 0 and 575px and `grid` on min-width: 576px (sm)
This is grid text.
d-none d-sm-table Hidden between 0 and 575px and `table` on min-width: 576px (sm)
This is table text.
d-none d-sm-table-row Hidden between 0 and 575px and `table-row` on min-width: 576px (sm)
This is table-row text.
d-none d-sm-table-cell Hidden between 0 and 575px and `table-cell` on min-width: 576px (sm)
This is table-cell text.
Copied!
Code Sample (expand to see it)
<div class="d-sm-none">This is none text.</div>
<div class="d-none d-sm-inline">This is inline text.</div>
<div class="d-none d-sm-inline">This is inline-block text.</div>
<div class="d-none d-sm-block">This is block text.</div>
<div class="d-none d-sm-inline-flex">This is inline-flex text.</div>
<div class="d-none d-sm-flex">This is flex text.</div>
<div class="d-none d-sm-grid">This is grid text.</div>
<div class="d-none d-sm-table">This is table text.</div>
<div class="d-none d-sm-table-row">This is table-row text.</div>
<div class="d-none d-sm-table-cell">This is table-cell text.</div>

Md

The utility d-md-* sets the display property for screen sizes 768px(md) and up.

Utility Description Example
d-md-none Hidden on min-width 768px (md)
This is should be hidden on min-width 768px.
d-none d-md-inline Hidden between 0 and 767px and `inline` on min-width: 768px (md)
This is inline text.
d-none d-md-inline-block Hidden between 0 and 767px and `inline-block` on min-width: 768px (md)
This is inline-block text.
d-none d-md-block Hidden between 0 and 767px and `block` on min-width: 768px (md)
This is block text.
d-none d-md-inline-flex Hidden between 0 and 767px and `inline-flex` on min-width: 768px (md)
This is inline-flex text.
d-none d-md-flex Hidden between 0 and 767px and `flex` on min-width: 768px (md)
This is flex text.
d-none d-md-grid Hidden between 0 and 767px and `grid` on min-width: 768px (md)
This is grid text.
d-none d-md-table Hidden between 0 and 767px and `table` on min-width: 768px (md)
This is table text.
d-none d-md-table-row Hidden between 0 and 767px and `table-row` on min-width: 768px (md)
This is table-row text.
d-none d-md-table-cell Hidden between 0 and 767px and `table-cell` on min-width: 768px (md)
This is table-cell text.
Copied!
Code Sample (expand to see it)
<div class="d-md-none">This is should be hidden on min-width 768px.</div>
<div class="d-none d-md-inline">This is inline text.</div>
<div class="d-none d-md-inline">This is inline-block text.</div>
<div class="d-none d-md-block">This is block text.</div>
<div class="d-none d-md-inline-flex">This is inline-flex text.</div>
<div class="d-none d-md-flex">This is flex text.</div>
<div class="d-none d-md-grid">This is grid text.</div>
<div class="d-none d-md-table">This is table text.</div>
<div class="d-none d-md-table-row">This is table-row text.</div>
<div class="d-none d-md-table-cell">This is table-cell text.</div>

Lg

The utility d-lg-* sets the display property for screen sizes 992px(lg) and up.

Utility Description Example
d-lg-none Hidden on min-width: 992px (lg)
This is none text.
d-none d-lg-inline Hidden between 0 and 991px and `inline` on min-width: 992px (lg)
This is inline text.
d-none d-lg-inline-block Hidden between 0 and 991px and `inline-block` on min-width: 992px (lg)
This is inline-block text.
d-none d-lg-block Hidden between 0 and 991px and `block` on min-width: 992px (lg)
This is block text.
d-none d-lg-inline-flex Hidden between 0 and 991px and `inline-flex` on min-width: 992px (lg)
This is inline-flex text.
d-none d-lg-flex Hidden between 0 and 991px and `flex` on min-width: 992px (lg)
This is flex text.
d-none d-lg-grid Hidden between 0 and 991px and `grid` on min-width: 992px (lg)
This is grid text.
d-none d-lg-table Hidden between 0 and 991px and `table` on min-width: 992px (lg)
This is table text.
d-none d-lg-table-row Hidden between 0 and 991px and `table-row` on min-width: 992px (lg)
This is table-row text.
d-none d-lg-table-cell Hidden between 0 and 991px and `table-cell` on min-width: 992px (lg)
This is table-cell text.
Copied!
Code Sample (expand to see it)
<div class="d-lg-none">This is none text.</div>
<div class="d-none d-lg-inline">This is inline text.</div>
<div class="d-none d-lg-inline">This is inline-block text.</div>
<div class="d-none d-lg-block">This is block text.</div>
<div class="d-none d-lg-inline-flex">This is inline-flex text.</div>
<div class="d-none d-lg-flex">This is flex text.</div>
<div class="d-none d-lg-grid">This is grid text.</div>
<div class="d-none d-lg-table">This is table text.</div>
<div class="d-none d-lg-table-row">This is table-row text.</div>
<div class="d-none d-lg-table-cell">This is table-cell text.</div>

Xl

The utility d-xl-* sets the display property for screen sizes 1280px(xl) and up.

Utility Description Example
d-xl-none Hidden on min-width: 1280px (xl)
This is none text.
d-none d-xl-inline Hidden between 0 and 1279px and `inline` on min-width: 1280px (xl)
This is inline text.
d-none d-xl-inline-block Hidden between 0 and 1279px and `inline-block` on min-width: 1280px (xl)
This is inline-block text.
d-none d-xl-block Hidden between 0 and 1279px and `block` on min-width: 1280px (xl)
This is block text.
d-none d-xl-inline-flex Hidden between 0 and 1279px and `inline-flex` on min-width: 1280px (xl)
This is inline-flex text.
d-none d-xl-flex Hidden between 0 and 1279px and `flex` on min-width: 1280px (xl)
This is flex text.
d-none d-xl-grid Hidden between 0 and 1279px and `grid` on min-width: 1280px (xl)
This is grid text.
d-none d-xl-table Hidden between 0 and 1279px and `table` on min-width: 1280px (xl)
This is table text.
d-none d-xl-table-row Hidden between 0 and 1279px and `table-row` on min-width: 1280px (xl)
This is table-row text.
d-none d-xl-table-cell Hidden between 0 and 1279px and `table-cell` on min-width: 1280px (xl)
This is table-cell text.
Copied!
Code Sample (expand to see it)
<div class="d-xl-none">This is none text.</div>
<div class="d-none d-xl-inline">This is inline text.</div>
<div class="d-none d-xl-inline">This is inline-block text.</div>
<div class="d-none d-xl-block">This is block text.</div>
<div class="d-none d-xl-inline-flex">This is inline-flex text.</div>
<div class="d-none d-xl-flex">This is flex text.</div>
<div class="d-none d-xl-grid">This is grid text.</div>
<div class="d-none d-xl-table">This is table text.</div>
<div class="d-none d-xl-table-row">This is table-row text.</div>
<div class="d-none d-xl-table-cell">This is table-cell text.</div>

Hiding Elements

Hide elements for specific screen size ranges by combining d-{breakpoint}-none with d-{breakpoint}-* utilities.

Utility Screen Size Description Example
d-none - Hidden everywhere
d-none d-sm-inline-flex 0px - 575px Hidden only on xs
d-sm-none d-md-inline-flex 576px - 767px Hidden only on sm
d-md-none d-lg-inline-flex 768px - 991px Hidden only on md
d-lg-none d-xl-inline-flex 992px - 1279px Hidden only on lg
d-xl-none 1280px+ Hidden only on xl
d-inline-flex d-sm-none 0px - 575px Visible only on xs
d-none d-sm-inline-flex d-md-none 575px - 767px Visible only on sm
d-none d-md-inline-flex d-lg-none 768px - 991px Visible only on md
d-none d-lg-inline-flex d-xl-none 992px - 1279px Visible only on lg
d-none d-xl-inline-flex 1280px Visible only on xl

How can this be improved? Create an issue!