Display

The display helpers allow you to control the display of content. This includes being conditionally visible based upon the current viewport, or the actual element display type.

Helper Classes

Specify the elements display property. These classes can be applied to all breakpoints from xs to xl. When using a base class, .d-{value}, the responsive classes are .d-{breakpoint}-{value}.

  • .d-none
  • .d-inline
  • .d-inline-block
  • .d-block
  • .d-flex
  • .d-inline-flex
  • .d-sm-none
  • .d-sm-inline
  • .d-sm-inline-block
  • .d-sm-block
  • .d-sm-flex
  • .d-sm-inline-flex
  • .d-md-none
  • .d-md-inline
  • .d-md-inline-block
  • .d-md-block
  • .d-md-flex
  • .d-md-inline-flex
  • .d-lg-none
  • .d-lg-inline
  • .d-lg-inline-block
  • .d-lg-block
  • .d-lg-flex
  • .d-lg-inline-flex
  • .d-xl-none
  • .d-xl-inline
  • .d-xl-inline-block
  • .d-xl-block
  • .d-xl-flex
  • .d-xl-inline-flex

Js Breakpoints

If you want to check the screen size in javascript then Svelte Materialify has got you covered. Check more about window.matchMedia

<script>
  import { onMount } from 'svelte';
  onMount(async () => {
    let breakpoints = await import('svelte-materialify/src/utils/breakpoints');
    breakpoints = breakpoints.default;

    // check if screen size is less than or equal to medium
    let mediumAndDown = window.matchMedia(breakpoints['md-and-down']).matches;
  });
</script>

Available properties:

  • xs-only
  • sm-only
  • sm-and-down
  • sm-and-up
  • md-only
  • md-and-down
  • md-and-up
  • lg-only
  • lg-and-down
  • lg-and-up
  • xl-only


Last Updated: 2021-09-02