Display

The display property is one of the more useful in CSS and Bootstrap has a full complement of options including responsive options.

Display

• d-{VAL}

none inline inline-block block

grid table table-cell table-row flex inline-flex

Try it

The display class starts with a d, then you specify some additional parameters to control the display depending on the properties of your browser.

The breakpoints let you modify the properties depending on the width of the container. You can specify how the element will display when printing by using a print keyword here as well.

The values are typical CSS values for the display property which are very rich.

Viewport Breakpoints

• d{-BR}-{VAL}

none sm md lg xl xxl

Try it

Let's take a look at how the breakpoints work a little better because they can really help you design things better.

Visibility

visible invisible

Try it

There's also a couple of classes that help you show or hide an element. visible is the reset, so it's used to unset invisible, otherwise you don't really use it.

Invisible is different than display-none in that they don't modify the display values and do not affect the layout, so they still take up space. They will also be hidden from assistive technologies.

Contextual Printing

• d-print-{VAL}

none inline inline-block block

grid table table-cell table-row flex inline-flex

Try it

There is a set of special print classes that you can use to show or hide content when you print the document.

You can use these with the viewport classes to control how an element will print as well, so you can specify that although something looks like an inline element, it will be printed as a block element.