Display

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