<!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>