"bootstrap 4 clean footer"
Bootstrap 4.1.1 Snippet by vuthangsoft83

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Roboto:regular,300,500"> <div class=" section-312-7 " id="section-312-7"> <div class=" section-312-8 " id="section-312-8"> <div class="container"> <div class=" row row2-312-6 " id="row2-312-6"> <div class=" col-lg-4 col-md-12 col-sm-12 column-312-21 " id="column-312-21"> <div class=" div-312-75 " id="div-312-75"> <h3 class=" inline-heading-312-25 " id="inline-heading-312-25">webeenet </h3> <p class=" inline-paragraph-312-44 " id="inline-paragraph-312-44">Nemo enim enim voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequr magni dolores eos qui ratione voluptatem.</p> <div class=" div-312-76 " id="div-312-76"> <a class=" link-block-312-1 " id="link-block-312-1" href="#"><div class=" div-312-77 " id="div-312-77"> <i class=" fab fa-facebook-f icon-312-35 " id="icon-312-35"></i> </div> </a> <a class=" link-block-312-2 " id="link-block-312-2" href="#"><div class=" div-312-78 " id="div-312-78"> <i class=" fab fa-twitter icon-312-36 " id="icon-312-36"></i> </div> </a> <a class=" link-block-312-3 " id="link-block-312-3" href="#"><div class=" div-312-79 " id="div-312-79"> <i class=" fab fa-google-plus-g icon-312-37 " id="icon-312-37"></i> </div> </a> <a class=" link-block-312-4 " id="link-block-312-4" href="#"><div class=" div-312-80 " id="div-312-80"> <i class=" fab fa-youtube icon-312-38 " id="icon-312-38"></i> </div> </a> <a class=" link-block-312-5 " id="link-block-312-5" href="#"><div class=" div-312-81 " id="div-312-81"> <i class=" fab fa-linkedin-in icon-312-39 " id="icon-312-39"></i> </div> </a> </div> </div> </div> <div class=" col-lg-4 col-md-12 col-sm-12 column-312-22 " id="column-312-22"> <div class=" div-312-82 " id="div-312-82"> <h6 class=" inline-heading-312-26 " id="inline-heading-312-26">Quick Links</h6> <div class=" row row2-312-7 " id="row2-312-7"> <div class=" col-lg-12 col-md-12 col-sm-12 column-312-23 " id="column-312-23"> <div class=" div-312-83 " id="div-312-83"> <i class=" fas fa-angle-right icon-312-40 " id="icon-312-40"></i> <a class=" text-link-312-11 " id="text-link-312-11" href="#">Financial Planning </a> </div> <div class=" div-312-84 " id="div-312-84"> <i class=" fas fa-angle-right icon-312-41 " id="icon-312-41"></i> <a class=" text-link-312-12 " id="text-link-312-12" href="#">Software & Research </a> </div> <div class=" div-312-85 " id="div-312-85"> <i class=" fas fa-angle-right icon-312-42 " id="icon-312-42"></i> <a class=" text-link-312-13 " id="text-link-312-13" href="#">Market Research </a> </div> <div class=" div-312-86 " id="div-312-86"> <i class=" fas fa-angle-right icon-312-43 " id="icon-312-43"></i> <a class=" text-link-312-14 " id="text-link-312-14" href="#">Sales Services </a> </div> <div class=" div-312-87 " id="div-312-87"> <i class=" fas fa-angle-right icon-312-44 " id="icon-312-44"></i> <a class=" text-link-312-15 " id="text-link-312-15" href="#">Healthcare Services </a> </div> </div> </div> </div> </div> <div class=" col-lg-4 col-md-12 col-sm-12 column-312-24 " id="column-312-24"> <div class=" div-312-88 " id="div-312-88"> <h6 class=" inline-heading-312-27 " id="inline-heading-312-27">Recent Posts</h6> <div class=" div-312-89 " id="div-312-89"> <div class=" div-312-90 " id="div-312-90"> <p class=" inline-paragraph-312-45 " id="inline-paragraph-312-45">24</p> <p class=" inline-paragraph-312-46 " id="inline-paragraph-312-46">April</p> </div> <div class=" div-312-91 " id="div-312-91"> <p class=" inline-paragraph-312-47 " id="inline-paragraph-312-47">Nemo enim enim voluptatem quia voluptas sit aspernatur</p> <div class=" div-312-92 " id="div-312-92"> <i class=" fas fa-user icon-312-45 " id="icon-312-45"></i> <p class=" inline-paragraph-312-48 " id="inline-paragraph-312-48">By Admin</p> <i class=" far fa-comments icon-312-46 " id="icon-312-46"></i> <p class=" inline-paragraph-312-49 " id="inline-paragraph-312-49">86</p> </div> </div> </div> <div class=" div-312-93 " id="div-312-93"> <div class=" div-312-94 " id="div-312-94"> <p class=" inline-paragraph-312-50 " id="inline-paragraph-312-50"> 18<br> </p> <p class=" inline-paragraph-312-51 " id="inline-paragraph-312-51">April</p> </div> <div class=" div-312-95 " id="div-312-95"> <p class=" inline-paragraph-312-52 " id="inline-paragraph-312-52">New leader for new vision and new direction.</p> <div class=" div-312-96 " id="div-312-96"> <i class=" fas fa-user icon-312-47 " id="icon-312-47"></i> <p class=" inline-paragraph-312-53 " id="inline-paragraph-312-53">By Admin</p> <i class=" far fa-comments icon-312-48 " id="icon-312-48"></i> <p class=" inline-paragraph-312-54 " id="inline-paragraph-312-54">26</p> </div> </div> </div> </div> </div> </div> </div> </div> <div class=" section-312-9 " id="section-312-9"> <div class="container"> <div class=" row row2-312-8 " id="row2-312-8"> <div class=" col-lg-12 col-md-12 col-sm-12 column-312-25 " id="column-312-25"> <p class=" inline-paragraph-312-55 " id="inline-paragraph-312-55"> Copyright ©2020 All rights reserved - <a href="https://webeenet.com" target="_blank">webeenet.com</a><br> </p> </div> </div> </div> </div> </div>
.section-312-8 { padding-top: 60px; padding-bottom: 60px; border-bottom-color: #ededed; border-bottom-width: 1px; border-bottom-style: solid } .inline-heading-312-25 { font-family: "Roboto"; font-weight: normal; font-size: 32px; line-height: 42px; margin-bottom: 32px } .inline-paragraph-312-44 { font-family: "Roboto"; font-weight: 300; color: #444; font-size: 16px; line-height: 28.8px; margin-bottom: 32px } .div-312-76 { display: flex } .link-block-312-1 { margin-right: 8px } .link-block-312-1:hover { text-decoration: none } .div-312-77 { display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; border-width: 2px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-color: rgb(147, 147, 147); border-top-color: rgb(147, 147, 147); border-right-color: rgb(147, 147, 147); border-bottom-color: rgb(147, 147, 147); border-left-color: rgb(147, 147, 147); border-style: solid; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; color: #444; transition: all 200ms linear 0ms } .div-312-77:hover { background-color: rgb(114, 192, 44); color: #fff; border-color: rgb(114, 192, 44); border-top-color: rgb(114, 192, 44); border-right-color: rgb(114, 192, 44); border-bottom-color: rgb(114, 192, 44); border-left-color: rgb(114, 192, 44) } .icon-312-35 { font-size: 12px; line-height: 12px; padding-top: 0px; height: 12px; min-height: 12px } .link-block-312-2 { margin-right: 8px } .link-block-312-2:hover { text-decoration: none } .div-312-78 { display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; border-width: 2px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-color: rgb(147, 147, 147); border-top-color: rgb(147, 147, 147); border-right-color: rgb(147, 147, 147); border-bottom-color: rgb(147, 147, 147); border-left-color: rgb(147, 147, 147); border-style: solid; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; color: #444; transition: all 200ms linear 0ms } .div-312-78:hover { background-color: rgb(114, 192, 44); color: #fff; border-color: rgb(114, 192, 44); border-top-color: rgb(114, 192, 44); border-right-color: rgb(114, 192, 44); border-bottom-color: rgb(114, 192, 44); border-left-color: rgb(114, 192, 44) } .icon-312-36 { font-size: 12px; line-height: 12px; padding-top: 0px; height: 12px; min-height: 12px } .link-block-312-3 { margin-right: 8px } .link-block-312-3:hover { text-decoration: none } .div-312-79 { display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; border-width: 2px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-color: rgb(147, 147, 147); border-top-color: rgb(147, 147, 147); border-right-color: rgb(147, 147, 147); border-bottom-color: rgb(147, 147, 147); border-left-color: rgb(147, 147, 147); border-style: solid; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; color: #444; transition: all 200ms linear 0ms } .div-312-79:hover { background-color: rgb(114, 192, 44); color: #fff; border-color: rgb(114, 192, 44); border-top-color: rgb(114, 192, 44); border-right-color: rgb(114, 192, 44); border-bottom-color: rgb(114, 192, 44); border-left-color: rgb(114, 192, 44) } .icon-312-37 { font-size: 12px; line-height: 12px; padding-top: 0px; height: 12px; min-height: 12px } .link-block-312-4 { margin-right: 8px } .link-block-312-4:hover { text-decoration: none } .div-312-80 { display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; border-width: 2px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-color: rgb(147, 147, 147); border-top-color: rgb(147, 147, 147); border-right-color: rgb(147, 147, 147); border-bottom-color: rgb(147, 147, 147); border-left-color: rgb(147, 147, 147); border-style: solid; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; color: #444; transition: all 200ms linear 0ms } .div-312-80:hover { background-color: rgb(114, 192, 44); color: #fff; border-color: rgb(114, 192, 44); border-top-color: rgb(114, 192, 44); border-right-color: rgb(114, 192, 44); border-bottom-color: rgb(114, 192, 44); border-left-color: rgb(114, 192, 44) } .icon-312-38 { font-size: 12px; line-height: 12px; padding-top: 0px; height: 12px; min-height: 12px } .link-block-312-5 { margin-right: 8px } .link-block-312-5:hover { text-decoration: none } .div-312-81 { display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; border-width: 2px; border-top-width: 2px; border-right-width: 2px; border-bottom-width: 2px; border-left-width: 2px; border-color: rgb(147, 147, 147); border-top-color: rgb(147, 147, 147); border-right-color: rgb(147, 147, 147); border-bottom-color: rgb(147, 147, 147); border-left-color: rgb(147, 147, 147); border-style: solid; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-left-radius: 50%; border-top-right-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; color: #444; transition: all 200ms linear 0ms } .div-312-81:hover { background-color: rgb(114, 192, 44); color: #fff; border-color: rgb(114, 192, 44); border-top-color: rgb(114, 192, 44); border-right-color: rgb(114, 192, 44); border-bottom-color: rgb(114, 192, 44); border-left-color: rgb(114, 192, 44) } .icon-312-39 { font-size: 12px; line-height: 12px; padding-top: 0px; height: 12px; min-height: 12px } .inline-heading-312-26 { font-family: "Roboto"; font-weight: normal; font-size: 20px; line-height: 28.8px; margin-bottom: 32px } .inline-heading-312-26::after { display: block; width: 60px; height: 2px; background-color: rgb(114, 192, 44); content: '' } .div-312-83 { margin-bottom: 8px } .icon-312-40 { color: #444 } .text-link-312-11 { font-family: "Roboto"; font-weight: 300; line-height: 28.8px; color: #444; font-size: 16px; transition: color 200ms linear } .text-link-312-11:hover { color: rgb(52, 152, 219); text-decoration: none } .div-312-84 { margin-bottom: 8px } .icon-312-41 { color: #444 } .text-link-312-12 { font-family: "Roboto"; font-weight: 300; line-height: 28.8px; color: #444; font-size: 16px; transition: color 200ms linear } .text-link-312-12:hover { color: rgb(52, 152, 219); text-decoration: none } .div-312-85 { margin-bottom: 8px } .icon-312-42 { color: #444 } .text-link-312-13 { font-family: "Roboto"; font-weight: 300; line-height: 28.8px; color: #444; font-size: 16px; transition: color 200ms linear } .text-link-312-13:hover { color: rgb(52, 152, 219); text-decoration: none } .div-312-86 { margin-bottom: 8px } .icon-312-43 { color: #444 } .text-link-312-14 { font-family: "Roboto"; font-weight: 300; line-height: 28.8px; color: #444; font-size: 16px; transition: color 200ms linear } .text-link-312-14:hover { color: rgb(52, 152, 219); text-decoration: none } .div-312-87 { margin-bottom: 8px } .icon-312-44 { color: #444 } .text-link-312-15 { font-family: "Roboto"; font-weight: 300; line-height: 28.8px; color: #444; font-size: 16px; transition: color 200ms linear } .text-link-312-15:hover { color: rgb(52, 152, 219); text-decoration: none } .inline-heading-312-27 { font-family: "Roboto"; font-weight: normal; font-size: 20px; line-height: 28.8px; margin-bottom: 32px } .inline-heading-312-27::after { display: block; width: 60px; height: 2px; background-color: rgb(114, 192, 44); content: '' } .div-312-89 { display: flex; margin-bottom: 16px } .div-312-90 { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #e0ebf3; margin-right: 16px } .inline-paragraph-312-45 { font-family: "Roboto"; font-weight: 500; color: #444; font-size: 26px; line-height: 24px; margin-bottom: 0px } .inline-paragraph-312-46 { font-family: "Roboto"; font-weight: normal; color: #666; font-size: 12px; line-height: 24px; margin-bottom: 0px; text-transform: uppercase } .div-312-91 { flex-basis: 0px; flex-grow: 1 } .inline-paragraph-312-47 { font-family: "Roboto"; font-weight: 300; color: #444; font-size: 16px; line-height: 24px; margin-bottom: 0px } .div-312-92 { display: flex; align-items: center; font-size: 14px; margin-top: 8px } .icon-312-45 { margin-right: 8px; min-height: 14px; height: 14px; color: #666 } .inline-paragraph-312-48 { font-family: "Roboto"; font-weight: 300; color: #666; margin-bottom: 0px; margin-right: 16px } .icon-312-46 { margin-right: 8px; height: 14px; min-height: 14px; color: #666 } .inline-paragraph-312-49 { font-family: "Roboto"; font-weight: 300; color: #666; margin-bottom: 0px } .div-312-93 { display: flex; margin-bottom: 16px } .div-312-94 { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; flex-direction: column; background-color: #e0ebf3; margin-right: 16px } .inline-paragraph-312-50 { font-family: "Roboto"; font-weight: 500; color: #444; font-size: 26px; line-height: 24px; margin-bottom: 0px } .inline-paragraph-312-51 { font-family: "Roboto"; font-weight: normal; color: #666; font-size: 12px; line-height: 24px; margin-bottom: 0px; text-transform: uppercase } .div-312-95 { flex-basis: 0px; flex-grow: 1 } .inline-paragraph-312-52 { font-family: "Roboto"; font-weight: 300; color: #444; font-size: 16px; line-height: 24px; margin-bottom: 0px } .div-312-96 { display: flex; align-items: center; font-size: 14px; margin-top: 8px } .icon-312-47 { margin-right: 8px; min-height: 14px; height: 14px; color: #666 } .inline-paragraph-312-53 { font-family: "Roboto"; font-weight: 300; color: #666; margin-bottom: 0px; margin-right: 16px } .icon-312-48 { margin-right: 8px; height: 14px; min-height: 14px; color: #666 } .inline-paragraph-312-54 { font-family: "Roboto"; font-weight: 300; color: #666; margin-bottom: 0px } .section-312-9 { padding-top: 16px; padding-bottom: 16px } .row2-312-8 { align-items: center } .inline-paragraph-312-55 { font-family: "Roboto"; font-weight: 300; color: #444; font-size: 16px; line-height: 28.8px; margin-bottom: 0px; text-align: center } @media (max-width: 991px) { .column-312-21 { margin-bottom: 32px } .column-312-22 { margin-bottom: 32px } } @media (max-width: 767px) { .column-312-23 { margin-bottom: 30px } }

Related: See More


Questions / Comments: