Github-style Milestone List With Bootstrap – bootstrap-milestones.css

Preview:

Description:

The bootstrap-milestones.css lets you create a responsive milestone list for identifying project milestones using Bootstrap styles.

Similar to the GitHub’s Pull Request history. Built using pure CSS (LESS).

How to use it:

Download and import both Bootstrap stylesheet and bootstrap-milestones.css into the document.

<link rel="stylesheet" href="/path/to/bootstrap.min.css">
<link rel="stylesheet" href="/path/to/bootstrap-milestones.min.css">

The basic HTML structure for the milestone list.

<ul class="milestones">
  <li>
    <i class="milestone-success glyphicon glyphicon-ok"></i>
    Milestone 1
  </li>
  <li>
    <i class="milestone-error glyphicon glyphicon-remove"></i>
    Milestone 2
  </li>
</ul>

Add borders to the milestones.

<ul class="milestones milestones-bordered-bottom">
  <li>
    <i class="milestone-success glyphicon glyphicon-ok"></i>
    Milestone 1
  </li>
  <li>
    <i class="milestone-error glyphicon glyphicon-remove"></i>
    Milestone 2
  </li>
</ul>

<ul class="milestones milestones-bordered-top">
  <li>
    <i class="milestone-success glyphicon glyphicon-ok"></i>
    Milestone 1
  </li>
  <li>
    <i class="milestone-error glyphicon glyphicon-remove"></i>
    Milestone 2
  </li>
</ul>

<ul class="milestones milestones-bordered">
  <li>
    <i class="milestone-success glyphicon glyphicon-ok"></i>
    Milestone 1
  </li>
  <li>
    <i class="milestone-error glyphicon glyphicon-remove"></i>
    Milestone 2
  </li>
</ul>

Use your own iconic font such as Font Awesome:

<ul class="milestones">
  <li>
    <i class="milestone-success fa fa-ok"></i>
    Milestone 1
  </li>
  <li>
    <i class="milestone-error fa fa-remove"></i>
    Milestone 2
  </li>
</ul>

Default variables.

@milestone-offset-smaller: 5px;
@milestone-offset-small: 10px;
@milestone-offset: 15px;
@milestone-offset-large: 20px;
@milestone-offset-larger: 25px;
@milestone-icon-padding: 7.5px;
@milestone-icon-font-size: 12px;
@milestone-icon-width: @milestone-icon-padding * 2 + @milestone-icon-font-size + 2;