Bootstrap Snippet list facts numbers 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
29
30
31
32
33
34
35
36
37
<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 ---------->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="bg-super">
  <div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="circ">
            <h3>11+</h3>
            <i class="fa fa-home" aria-hidden="true" style="font-size:100px;z-index:1;"></i>
            <h5>Organization</h5> 
            </div>
         
            
        </div>
        <div class="col-md-3 ">
                        <div class="circ">
            <h3>230+</h3>
            <i class="fa fa-handshake-o" aria-hidden="true" style="font-size:100px;z-index:1;"></i>
            <h5>Participation</h5> 
                        </div>
        </div>
        
        
       <div class="col-md-3 ">
                        <div class="circ">
            <h3>4+</h3>
            <i class="fa fa-group" aria-hidden="true" style="font-size:100px;z-index:1;"></i>
            <h5>Symposia</h5> 
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
h3 {
    position:relative;
    z-index:2;
    text-align:center;
    color: #eee;
    font-weight:normal;
    font-size:5rem;
    padding-top:40px;
}
.fa{
    font-size: 100px;
    z-index: 1;
    margin-top: -100px;
    display:block;
    color:#00eeff22;
    margin-left: 20%;
    text-align:center;
    
}
h5{
    color:white;
    text-align:center;
    padding:0 20% 10% 20%;
    font-weight:bolder;
}
.bg-super{
    background: url("http://www.twitrcovers.com/wp-content/uploads/2014/06/landscapes-mountains-sunset-l.jpg")no-repeat center center;
    background-size: cover;
}
.circ{
    background-color:#0099bb99;
    border-radius: 180px;
    margin: 0 15% 0 15%;
    
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"list facts numbers "
Bootstrap 3.3.0 Snippet by jyapujuju

Related: See More

Questions / Comments:

"list facts numbers " Bootstrap 3.3.0 Snippet by jyapujuju

Related: See More

Questions / Comments:

"list facts numbers "
Bootstrap 3.3.0 Snippet by jyapujuju