Z-Index Utilities in Bootstrap

The z-index property in CSS controls the stacking order of positioned elements. Elements with a higher z-index value are positioned in front of those with a lower value. Bootstrap provides utility classes for managing z-index values, allowing you to control the layering of elements without writing custom CSS.

1. Basic Z-Index Utilities

Bootstrap includes a range of predefined z-index utility classes that you can use to adjust the stacking order of elements:

• z-index-0: Sets the z-index to 0.
• z-index-1: Sets the z-index to 100.
• z-index-2: Sets the z-index to 200.
• z-index-3: Sets the z-index to 300.
• z-index-4: Sets the z-index to 400.
• z-index-5: Sets the z-index to 500.

These classes use the z-index values of 0, 100, 200, 300, 400, and 500, respectively.

Example:

<div class="position-relative z-index-1 p-3 bg-primary text-white">
  I am behind elements with higher z-index.
</div>

<div class="position-relative z-index-3 p-3 bg-success text-white">
  I am in front of elements with lower z-index.
</div>

2. Using Z-Index Utilities

To use z-index utilities effectively, the element must be positioned (i.e., position: relative, position: absolute, position: fixed, or position: sticky). Without positioning, z-index does not have any effect.

Example:

<div class="position-relative z-index-2 p-3 bg-primary text-white">
  I am positioned relative with z-index-2.
</div>

<div class="position-relative z-index-4 p-3 bg-secondary text-white">
  I am positioned relative with z-index-4.
</div>

3. Responsive Z-Index Utilities

Bootstrap does not provide responsive z-index utilities as of the latest versions. Z-index values are applied consistently across all screen sizes, and you will need to manually adjust or override these values if needed using custom CSS.

4. Custom Z-Index Values

If you need z-index values outside the predefined set provided by Bootstrap, you can create custom classes in your CSS:

CSS:

.z-index-custom {
  z-index: 999; /* Custom z-index value */
}

HTML:

<div class="position-relative z-index-custom p-3 bg-info text-white">
  Custom z-index value
</div>

5. Practical Use Cases

• Modals: Ensure that modals appear on top of other content.
• Dropdowns: Manage dropdowns or popovers to ensure they appear above other elements.
• Sticky Headers: Ensure sticky headers or sidebars stay above other content.

Example:

<!-- Background content -->
<div class="position-relative z-index-0 p-3 bg-light">
  Background content
</div>

<!-- Modal with higher z-index -->
<div class="position-fixed z-index-5 top-0 start-0 p-3 bg-dark text-white">
  Modal or popup
</div>

Summary of Z-Index Utilities in Bootstrap

• Basic Z-Index Classes: Use predefined classes like z-index-0, z-index-1, z-index-2 to z-index-5 to control stacking order.
• Positioning Requirement: Ensure elements are positioned (relative, absolute, fixed, or sticky) for z-index to take effect.
• Custom Z-Index Values: Create custom classes for z-index values beyond the predefined set.
• Practical Use: Apply z-index utilities to ensure that elements like modals, dropdowns, or sticky headers are correctly layered above other content.