150+ Bootstrap Footer examples - free generator / creator

HTML
        
                        




<div class="tab-pane fade " id="mdb_031f8a2e887ab82377aa06ecf6ac2e8d56311753" role="tabpanel">
    <pre class="grey lighten-3 mb-0 line-numbers language-html">
        <code class="">
            
              &lt;!-- Footer --&gt;
              &lt;footer class=&#34;bg-light text-center&#34;&gt;
                &lt;!-- Grid container --&gt;
                &lt;div class=&#34;container p-4&#34;&gt;
                  &lt;!-- Section: Social media --&gt;
                  &lt;section class=&#34;mb-4&#34;&gt;
                    &lt;!-- Facebook --&gt;
                    &lt;a
                      class=&#34;btn btn-primary btn-floating m-1&#34;
                      style=&#34;background-color: #3b5998&#34;
                      href=&#34;#!&#34;
                      role=&#34;button&#34;
                      &gt;&lt;i class=&#34;fab fa-facebook-f&#34;&gt;&lt;/i
                    &gt;&lt;/a&gt;

                    &lt;!-- Twitter --&gt;
                    &lt;a
                      class=&#34;btn btn-primary btn-floating m-1&#34;
                      style=&#34;background-color: #55acee&#34;
                      href=&#34;#!&#34;
                      role=&#34;button&#34;
                      &gt;&lt;i class=&#34;fab fa-twitter&#34;&gt;&lt;/i
                    &gt;&lt;/a&gt;

                    &lt;!-- Google --&gt;
                    &lt;a
                      class=&#34;btn btn-primary btn-floating m-1&#34;
                      style=&#34;background-color: #dd4b39&#34;
                      href=&#34;#!&#34;
                      role=&#34;button&#34;
                      &gt;&lt;i class=&#34;fab fa-google&#34;&gt;&lt;/i
                    &gt;&lt;/a&gt;

                    &lt;!-- Instagram --&gt;
                    &lt;a
                      class=&#34;btn btn-primary btn-floating m-1&#34;
                      style=&#34;background-color: #ac2bac&#34;
                      href=&#34;#!&#34;
                      role=&#34;button&#34;
                      &gt;&lt;i class=&#34;fab fa-instagram&#34;&gt;&lt;/i
                    &gt;&lt;/a&gt;

                    &lt;!-- Linkedin --&gt;
                    &lt;a
                      class=&#34;btn btn-primary btn-floating m-1&#34;
                      style=&#34;background-color: #0082ca&#34;
                      href=&#34;#!&#34;
                      role=&#34;button&#34;
                      &gt;&lt;i class=&#34;fab fa-linkedin-in&#34;&gt;&lt;/i
                    &gt;&lt;/a&gt;
                    &lt;!-- Github --&gt;
                    &lt;a
                      class=&#34;btn btn-primary btn-floating m-1&#34;
                      style=&#34;background-color: #333333&#34;
                      href=&#34;#!&#34;
                      role=&#34;button&#34;
                      &gt;&lt;i class=&#34;fab fa-github&#34;&gt;&lt;/i
                    &gt;&lt;/a&gt;
                  &lt;/section&gt;
                  &lt;!-- Section: Social media --&gt;

                  &lt;!-- Section: Form --&gt;
                  &lt;section class=&#34;&#34;&gt;
                    &lt;form action=&#34;&#34;&gt;
                      &lt;!--Grid row--&gt;
                      &lt;div class=&#34;row d-flex justify-content-center&#34;&gt;
                        &lt;!--Grid column--&gt;
                        &lt;div class=&#34;col-auto&#34;&gt;
                          &lt;p class=&#34;pt-2&#34;&gt;
                            &lt;strong&gt;Sign up for our newsletter&lt;/strong&gt;
                          &lt;/p&gt;
                        &lt;/div&gt;
                        &lt;!--Grid column--&gt;

                        &lt;!--Grid column--&gt;
                        &lt;div class=&#34;col-md-5 col-12&#34;&gt;
                          &lt;!-- Email input --&gt;
                          &lt;div class=&#34;form-outline mb-4&#34;&gt;
                            &lt;input
                              type=&#34;email&#34;
                              id=&#34;form5Example2&#34;
                              class=&#34;form-control&#34;
                            /&gt;
                            &lt;label class=&#34;form-label&#34; for=&#34;form5Example2&#34;
                              &gt;Email address&lt;/label
                            &gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                        &lt;!--Grid column--&gt;

                        &lt;!--Grid column--&gt;
                        &lt;div class=&#34;col-auto&#34;&gt;

                          &lt;!-- Submit button --&gt;
                          &lt;button v-else type=&#34;submit&#34; class=&#34;btn btn-primary mb-4&#34;&gt;
                            Subscribe
                          &lt;/button&gt;
                        &lt;/div&gt;
                        &lt;!--Grid column--&gt;
                      &lt;/div&gt;
                      &lt;!--Grid row--&gt;
                    &lt;/form&gt;
                  &lt;/section&gt;
                  &lt;!-- Section: Form --&gt;

                  &lt;!-- Section: Text --&gt;
                  &lt;section class=&#34;mb-4&#34;&gt;
                    &lt;p&gt;
                      Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt
                      distinctio earum repellat quaerat voluptatibus placeat nam,
                      commodi optio pariatur est quia magnam eum harum corrupti dicta,
                      aliquam sequi voluptate quas.
                    &lt;/p&gt;
                  &lt;/section&gt;
                  &lt;!-- Section: Text --&gt;

                  &lt;!-- Section: Links --&gt;
                  &lt;section class=&#34;&#34;&gt;
                    &lt;!--Grid row--&gt;
                    &lt;div class=&#34;row&#34;&gt;
                      &lt;!--Grid column--&gt;
                      &lt;div class=&#34;col-lg-3 col-md-6 mb-4 mb-md-0&#34;&gt;
                        &lt;h5 class=&#34;text-uppercase&#34;&gt;Links&lt;/h5&gt;

                        &lt;ul class=&#34;list-unstyled mb-0&#34;&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 4&lt;/a&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;!--Grid column--&gt;

                      &lt;!--Grid column--&gt;
                      &lt;div class=&#34;col-lg-3 col-md-6 mb-4 mb-md-0&#34;&gt;
                        &lt;h5 class=&#34;text-uppercase&#34;&gt;Links&lt;/h5&gt;

                        &lt;ul class=&#34;list-unstyled mb-0&#34;&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 4&lt;/a&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;!--Grid column--&gt;

                      &lt;!--Grid column--&gt;
                      &lt;div class=&#34;col-lg-3 col-md-6 mb-4 mb-md-0&#34;&gt;
                        &lt;h5 class=&#34;text-uppercase&#34;&gt;Links&lt;/h5&gt;

                        &lt;ul class=&#34;list-unstyled mb-0&#34;&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 4&lt;/a&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;!--Grid column--&gt;

                      &lt;!--Grid column--&gt;
                      &lt;div class=&#34;col-lg-3 col-md-6 mb-4 mb-md-0&#34;&gt;
                        &lt;h5 class=&#34;text-uppercase&#34;&gt;Links&lt;/h5&gt;

                        &lt;ul class=&#34;list-unstyled mb-0&#34;&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 1&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 2&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 3&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                            &lt;a href=&#34;#!&#34; class=&#34;text-dark&#34;&gt;Link 4&lt;/a&gt;
                          &lt;/li&gt;
                        &lt;/ul&gt;
                      &lt;/div&gt;
                      &lt;!--Grid column--&gt;
                    &lt;/div&gt;
                    &lt;!--Grid row--&gt;
                  &lt;/section&gt;
                  &lt;!-- Section: Links --&gt;
                &lt;/div&gt;
                &lt;!-- Grid container --&gt;

                &lt;!-- Copyright --&gt;
                &lt;div
                  class=&#34;text-center p-3&#34;
                  style=&#34;background-color: rgba(0, 0, 0, 0.2)&#34;
                &gt;
                  © 2021 Copyright:
                  &lt;a class=&#34;text-dark&#34; href=&#34;https://mdbootstrap.com/&#34;
                    &gt;MDBootstrap.com&lt;/a
                  &gt;
                &lt;/div&gt;
                &lt;!-- Copyright --&gt;
              &lt;/footer&gt;
              &lt;!-- Footer --&gt;
            
        </code>
    </pre>
</div>