"div ribbons"
Bootstrap 3.3.0 Snippet by MTaqi

Post to Facebook Tweet this

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 ---------->
<div class="container bootstrap snippet">
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base"><span>Limited Offer</span></div>
</div>
</div>
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon base-alt"><span>Limited Offer</span></div>
</div>
</div>
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon orange"><span>Limited Offer</span></div>
</div>
</div>
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon dark"><span>Limited Offer</span></div>
</div>
</div>
</div>
<div class="row mb-20">
<div class="col-md-3">
<div class="ribbon-content">
<div class="ribbon red"><span>Limited Offer</span></div>
</div>
</div>
<div class="col-md-3">
<div class="ribbon-content">
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
.ribbon {
position: absolute;
top: 20px;
right: -5px;
padding: 15px;
}
.ribbon-content{
position: relative;
width: 100%;
height: 100px;
background: #f1f1f1;
border: 1px solid #DDD;
}
.ribbon.base {
background: #3498db;
color: #fff;
border-right: 5px solid #8bc4ea;
}
.ribbon.light {
background: #ecf0f1;
color: #2c3e50;
border-right: 5px solid #dde4e6;
}
.ribbon.dark {
background: #131313;
color: #fff;
border-right: 5px solid #464646;
}
.ribbon.base-alt {
background: #9cd70e;
color: #fff;
border-right: 5px solid #c6f457;
}
.ribbon.red {
background: #e91b23;
color: #fff;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro Angular

Questions / Comments: