# Documentation v8.0.38

Preview Downloads Purchase

# 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

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

# Dot Style

Use `.bullet-dot`to apply a dot style bullet:
- 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 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

    <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

    <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

    <div class="d-flex align-items-center me-15">
        <span class="bullet bg-primary h-15px w-25px me-5"></span> .h-15px .w-25px
    </div>
    <div class="d-flex align-items-center me-15">
        <span class="bullet bg-primary h-20px w-30px me-5"></span> .h-20px .w-30px
    </div>
    <div class="d-flex align-items-center">
        <span class="bullet bg-primary h-30px w-50px me-5"></span> .h-30px .w-50px
    </div>

    <div class="d-flex align-items-center me-15">
        <span class="bullet bullet-dot bg-primary h-15px w-15px me-5"></span> .h-15px .w-15px
    </div>
    <div class="d-flex align-items-center me-15">
        <span class="bullet bullet-dot bg-primary h-20px w-20px me-5"></span> .h-20px .w-20px
    </div>
    <div class="d-flex align-items-center">
        <span class="bullet bullet-dot bg-primary h-30px w-30px me-5"></span> .h-30px .w-30px
    </div>

    <div class="d-flex align-items-center me-15">
        <span class="bullet bullet-vertical bg-primary h-25px w-15px me-5"></span> .h-25px .w-15px
    </div>
    <div class="d-flex align-items-center me-15">
        <span class="bullet bullet-vertical bg-primary h-30px w-20px me-5"></span> .h-30px .w-20px
    </div>
    <div class="d-flex align-items-center">
        <span class="bullet bullet-vertical bg-primary h-50px w-30px me-5"></span> .h-50px .w-30px
    </div>

### Explore

### Metronic Licenses

License FAQs
Regular License
For single end product used by you or one client
$ 39
Extended License
For single SaaS app with paying users
$ 969
Custom License
Reach us for custom license offers.
Contact Us
Buy Now

### Metronic Demos

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9
Demo 10
Demo 11
Demo 12
Demo 13
Demo 14
Demo 15
Demo 16
Demo 17
Demo 18
Demo 19
Demo 20
Demo 21
Demo 22
Coming soon
Coming soon

##### Learn & Get Inspired

## Support at devs.keenthemes.com

Join our developers community to find answer to your question and help others. FAQs
Get Support
Documentation & Videos
From guides and video tutorials, to live demos and code examples to get started.
Plugins & Components
Check out our 300+ in-house components and customized 3rd-party plugins.
Layout Builder
Build your layout, preview it and export the HTML for server side integration.
Metronic Downloads
Download your prefered framework and demo with one click.
What's New
Latest features and improvements added with our users feedback in mind.
Buy now