Menu
  1. Home 1
  2. Home 2
  3. Home 3
  4. Home 4
  5. Home 5
  6. Home 6
  7. World

    World news

    • All
    • Health
    • Tech
    • Travel
    • World
    More
      Previous Next

      No content

      A problem occurred while loading content.

    1. Life Style

      Life Style

      • All
      • Arts
      • Health
      • Music
      • Travel
      More
        Previous Next

        No content

        A problem occurred while loading content.

      1. Fashion

        Fashion

        • All
        • Fashion
        More
          Previous Next

          No content

          A problem occurred while loading content.

        1. Sport
          Previous Next

          No content

          A problem occurred while loading content.

        2. Events/Calendar
        3. Features
        Search User Login Menu
        Tools
        Close

        Display property

        Quickly and responsively toggle the display value of components and more with our display utilities. Includes support for some of the more common values, as well as some extras for controlling display when printing.

        Common display values

        • .d-none
        • .d-inline
        • .d-inline-block
        • .d-block
        • .d-table
        • .d-table-cell
        • .d-flex
        • .d-inline-flex
        d-inline
        d-inline
        <div class="d-inline bg-success">d-inline</div>
        <div class="d-inline bg-success">d-inline</div>
        d-block
        <span class="d-block bg-primary">d-block</span>
        d-inline-block
        d-inline-block
        <div class="d-inline-block bg-warning">d-inline-block</div>
        <div class="d-inline-block bg-warning">d-inline-block</div>

        Responsive variations also exist for every single utility mentioned above.

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

        Hiding Elements

        For faster mobile-friendly development, use responsive display classes for showing and hiding elements by device. Avoid creating entirely different versions of the same site, instead hide element responsively for each screen size.

        To hide elements simply use the .d-none class or one of the .d-{sm,md,lg,xl}-none classes for any responsive screen variation.

        To show an element only on a given interval of screen sizes you can combine one .d-*-none class with a .d-*-* class, for example .d-none.d-md-block.d-xl-none will hide the element for all screen sizes except on medium and large devices.

        Screen Size Class
        Hidden on all d-none
        Hidden only on xs d-none d-sm-block
        Hidden only on sm d-sm-none d-md-block
        Hidden only on md d-md-none d-lg-block
        Hidden only on lg d-lg-none d-xl-block
        Hidden only on xl d-xl-none
        Visible on all d-block
        Visible only on xs d-block d-sm-none
        Visible only on sm d-none d-sm-block d-md-none
        Visible only on md d-none d-md-block d-lg-none
        Visible only on lg d-none d-lg-block d-xl-none
        Visible only on xl d-none d-xl-block

        Display in print

        Change the display value of elements when printing with our print display utilities.

        Class Print style
        .d-print-block Applies display: block to the element when printing
        .d-print-inline Applies display: inline to the element when printing
        .d-print-inline-block Applies display: inline-block to the element when printing
        .d-print-none Applies display: none to the element when printing
        Back To Top