<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <title>Material Design for Bootstrap</title>
    <!-- MDB icon -->
    <link rel="icon" href="../../img/mdb-favicon.ico" type="image/x-icon" />
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" />
    <!-- Google Fonts Roboto -->
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
    />
    <!-- MDB -->
    <link rel="stylesheet" href="../../css/mdb.min.css" />
    <!-- PRISM -->
    <link rel="stylesheet" href="../../dev/css/new-prism.css" />
    <!-- Custom styles -->
    <style></style>
  </head>

  <body>
    <div class="container my-5">
      <!-- Navs -->
      <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
        <!-- Overview tab -->
        <li class="nav-item" role="presentation">
          <a
            class="nav-link active"
            id="pills-overview-tab"
            data-mdb-toggle="pill"
            href="#pills-overview"
            role="tab"
            aria-controls="pills-overview"
            aria-selected="true"
            >Overview</a
          >
        </li>
        <!-- Overview tab -->

        <!-- Api tab -->
        <li class="nav-item" role="presentation">
          <a
            class="nav-link"
            id="pills-api-tab"
            data-mdb-toggle="pill"
            href="#pills-api"
            role="tab"
            aria-controls="pills-api"
            aria-selected="false"
            >API</a
          >
        </li>
        <!-- Api tab -->
      </ul>
      <!-- Navs -->

      <!-- Panels -->
      <div class="tab-content mt-4" id="pills-tabContent">
        <!-- Overview panel -->
        <div
          class="tab-pane fade show active"
          id="pills-overview"
          role="tabpanel"
          aria-labelledby="pills-overview-tab"
        >
          <!--Grid row-->
          <div class="row">
            <!--Grid column-->
            <div class="col-md-10 mb-4">
              <!--Section: Docs content-->
              <section>
                <!--Section: Introduction-->
                <section id="section-introduction">
                  <!-- Main title -->
                  <h2 class="h1 fw-bold">Footer</h2>

                  <!-- Seo title -->
                  <h1 class="h5">Subtitle</h1>

                  <!-- Description -->
                  <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere mollitia qui
                    aut. Molestias explicabo autem veniam doloribus doloremque numquam odit rem
                    sapiente natus ipsam temporibus voluptates, ab mollitia repellat! Itaque.
                  </p>
                </section>
                <!--Section: Introduction-->

                <hr class="my-5" />

                <!--Section: Basic example-->
                <section id="section-basic-example">
                  <!-- Section title -->
                  <h2 class="mb-4">Basic example</h2>

                  <!--Section: Demo-->
                  <section class="border p-4 d-flex justify-content-center mb-4">
                    <footer class="footer bg-light text-dark mt-auto pt-3">
                      <div class="container-fluid">
                        <div class="row">
                          <div class="col-md-4">
                            <h5 class="text-uppercase">footer content</h5>
                            <p>
                              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur
                              suscipit natus dolore, laboriosam aut, ab vel numquam excepturi
                              facilis repellat ipsam quibusdam quod praesentium consequuntur dicta
                              eligendi repudiandae? Ipsam, autem?
                            </p>
                          </div>
                          <div class="col-md-4">
                            <h5 class="text-uppercase">links</h5>
                            <ul class="list-unstyled">
                              <li>
                                <a class="link-dark" href="#!">Link 1</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 2</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 3</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 4</a>
                              </li>
                            </ul>
                          </div>
                          <div class="col-md-4">
                            <h5 class="text-uppercase">links</h5>
                            <ul class="list-unstyled">
                              <li>
                                <a class="link-dark" href="#!">Link 1</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 2</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 3</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 4</a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <div class="footer-copyright text-center">
                        <div class="container-fluid">
                          <p class="text-black-50 mb-0 py-3">
                            © 2020 Copyright Text <a class="link-dark" href="#!">More links</a>
                          </p>
                        </div>
                      </div>
                    </footer>
                  </section>
                  <!--Section: Demo-->

                  <!--Section: Code-->
                  <section>
                    <mdbsnippet>
                      <code data-lang="html" data-name="HTML">
                        <footer class="footer bg-light text-dark mt-auto pt-3">
                          <div class="container-fluid">
                            <div class="row">
                              <div class="col-md-4">
                                <h5 class="text-uppercase">footer content</h5>
                                <p>
                                  Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                                  Consectetur suscipit natus dolore, laboriosam aut, ab vel numquam
                                  excepturi facilis repellat ipsam quibusdam quod praesentium
                                  consequuntur dicta eligendi repudiandae? Ipsam, autem?
                                </p>
                              </div>
                              <div class="col-md-4">
                                <h5 class="text-uppercase">links</h5>
                                <ul class="list-unstyled">
                                  <li>
                                    <a class="link-dark" href="#!">Link 1</a>
                                  </li>
                                  <li>
                                    <a class="link-dark" href="#!">Link 2</a>
                                  </li>
                                  <li>
                                    <a class="link-dark" href="#!">Link 3</a>
                                  </li>
                                  <li>
                                    <a class="link-dark" href="#!">Link 4</a>
                                  </li>
                                </ul>
                              </div>
                              <div class="col-md-4">
                                <h5 class="text-uppercase">links</h5>
                                <ul class="list-unstyled">
                                  <li>
                                    <a class="link-dark" href="#!">Link 1</a>
                                  </li>
                                  <li>
                                    <a class="link-dark" href="#!">Link 2</a>
                                  </li>
                                  <li>
                                    <a class="link-dark" href="#!">Link 3</a>
                                  </li>
                                  <li>
                                    <a class="link-dark" href="#!">Link 4</a>
                                  </li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="footer-copyright text-center">
                            <div class="container-fluid">
                              <p class="text-black-50 mb-0 py-3">
                                © 2020 Copyright Text <a class="link-dark" href="#!">More links</a>
                              </p>
                            </div>
                          </div>
                        </footer>
                      </code>
                    </mdbsnippet>
                  </section>
                  <!--Section: Code-->
                </section>
                <!--Section: Basic example-->

                <hr class="my-5" />

                <!--Section: Basic example-->
                <section id="section-light-version">
                  <!-- Section title -->
                  <h2 class="mb-4">Supported content</h2>

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <footer class="footer bg-light text-dark mt-auto pt-3">
                      <div class="footer-copyright text-center">
                        <div class="container-fluid">
                          <p class="text-black-50 mb-0 py-3">
                            © 2020 Copyright Text <a class="link-dark" href="#!">More links</a>
                          </p>
                        </div>
                      </div>
                    </footer>
                  </section>
                  <!--Section: Demo-->

                  <hr class="my-5" />

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <footer class="footer bg-light text-dark mt-auto pt-3">
                      <div class="container-fluid">
                        <div class="row">
                          <div class="col-md-3">
                            <h5 class="text-uppercase">links</h5>
                            <ul class="list-unstyled">
                              <li>
                                <a class="link-dark" href="#!">Link 1</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 2</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 3</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 4</a>
                              </li>
                            </ul>
                          </div>
                          <div class="col-md-3">
                            <h5 class="text-uppercase">links</h5>
                            <ul class="list-unstyled">
                              <li>
                                <a class="link-dark" href="#!">Link 1</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 2</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 3</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 4</a>
                              </li>
                            </ul>
                          </div>
                          <div class="col-md-3">
                            <h5 class="text-uppercase">links</h5>
                            <ul class="list-unstyled">
                              <li>
                                <a class="link-dark" href="#!">Link 1</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 2</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 3</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 4</a>
                              </li>
                            </ul>
                          </div>
                          <div class="col-md-3">
                            <h5 class="text-uppercase">links</h5>
                            <ul class="list-unstyled">
                              <li>
                                <a class="link-dark" href="#!">Link 1</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 2</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 3</a>
                              </li>
                              <li>
                                <a class="link-dark" href="#!">Link 4</a>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <div class="footer-copyright text-center">
                        <div class="container-fluid">
                          <p class="text-black-50 mb-0 py-3">
                            © 2020 Copyright Text <a class="link-dark" href="#!">More links</a>
                          </p>
                        </div>
                      </div>
                    </footer>
                  </section>
                  <!--Section: Demo-->

                  <hr class="my-5" />

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <footer class="footer bg-light text-dark mt-auto pt-3">
                      <div class="container-fluid">
                        <div class="row">
                          <div class="col-md-6">
                            <h5 class="text-uppercase">footer text 1</h5>
                            <p>
                              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Expedita
                              sapiente sint, nulla, nihil repudiandae commodi voluptatibus corrupti
                              animi sequi aliquid magnam debitis, maxime quam recusandae harum esse
                              fugiat. Itaque, culpa?
                            </p>
                          </div>
                          <div class="col-md-6">
                            <h5 class="text-uppercase">footer text 2</h5>
                            <p>
                              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Optio
                              deserunt fuga perferendis modi earum commodi aperiam temporibus quod
                              nulla nesciunt aliquid debitis ullam omnis quos ipsam, aspernatur id
                              excepturi hic.
                            </p>
                          </div>
                        </div>
                      </div>
                      <div class="footer-copyright text-center">
                        <div class="container-fluid">
                          <p class="text-black-50 mb-0 py-3">
                            © 2020 Copyright Text <a class="link-dark" href="#!">More links</a>
                          </p>
                        </div>
                      </div>
                    </footer>
                  </section>
                  <!--Section: Demo-->

                  <hr class="my-5" />

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <footer class="footer bg-light text-dark mt-auto pt-3">
                      <div class="container-fluid">
                        <div class="row">
                          <div class="col-md-6 mb-4">
                            <div class="form-outline">
                              <input type="text" id="form1" class="form-control" />
                              <label class="form-label" for="form1">Example label</label>
                            </div>
                          </div>
                          <div class="col-md-6 mb-4">
                            <div class="input-group form-outline flex-nowrap">
                              <span class="input-group-text" id="addon-wrapping">@</span>
                              <input
                                type="text"
                                class="form-control"
                                id="input4"
                                placeholder="Username"
                                aria-label="Username"
                                aria-describedby="addon-wrapping"
                              />
                              <label class="form-label" for="input4" style="margin-left: 34px"
                                >Username</label
                              >
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="footer-copyright text-center">
                        <div class="container-fluid">
                          <p class="text-black-50 mb-0 py-3">
                            © 2020 Copyright Text <a class="link-dark" href="#!">More links</a>
                          </p>
                        </div>
                      </div>
                    </footer>
                  </section>
                  <!--Section: Demo-->

                  <hr class="my-5" />

                  <!--Section: Demo-->
                  <section class="border p-4 mb-4">
                    <footer class="footer bg-light text-dark mt-auto pt-3">
                      <div class="container-fluid">
                        <div class="row">
                          <div
                            class="col-md-12 mb-4 d-flex justify-content-center align-items-center"
                          >
                            <h5 class="mb-1 me-3">Register for free</h5>
                            <button type="button" class="btn btn-outline-primary btn-rounded">
                              Primary
                            </button>
                          </div>
                        </div>
                      </div>
                      <div class="footer-copyright text-center">
                        <div class="container-fluid">
                          <p class="text-black-50 mb-0 py-3">
                            © 2020 Copyright Text <a class="link-dark" href="#!">More links</a>
                          </p>
                        </div>
                      </div>
                    </footer>
                  </section>
                  <!--Section: Demo-->
                </section>
                <!--Section: Basic example-->
              </section>
              <!--Section: Docs content-->
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-2 mb-4">
              <!-- Table of content -->
              <nav id="table-of-content">
                <ul>
                  <li><a href="#section-introduction">Introduction</a></li>
                  <li><a href="#section-basic-example">Basic example</a></li>
                </ul>
              </nav>
              <!-- Table of content -->
            </div>
            <!--Grid column-->
          </div>
          <!--Grid row-->
        </div>
        <!-- Overview panel -->

        <!-- API panel -->
        <div class="tab-pane fade" id="pills-api" role="tabpanel" aria-labelledby="pills-api-tab">
          <!--Grid row-->
          <div class="row">
            <!--Grid column-->
            <div class="col-md-10 mb-4">
              <!--Section: API content-->
              <section>
                <!--Section: Introduction-->
                <section id="section-introduction">
                  <!-- Main title -->
                  <h2 class="h1 fw-bold">Title - API</h2>
                </section>
                <!--Section: Introduction-->

                <hr class="my-5" />

                <!--Section: Usage-->
                <section id="section-usage">
                  <!-- Section title -->
                  <h2 class="mb-4">Usage</h2>

                  <h4 class="mb-4">Via data attributes</h4>

                  <mdbsnippet>
                    <code data-lang="html" data-name="HTML">
                      <button type="button" data-mdb-toggle="modal" data-mdb-target="#myModal">
                        Launch modal
                      </button>
                    </code>
                  </mdbsnippet>

                  <h4 class="my-4">Via JavaScript</h4>

                  <mdbsnippet>
                    <code data-lang="js" data-name="JavaScript">
                      var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)
                    </code>
                  </mdbsnippet>
                </section>
                <!--Section: Usage-->

                <hr class="my-5" />

                <!--Section: Options-->
                <section id="section-options">
                  <!-- Section title -->
                  <h2 class="mb-4">Options</h2>

                  <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="th-sm">Name</th>
                          <th class="th-sm">Type</th>
                          <th class="th-sm">Default</th>
                          <th class="th-sm">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap"><code class="highlighter-rouge">tag</code></td>
                          <td><i>String</i></td>
                          <td><code>'button'</code></td>
                          <td>Changes button tag</td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </section>
                <!--Section: Options-->

                <hr class="my-5" />

                <!--Section: Methods-->
                <section id="section-methods">
                  <!-- Section title -->
                  <h2 class="mb-4">Methods</h2>

                  <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="th-sm">Name</th>
                          <th class="th-sm">Description</th>
                          <th class="th-sm">Example</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap"><code class="highlighter-rouge">toggle</code></td>
                          <td>Manually toggles a modal</td>
                          <td><code class="language-markup text-nowrap">myModal.toggle()</code></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </section>
                <!--Section: Methods-->

                <hr class="my-5" />

                <!--Section: Events-->
                <section id="section-events">
                  <!-- Section title -->
                  <h2 class="mb-4">Events</h2>

                  <div class="table-responsive">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="th-sm">Name</th>
                          <th class="th-sm">Description</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="text-nowrap">
                            <code class="highlighter-rouge">show.bs.modal</code>
                          </td>
                          <td>
                            This event fires immediately when the show instance method is called. If
                            caused by a click, the clicked element is available as the relatedTarget
                            property of the event.
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </section>
                <!--Section: Events-->
              </section>
              <!--Section: API content-->
            </div>
            <!--Grid column-->

            <!--Grid column-->
            <div class="col-md-2 mb-4">
              <!-- Table of content -->
              <nav id="table-of-content">
                <ul>
                  <li><a href="#section-usage">Usage</a></li>
                  <li><a href="#section-options">Options</a></li>
                  <li><a href="#section-methods">Methods</a></li>
                  <li><a href="#section-events">Events</a></li>
                </ul>
              </nav>
              <!-- Table of content -->
            </div>
            <!--Grid column-->
          </div>
          <!--Grid row-->
        </div>
        <!-- API panel -->
      </div>
      <!-- Panels -->
    </div>

    <!-- PRISM -->
    <script type="text/javascript" src="../../dev/js/new-prism.js"></script>
    <!-- MDB SNIPPET -->
    <script type="text/javascript" src="../../dev/js/dist/mdbsnippet.min.js"></script>
    <!-- MDB -->
    <script type="text/javascript" src="../../js/mdb.min.js"></script>
    <!-- Custom scripts -->
    <script type="text/javascript"></script>
  </body>
</html>