Documentation v8.0.9

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

    Activity Logs

    There are 2 new tasks for you in “AirPlus Mobile APp” project:
    Added at 4:23 PM by
    img
    Meeting with customer
    Application Design
    img
    img
    A
    In Progress
    View
    Project Delivery Preparation
    CRM System Development
    img
    B
    Completed
    View
    Invitation for crafting engaging designs that speak human workshop
    Sent at 4:23 PM by
    img
    Task #45890merged with #45890in “Ads Pro Admin Dashboard project:
    Initiated at 4:23 PM by
    img
    3 new application design concepts added:
    Created at 4:23 PM by
    img
    New case #67890is assigned to you in Multi-platform Database Design project
    Added at 4:23 PM by
    Alice Tan
    You have received a new order:
    Placed at 5:05 AM by
    img

    Database Backup Process Completed!

    Login into Metronic Admin Dashboard to make sure the data integrity is OK
    Proceed
    New order #67890is placed for Workshow Planning & Budget Estimation
    Placed at 4:23 PM by
    Jimmy Bold
    Pic
    Brian Cox 2 mins
    How likely are you to recommend our company to your friends and family ?
    5 mins You
    Pic
    Hey there, we’re just writing to let you know that you’ve been subscribed to a repository on GitHub.
    Pic
    Brian Cox 1 Hour
    Ok, Understood!
    2 Hours You
    Pic
    You’ll receive notifications for all issues, pull requests!
    Pic
    Brian Cox 3 Hours
    You can unwatch this repository immediately by clicking here: Keenthemes.com
    4 Hours You
    Pic
    Most purchased Business courses during this sale!
    Pic
    Brian Cox 5 Hours
    Company BBQ to celebrate the last quater achievements and goals. Food and drinks provided
    Just now You
    Pic
    Pic
    Brian Cox Just now
    Right before vacation season we have the next Big Deal for you.

    Explore Metronic

    Demo1

    Demo2

    demo
    Coming soon

    Demo3

    demo
    Coming soon

    Demo4

    demo
    Coming soon

    Demo5

    Demo6

    demo
    Coming soon

    Demo7

    demo
    Coming soon

    Demo8

    demo
    Coming soon

    Demo9

    demo
    Coming soon

    Demo10

    demo
    Coming soon

    Demo11

    demo
    Coming soon

    Demo12

    demo
    Coming soon

    Demo13

    demo
    Coming soon

    Demo14

    demo
    Coming soon

    Demo15

    demo
    Coming soon