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