"Hero Widgets"
Bootstrap 3.0.3 Snippet by travislaynewilson

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="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<br />
<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="hero-widget well well-sm">
<div class="icon">
<i class="glyphicon glyphicon-user"></i>
</div>
<div class="text">
<var>3</var>
<label class="text-muted">invited guests</label>
</div>
<div class="options">
<a href="javascript:;" class="btn btn-primary btn-lg"><i class="glyphicon glyphicon-plus"></i> Add a guest</a>
</div>
</div>
</div>
<div class="col-sm-3">
<div class="hero-widget well well-sm">
<div class="icon">
<i class="glyphicon glyphicon-star"></i>
</div>
<div class="text">
<var>614</var>
<label class="text-muted">page likes</label>
</div>
<div class="options">
<a href="javascript:;" class="btn btn-default btn-lg"><i class="glyphicon glyphicon-search"></i> View traffic</a>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
.hero-widget { text-align: center; padding-top: 20px; padding-bottom: 20px; }
.hero-widget .icon { display: block; font-size: 96px; line-height: 96px; margin-bottom: 10px; text-align: center; }
.hero-widget var { display: block; height: 64px; font-size: 64px; line-height: 64px; font-style: normal; }
.hero-widget label { font-size: 17px; }
.hero-widget .options { margin-top: 10px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

gfgh hgfgg

Na () - 11 years ago - Reply 0


9595

Na () - 11 years ago - Reply 0


Looks nice.. keep up the good work

Sudhir Nimavat () - 11 years ago - Reply 0


Lol this is exactly what I've build for one of my unpublished projects.

Awesome work though :)

Alex () - 11 years ago - Reply 0