Bootstrap Snippet Creative footer 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/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.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 ---------->
<!--<img src="https://i.pinimg.com/originals/e8/71/8a/e8718a946344180d84a8dc59b4a6824f.jpg" style="-->
<!--    position: absolute;-->
<!--    top: -1075%;-->
<!--    width: 100%;-->
<!--">-->
<!--<div class="absolute-footer">-->
    <footer class="footer">
        <div class="row">
            <div class="col-md-8 bg-red">
                <div class="tringle-top"></div>
            </div>
            <div class="col-md-4 bg-black">
                <div class="go-to-top">
                  <i class="fa fa-angle-down" aria-hidden="true"></i>
                </div>
            </div>
        </div>
        <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="col-md-3">
                    <h2>Logo</h2>
                    <p>Suspendisse hendrerit tellus laoreet luctus pharetra. Aliquam porttitor vitae orci nec ultricies. Curabitur vehicula, libero eget faucibus faucibus, purus erat eleifend enim, porta pellentesque ex mi ut sem.</p>
                    <p>© 2014 BS3 UI Kit, All rights reserved</p>
                </div>
                <div class="col-md-4">
                    <h4>Menu —</h4>
                    <div class="col-md-6 no-padding">
                        <ul class="pages">
                            <li><a href="#">Travel</a></li>
                            <li><a href="#">Nature</a></li>
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
/*body { overflow:hidden;}*/
.absolute-footer {
/*    position: absolute;
    z-index: 10;
    top: 72px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#fff;*/
}
h2 {
    margin-top: 0;
}
.col-center{
    float: none;
    margin: 0 auto;
}
.no-padding { padding:0;}
.absolute-img {
    position: absolute;
    top: -143px;
    right: 0;
    z-index: -1;
}
.tringle-top {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 0px;
    height: 0px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent ;
    border-bottom: 6px solid #2f2f2f;
    right: 50%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Creative footer"
Bootstrap 4.0.0 Snippet by ProTon

Related: See More

Questions / Comments:

"Creative footer" Bootstrap 4.0.0 Snippet by ProTon

Related: See More

Questions / Comments:

"Creative footer"
Bootstrap 4.0.0 Snippet by ProTon