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 glyphicon glyphicon-paperclip"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-primary glyphicon glyphicon-hourglass"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-info glyphicon glyphicon-eye-open"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-success glyphicon glyphicon-ok"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-warning glyphicon glyphicon-pushpin"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-error glyphicon glyphicon-remove"></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 fa fa-bolt"></i>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  </li>
  <li>
    <i class="milestone-primary fa 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