keyboard_double_arrow_left
help Help & getting started
  1. Home
  2. Background Action

Background Action.

The .bg-action-* classes provide a simple and effective way to apply background hover effects in Bootstrap-based projects. These classes allow elements to change background color when hovered, enhancing user interaction and accessibility.

Overview

You can use the .bg-action-* classes to background hover color.

Background primary in hover
Background secondary in hover
Background success in hover
Background info in hover
Background warning in hover
Background danger in hover
Background light in hover
Background dark in hover 

<div class="bg-action-primary rounded p-3 text-center border border-light text-dark">
	Background primary in hover
</div>
<div class="bg-action-secondary rounded p-3 text-center border border-light text-dark">
	Background secondary in hover
</div>
<div class="bg-action-success rounded p-3 text-center border border-light text-dark">
	Background success in hover
</div>
<div class="bg-action-info rounded p-3 text-center border border-light text-dark">
	Background info in hover
</div>
<div class="bg-action-warning rounded p-3 text-center border border-light text-dark">
	Background warning in hover
</div>
<div class="bg-action-danger rounded p-3 text-center border border-light text-dark">
	Background danger in hover
</div>
<div class="bg-action-light rounded p-3 text-center border border-light text-dark">
	Background light in hover
</div>
<div class="bg-action-dark rounded p-3 text-center border border-light text-dark">
	Background dark in hover
</div>