"list footer web"
Bootstrap 3.3.0 Snippet by moisea

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <br> <div id='lower'> <div id='lower-wrapper'> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar1' preferred='yes'> <p><a href="#">SURFCAMP</p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar2' preferred='yes'> <p><a href="#">RESTAURANTS</p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar3' preferred='yes'> <p><a href="#">BLOGS</p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar4' preferred='yes'> <p><a href="#">TRAVEL AGENCIES</p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> </b:section> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='lowerbar4' preferred='yes'> <p><a href="#">NUSA SURF REPORT</p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> <p><a href="#">www.nusasurfwear.com</a></p> </div> <div id='lowerbar-wrapper'> <b:section class='lowerbar' id='5' preferred='yes'> </b:section> </div> <div style='clear: both;'/> </div> </div> </body> </html>
#lower { margin:auto; padding: 0px 0px 10px 0px; width: 100%; background:#333333; } #lower-wrapper { background:#333333; margin:auto; padding: 20px 0px 20px 0px; width: 960px; // Sesuaikan dengan lebar blog Anda border:0; } #lowerbar-wrapper { background:#333333; float: left; margin: 0px 15px auto; padding-bottom: 20px; width: 15%; // Sesuaikan text-align: justify; color:#ddd; font: bold 12px Arial, Tahoma, Verdana; line-height: 1.6em; word-wrap: break-word; overflow: hidden; } .lowerbar {margin: 0; padding: 0;} .lowerbar .widget {margin: 0; padding: 10px 20px 0px 20px;} .lowerbar h2 { margin: 0px 0px 10px 0px; padding: 3px 0px 3px 0px; text-align: left; border:0; color:#ddd; text-transform:uppercase; font: bold 14px Arial, Tahoma, Verdana; } .lowerbar ul { color:#fff; margin: 0 auto; padding: 0; list-style-type: none; } .lowerbar li { display:block; color:#fff; line-height: 1.6em; margin-left: 0 !important; padding: 6px; border-bottom: 1px solid #222; border-top: 1px solid #444; list-style-type: none; } .lowerbar li a { text-decoration:none; color: #DBDBDB; } .lowerbar li a:hover { text-decoration:underline; } .lowerbar li:hover { display:block; background: #222; } p { color: #626262; } p a { color: #fff; } p a:hover { color: #626262; }

Related: See More

BLK• Design System
Bootstrap 4 Footer Design
Footer using Bootstrap 4
Social Icon Strip Footer

Questions / Comments: