Bullets

Overview

Bullet is a custom component used with combination with other components to display a pointer to an item in the list or navigation.

Basic

Use .bulletin a list or navigation items as a pointer:

Item 1

Item 2

Item 3

Item 4

Item 5

<div class="d-flex flex-column">
<li class="d-flex align-items-center py-2">
<span class="bullet me-5"></span> Item 1
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet me-5"></span> Item 2
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet me-5"></span> Item 3
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet me-5"></span> Item 4
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet me-5"></span> Item 5
</li>
</div>

Colors

Use .bg-{color}class to set a bullets background color:

white

primary

light

secondary

success

info

warning

danger

dark

<div class="d-flex flex-column">
<li class="d-flex align-items-center py-2">
<span class="bullet bg-white"></span> white
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-primary"></span> primary
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-light"></span> light
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-secondary"></span> secondary
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-success"></span> success
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-info"></span> info
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-warning"></span> warning
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-danger"></span> danger
</li>
<li class="d-flex align-items-center py-2">
<span class="bullet bg-dark"></span> dark
</li>
</div>