❮ Previous Next ❯

Display and Color Utilities

  • Control element display and color using Bootstrap utilities.

  • Introduction to Display & Color Utilities

    In real-world UI development, two very common requirements are:

    • Showing or hiding elements

    • Applying consistent colors to text and backgrounds

    In Bootstrap 5, display utilities control visibility and layout behavior, while color utilities control visual emphasis and meaning.

    Both utilities allow developers to make quick UI adjustments without writing custom CSS.

    Display Utilities

    What Are Display Utilities ?

    Display utilities control the CSS display property of an element.

    In plain CSS:

    display: block;

    display: none;

    display: inline;

    In Bootstrap, this is done using utility classes.

    Display utilities are used to:

    • Show or hide elements

    • Change layout behavior

    • Control inline vs block rendering

      Display Utility Syntax

      d-{value}

      Where {value} defines how the element is displayed.

      Common Display Values

      ClassCSS Effect
      d-nonedisplay: none
      d-blockdisplay: block
      d-inlinedisplay: inline
      d-inline-blockdisplay: inline-block
      d-flexdisplay: flex
      d-inline-flexdisplay: inline-flex

    Controlling Element Display with Utility Classes

    Display utilities like d-none, d-block, and d-inline control how elements appear on the page. 

    <!-- Hide an Element -->
<div class="d-none">
  Hidden content
</div>

<!-- Block Element -->
<span class="d-block">
  This span behaves like a block
</span>

<!-- Inline Element -->
<div class="d-inline">
  Inline content
</div>

    • Responsive Display Classes

      Why Responsive Display Is Needed

      Different screen sizes require different visibility rules.

      Examples:

      • Hide large banners on mobile

      • Show menus only on desktop

      • Display compact UI on small screens

      Bootstrap allows display utilities to be responsive, without media queries.

      Responsive Display Syntax

      d-{breakpoint}-{value}

      Breakpoints:

      • sm → ≥576px

      • md → ≥768px

      • lg → ≥992px

      • xl → ≥1200px

      • xxl → ≥1400px

    Responsive Display Utilities

    Use Bootstrap responsive display classes to show, hide, or change layout of elements based on screen size. 

    <!-- Hide on Mobile, Show on Desktop -->
<div class="d-none d-md-block">
  Visible on medium screens and above
</div>

<!-- Show on Mobile Only -->
<div class="d-block d-md-none">
  Mobile-only content
</div>

<!-- Responsive Flex Display -->
<div class="d-block d-lg-flex">
  Block on mobile, flex on desktop
</div>

    • Common Use Cases

      • Mobile menus

      • Conditional UI elements

      • Responsive banners

      • Adaptive layouts

      Color Utilities

      What Are Color Utilities ?

      Color utilities allow you to:

      • Apply predefined Bootstrap colors

      • Maintain consistent color usage

      • Communicate meaning visually

      Bootstrap colors are part of a design system, not random colors.

      Bootstrap Color Palette 

      Bootstrap provides contextual colors such as:

      • Primary

      • Secondary

      • Success

      • Danger

      • Warning

      • Info

      • Light

      • Dark

      Each color has semantic meaning, not just visual style.

      Text Color Utilities

      Text Color Syntax

      text-{color}

      Common Text Color Classes
      ClassMeaning
      text-primaryPrimary brand color
      text-successSuccess / positive
      text-dangerError / danger
      text-warningWarning
      text-infoInformational
      text-mutedLess emphasis
      text-darkDark text
      text-lightLight text

    Bootstrap Text Color Classes

    Use Bootstrap text color utility classes to quickly apply different colors to text for messages, highlights, or descriptions. 

    <p class="text-primary">Primary text</p>
<p class="text-success">Success message</p>
<p class="text-danger">Error message</p>
<p class="text-muted">Muted description</p>

    • Accessibility Note

      Do not rely only on color to convey meaning.

      Bad practice:

      • Red text only for errors

      Good practice:

      • Color + text message

        Background Color Utilities

        Background Color Syntax

        bg-{color}

        Common Background Classes

        ClassUse Case
        bg-primaryHighlight sections
        bg-successSuccess areas
        bg-dangerError emphasis
        bg-warningWarning blocks
        bg-infoInfo sections
        bg-lightLight containers
        bg-darkDark UI

      Bootstrap Background Colors & Text Contrast

      Use Bootstrap background and text utility classes to style sections with proper color contrast and combine them with responsive display utilities. 

      <!-- Background Color Examples -->
<div class="bg-primary text-white p-3">
  Primary background
</div>

<div class="bg-warning text-dark p-3">
  Warning background
</div>

<!-- Text Contrast Requirement -->
<!-- Correct contrast -->
<div class="bg-dark text-light">
  Correct contrast
</div>

<!-- Poor contrast -->
<div class="bg-dark text-dark">
  Poor contrast
</div>

<!-- Combining Display & Color Utilities -->
<div class="d-none d-md-block bg-light text-dark p-3">
  Desktop-only highlighted section
</div>

      • What happens:

        • Hidden on mobile

        • Visible on desktop

        • Styled with background and text colors

        • No custom CSS

        Common Mistakes

        • Hiding important content using d-none

        • Forgetting responsive display variants

        • Overusing bright colors everywhere

        • Poor text/background contrast

        • Using colors without semantic meaning

          Best Practices for Display & Color Utilities

          • Use display utilities intentionally

          • Always think mobile-first

          • Use colors for meaning, not decoration

          • Maintain sufficient contrast

          • Combine utilities logically

          • Avoid hiding critical content

        ❮ Previous Next ❯