-1

I read Bootstrap 4 documentation but I can't figure out how to use Display Property. With Bootstrap 3 I found it easier and more intuitive.

i have a sidebar with two elements: widget-game and last-game. both elements must be hidden in SM and XS. in the site footer instead I have another reworked widget-game for mobile and it must only be visible in SM and XS and hidden in MD and LG

i tried with: d-xs-none d-sm-none d-md-block to hide elements in the sidebar, in sm disappears but in xs reappears. for the widget that needs to appear only in mobile I used d-none d-sm-block d-md-none d-block d-sm-none and it seems to work though it seems weird to me to have to use all those classes.

how can I hide elements in sm and xs? i already read the reply in, and i dont have any d-flex

LegoLiam
  • 97
  • 3
  • 11

1 Answers1

0

In documentation that you "read" ;)

Display utility classes that apply to all breakpoints, from xs to xl, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0; and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.

As such, the classes are named using the format:

.d-{value} for xs

.d-{breakpoint}-{value} for sm, md, lg, and xl.

There is no "xs". Since xs is the smallest, then you supposed to use simply d-none (without anything in the middle).

class="d-none d-sm-none d-md-block"

But also since you want to hide sm as well, then there is no point making d-none d-sm-none , just make:

class="d-none d-md-block"

It means hidden by default, and visible (display: block) on md and higher.

Of course you use d-x-block if your element really needs to be block. There can by also d-md-flex, d-md-inline-block etc.

Community
  • 1
  • 1
chojnicki
  • 3,148
  • 1
  • 18
  • 32