Documentation v1.1.0

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
    Documentation
    From guides and how-tos, to live demos and code examples to get started right away.
    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.
    What's New
    Latest features and improvements added with our users feedback in mind.
    Buy now