"Blockquote Box"
Bootstrap 3.1.0 Snippet by BhaumikPatel

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.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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">
<h2>
Blockquote Box</h2>
<div class="col-md-6">
<div class="blockquote-box clearfix">
<div class="square pull-left">
<img src="http://placehold.it/60/8e44ad/FFF&text=B" alt="" class="" />
</div>
<h4>
Bootsnipp</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante.
</p>
</div>
<div class="blockquote-box blockquote-primary clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-music glyphicon-lg"></span>
</div>
<h4>
Let's music play</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a
ante. <a href="http://www.jquery2dotnet.com/search/label/jquery">jquery2dotnet</a>
</p>
</div>
<div class="blockquote-box blockquote-success clearfix">
<div class="square pull-left">
<span class="glyphicon glyphicon-tree-conifer glyphicon-lg"></span>
</div>
<h4>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
.glyphicon-lg{font-size:3em}
.blockquote-box{border-right:5px solid #E6E6E6;margin-bottom:25px}
.blockquote-box .square{width:100px;min-height:50px;margin-right:22px;text-align:center!important;background-color:#E6E6E6;padding:20px 0}
.blockquote-box.blockquote-primary{border-color:#357EBD}
.blockquote-box.blockquote-primary .square{background-color:#428BCA;color:#FFF}
.blockquote-box.blockquote-success{border-color:#4CAE4C}
.blockquote-box.blockquote-success .square{background-color:#5CB85C;color:#FFF}
.blockquote-box.blockquote-info{border-color:#46B8DA}
.blockquote-box.blockquote-info .square{background-color:#5BC0DE;color:#FFF}
.blockquote-box.blockquote-warning{border-color:#EEA236}
.blockquote-box.blockquote-warning .square{background-color:#F0AD4E;color:#FFF}
.blockquote-box.blockquote-danger{border-color:#D43F3A}
.blockquote-box.blockquote-danger .square{background-color:#D9534F;color:#FFF}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

jea! this is great work! ;) thanks!

Beata Gibalska () - 10 years ago - Reply 0


Great stuff! Just what I was looking for!

Mike () - 10 years ago - Reply 0