Documentation v1.0.6

Preview Upgrade to Pro

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>
    Upgrade To Pro
    Pro Version Benefits Free Pro
    UI Elements 20 100
    In-house Components 20 40
    Crafted Pages 5 20
    Complete Documentation
    Product Support
    Layout Builder
    Source Vectors
    Email Templates
    Calendar App
    User Management App
    Chat App
    Customers App
    Upgrade to Jet HTML Free
    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