Bootstrap testings 2.2.2

progress bar

by toubia95

HTML

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>

<table class="table table-condensed">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Date de début</th>
                  <th>Date de fin</th>
                  <th>Status</th>
                  <th>Actions</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>12/12/2012</td>
                  <td>18/12/2012</td>
                  <td><span class="label label-success">Source principale</span></td>
                  <td><button class="close pull-left">&times;</button></td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>11/12/2012</td>
                  <td>15/12/2012</td>
                  <td><span class="label label-success">Chevauchement #1</span></td>
                  <td><button class="close pull-left">&times;</button></td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>13/12/2012</td>
                  <td>16/12/2012</td>
                  <td><span class="label label-success">Chevauchement #1</span></td>
                  <td><button class="close pull-left">&times;</button></td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>18/12/2012</td>
                  <td>19/12/2012</td>
                  <td><span class="label label-important">En dehors</span></td>
                  <td><button class="close pull-left">&times;</button></td>
                </tr>             
                <tr>
                  <td>5</td>
                  <td>13/12/2012</td>
                  <td>15/12/2012</td>
                  <td><span class="label label-success">Chevauchement #1</span></td>
        ...

CSS

body {margin: 10px !important;}

/* empty progress-bar */

.overlaps .progress {
    height: 10px !important;
    margin-bottom: 2px !important;
}
.overlaps .progress .bar-empty {
    background-color: transparent !important;
    background-image: linear-gradient(to bottom, transparent, transparent) !important;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0) inset !important;
}