Bootstrap Snippet 5 colored line using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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">
        <div class="col-md-5ths col-sm-5ths red">
        </div>
        <div class="col-md-5ths col-sm-5ths green">
        </div>
        <div class="col-md-5ths col-sm-5ths blue">
        </div>
        <div class="col-md-5ths col-sm-5ths green">
        </div>
        <div class="col-md-5ths col-sm-5ths yellow">
        </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
.red{
    background-color:red;
}
.blue{
    background-color:blue;
}
.green{
    background-color:green;
}
.yellow{
    background-color:yellow;
}
.col-xs-5ths,
.col-sm-5ths,
.col-md-5ths,
.col-lg-5ths {
    position: relative;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.col-xs-5ths {
    width: 20%;
    float: left;
}
@media (min-width: 768px) {
    .col-sm-5ths {
        width: 20%;
        float: left;
    }
}
@media (min-width: 992px) {
    .col-md-5ths {
        width: 20%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"5 colored line"
Bootstrap 3.3.0 Snippet by gango

Related: See More

Questions / Comments:

"5 colored line" Bootstrap 3.3.0 Snippet by gango

Related: See More

Questions / Comments:

"5 colored line"
Bootstrap 3.3.0 Snippet by gango