Bootstrap Snippet Performance Horizontal Chart using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row" style="margin-top:30px; ">
<div class="col-md-12">
 <h2 class="flot"><i class="fa fa-pie-chart" aria-hidden="true"></i></h2>
     <h1>Performance</h1>
     <small class="ash">Lorem ipsum dolor sit amet, conset</small><br>
<dl>
  <dt>
    Total Performance
  </dt>
  <dd class="percentage percentage-11"><span class="text">Topic 1: 11.33%</span></dd>
  <dd class="percentage percentage-49"><span class="text">Topic 2: 49.77%</span></dd>
  <dd class="percentage percentage-16"><span class="text">Topic 3: 16.09%</span></dd>
  <dd class="percentage percentage-5"><span class="text">Topic 4: 5.41%</span></dd>
  <dd class="percentage percentage-2"><span class="text">Topic 5: 1.62%</span></dd>
  <dd class="percentage percentage-2"><span class="text">Topic 6: 2%</span></dd>
</dl>
    
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.ash {
    color: #9f9f9f;
}
dl {
  display: flex;
  background-color: white;
  flex-direction: column;
  width: 100%;
  max-width: 700px;
  position: relative;
  padding: 20px;
}
dt {
  align-self: flex-start;
  width: 100%;
  font-weight: 700;
  display: block;
  text-align: center;
  font-size: 1.2em;
  font-weight: 700;
  margin-bottom: 20px;
  margin-left: 130px;
}
.text {
  font-weight: 600;
  display: flex;
  align-items: center;
  height: 40px;
  width: 130px;
  background-color: white;
  position: absolute;
  left: 0;
  justify-content: flex-end;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Performance Horizontal Chart"
Bootstrap 3.3.0 Snippet by arunrajdon68

Related: See More

Questions / Comments:

"Performance Horizontal Chart" Bootstrap 3.3.0 Snippet by arunrajdon68

Related: See More

Questions / Comments:

"Performance Horizontal Chart"
Bootstrap 3.3.0 Snippet by arunrajdon68