<header>

  <!-- Navbar -->

  <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top">

    <div class="container-fluid">

      <button

              class="navbar-toggler"

              type="button"

              data-mdb-toggle="collapse"

              data-mdb-target="#navbarExample01"

              aria-controls="navbarExample01"

              aria-expanded="false"

              aria-label="Toggle navigation"

      >

        <i class="fas fa-bars"></i>

      </button>

      <div class="collapse navbar-collapse" id="navbarExample01">

        <ul class="navbar-nav me-auto mb-2 mb-lg-0">

          <li class="nav-item active">

            <a class="nav-link" aria-current="page" href="#">Home</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Features</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">Pricing</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#">About</a>

          </li>

        </ul>

      </div>

    </div>

  </nav>

  <!-- Navbar -->

​

</header>

<main style="padding-bottom:100px;">

<p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p><p>11</p><p>12</p><p>13</p><p>14</p><p>15</p><p>16</p><p>17</p><p>18</p><p>19</p><p>20</p><p>21</p><p>22</p><p>23</p><p>24</p><p>25</p><p>26</p><p>27</p><p>28</p><p>29</p><p>30</p>

</main>

<footer class="text-center text-white fixed-bottom" style="background-color: #21081a;">

  <!-- Grid container -->

  <div class="container p-4"></div>

  <!-- Grid container -->

​

  <!-- Copyright -->

  <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.2);">

    © 2020 Copyright:

    <a class="text-white" href="https://mdbootstrap.com/">MDBootstrap.com</a>

  </div>

  <!-- Copyright -->

</footer>