Documentation v1.1.1

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

    Dot Style

    Use .bullet-dotto 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-verticalto 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-lineto 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 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-vertical bg-primary h-25px w-15px me-5"></span> .h-25px .w-15px  
    </div>
    
    Learn & Get Inspired

    Support at devs.keenthemes.com

    Join our developers community to find answer to your question and help others. FAQs
    Get Support
    What's New ?
    Latest features and improvements added with our users feedback in mind.
    Buy now