Bootstrap Milestones bootstrap-milestones.css

• Colors and icons

• Lorem ipsum dolor sit amet, consectetur adipiscing elit...
• Lorem ipsum dolor sit amet, consectetur adipiscing elit...
• Lorem ipsum dolor sit amet, consectetur adipiscing elit...
• Lorem ipsum dolor sit amet, consectetur adipiscing elit...
• Lorem ipsum dolor sit amet, consectetur adipiscing elit...
• Lorem ipsum dolor sit amet, consectetur adipiscing elit...

• It works with Font-Awesome too

• Lorem ipsum dolor sit amet, consectetur adipiscing elit...
• Lorem ipsum dolor sit amet, consectetur adipiscing elit...

<ul class="milestones">
  <li>
    <h3>Colors and icons</h3>
  </li>
  <li>
    <i class=" milestone-default fas fa-paperclip"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-primary fas fa-hourglass"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-info fas fa-eye"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-success fas fa-check"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-warning fas fa-thumbtack"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-error fas fa-times"></i>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <h5>It works with Font-Awesome too</h5>
  </li>
  <li>
    <i class="milestone-warning fas fa-bolt"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-primary fab fa-paypal"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
</ul>
          

• Misc. items

• A title

  Lorem ipsum dolor sit amet, consectetur adipiscing elit...

• A panel

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed consectetur elit, eu laoreet diam.

  A panel

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed consectetur elit, eu laoreet diam.
• List groups
  
  
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Nulla sed consectetur elit
  • Eu laoreet diam
  • Maecenas nec magna turpis
  • Pellentesque habitant morbi tristique senectus
• A well
  
  
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed consectetur elit, eu laoreet diam. Maecenas nec magna turpis.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed consectetur elit, eu laoreet diam. Maecenas nec magna turpis.
• Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed consectetur elit, eu laoreet diam. Maecenas nec magna turpis.

• .milestones > li:last-child {
    border-bottom: none;
  }

  .milestones > li > {
    .list-group:last-child, .panel:last-child, .well:last-child {
      margin-bottom: @milestone-offset-smaller;
    }
  }

• Firstname	City	Pet
  Akira	New-York City, NY	Cat
  Cerise	Sacramento, CA	Husky

  Firstname	City	Pet
  Jon	Whitetree	Direwolf
  Stannis	Dragonstone	N/A

• Foo bar baz
  Foo bar baz
• 40% Complete (success)
  20% Complete