Bullets bullets elements

  • Base
  • Resources
  • Documentation
Logo

Quick Links

25 pending tasks
Customers Orders & Payments
Account Profile & Settings
Company Contact & Pricing
Finance Credit & Payments
View All

Notifications 24 reports

Project Alice
Phase 1 development
1 hr
HR Confidential
Confidential staff documents
2 hrs
Company HR
Corporeate staff profiles
5 hrs
Project Jet
New frontend admin theme
2 days
Project Breafing
Product launch status update
21 Jan
Banner Assets
Collection of banner images
21 Jan
Icon Assets
Collection of SVG icons
20 March
View All

Get Pro Access

Outlines keep you honest. They stoping you from amazing poorly about drive
Join Now
200 OK New order
Just now
500 ERR New customer
2 hrs
200 OK Payment process
5 hrs
300 WRN Search query
2 days
200 OK API connection
1 week
200 OK Database restore
Mar 5
300 WRN System update
May 15
300 WRN Server OS update
Apr 3
300 WRN API rollback
Jun 30
500 ERR Refund process
Jul 10
500 ERR Withdrawal process
Sep 10
500 ERR Mail tasks
Dec 10
View All

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
    3 New Incoming Project Files:
    Sent at 10:30 PM by
    img
    Finance KPI App Guidelines
    1.9mb
    Client UAT Testing Results
    18kb
    Finance Reports
    20mb
    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
    img
    Explore
    img
    Explore
    img
    Explore
    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 Jet 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
    View All Activities
    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
    Email Templates
    Chat App
    Customers App
    Upgrade to Jet HTML Pro
    Download Jet HTML Free