Home /
UI Kit /
bullets list /

bullets list

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 .bullet in a list or navigation items as a pointer:

Item 1
Item 2
Item 3
Item 4
Item 5

html

<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:

light
primary
secondary
success
info
warning
danger
dark

html

<div class="d-flex flex-column">
  <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-primary"></span> primary
  </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>

Dot Style

Use .bullet-dot to apply a dot style bullet:

Item 1
Item 2
Item 3
Item 4
Item 5

html

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

Vertical Style

Use .bullet-vertical to apply vertical style bullet:

Item 1
Item 2
Item 3
Item 4
Item 5

html

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

Line Style

Use .bullet-line to apply a line style bullet:

Item 1
Item 2
Item 3
Item 4
Item 5

html

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

Sizes

Use Custom Size Classes for bullets to set custom width and height:

.h-15px .w-25px

.h-20px .w-30px

.h-30px .w-50px

.h-15px .w-15px

.h-20px .w-20px

.h-30px .w-30px

.h-25px .w-15px

.h-30px .w-20px

.h-50px .w-30px

html

<span class="bullet bg-primary h-15px w-25px"></span>

<span class="bullet bullet-dot bg-primary h-15px w-15px"></span>

<span class="bullet bullet-vertical bg-primary h-25px w-15px"></span>