Bootstrap Snippet 3 Cols with buttons 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 ---------->
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="row last-buffer">
                
                <div class="col-md-12 top-buffer" >
                    <h2>·Watch</h2>
                </div>
                
                <div class="col-md-12 top-buffer" >
                    <a href="#" class="btn btn-default btn-lg double-height" style="width:100%">TiVo</a>
                </div>
                
                <div class="col-md-12 top-buffer ">
                    <a class="btn btn-success btn-lg double-height" style="width:100%">
                        <span class="fa-stack fa-2x">
                            <i class="fa up-10pct fa-volume-up fa-stack-2x"></i>
                        </span> 
                        <span class="btn btn-lg col2">··Volume Up</span>
                    </a>
                    
                </div>
                
                <div class="col-md-12 top-buffer ">
                    <a class="btn btn-success btn-lg double-height" style="width:45%">
                        <span class="fa-stack fa-2x">
                            <i class="fa up-10pct fa-volume-up fa-stack-2x"></i>
                        </span> 
                        <span class="btn btn-lg col2">··Volume Up</span>
                    </a>
                    <a class="btn btn-success btn-lg double-height" style="width:50%">
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
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");
@import url("https://fonts.googleapis.com/css?family=Titillium+Web:200,400");
.top-buffer { 
    margin-top:2%;
}
.btn-lg.double-height {
    line-height: 4;
}
.last-buffer:last-child {
    margin-bottom:2%;
}
.mini-half a:first-child {
    margin-right:1%;
    float:left !important;
    width:49%;
}
.mini-half a:last-child {
    margin-left:1%;
    float:right !important;
    width:49%;
}
.grey {
  background: grey;
}
.top {
    padding-bottom:10%;
}
.bottom {
    vertical-align: bottom;
    left: 0px;
}
.colx {position: absolute; z-index: 1; bottom: 0px; left: 0px;}
.col2 {position: absolute; z-index: 1; bottom: -5%; left: 0px; clear: both;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"3 Cols with buttons"
Bootstrap 3.3.0 Snippet by skavan

Related: See More

Questions / Comments:

"3 Cols with buttons" Bootstrap 3.3.0 Snippet by skavan

Related: See More

Questions / Comments:

"3 Cols with buttons"
Bootstrap 3.3.0 Snippet by skavan