<header>

    <!--Navbar-->

    <nav class="navbar navbar-expand-lg navbar-dark primary-color">

​

      <!-- Navbar brand -->

      <a class="navbar-brand" href="#">Navbar</a>

​

      <!-- Collapse button -->

      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav"

        aria-controls="basicExampleNav" aria-expanded="false" aria-label="Toggle navigation">

        <span class="navbar-toggler-icon"></span>

      </button>

​

      <!-- Collapsible content -->

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

​

        <!-- Links -->

        <ul class="navbar-nav mr-auto">

          <li class="nav-item active">

            <a class="nav-link" href="#">Home

              <span class="sr-only">(current)</span>

            </a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#first">First Section</a>

          </li>

          <li class="nav-item">

            <a class="nav-link" href="#second">Second Section</a>

          </li>

​

          <!-- Dropdown -->

          <li class="nav-item dropdown">

            <a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"

              aria-expanded="false">Dropdown</a>

            <div class="dropdown-menu dropdown-primary" aria-labelledby="navbarDropdownMenuLink">

              <a class="dropdown-item" href="#">Action</a>

              <a class="dropdown-item" href="#">Another action</a>

              <a class="dropdown-item" href="#">Something else here</a>

            </div>

          </li>

​

        </ul>

        <!-- Links -->

​

        <form class="form-inline">

          <div class="md-form my-0">

            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">

          </div>

        </form>

      </div>

      <!-- Collapsible content -->

​

    </nav>

    <!--/.Navbar-->

  </header>

​

  <main>

    <div class="container mt-5">

      <section id="first">

        <button type="button" class="btn btn-primary waves-effect waves-light" data-toggle="modal"

          data-target="#removeBackdropModal">

          Launch modal

        </button>

​

        <input type="button" value="Other button">

​

        <div class="modal fade" id="removeBackdropModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"

          data-backdrop="false" aria-hidden="true">

          <div class="modal-dialog modal-side modal-full-height modal-left" role="document" data-backdrop="false">

​

            <!-- Modal content -->

            <div class="modal-content">

              <!-- Modal header -->

              <div class="modal-header">

                <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>

                <button type="button" class="close" data-dismiss="modal" aria-label="Close">

                  <span aria-hidden="t" rue="">×</span>

                </button>

              </div>

              <!-- Modal body -->

              <div class="modal-body">

                ...

              </div>

              <!-- Modal footer -->

              <div class="modal-footer">

                <button type="button" class="btn btn-outline-primary waves-effect waves-light"

                  data-dismiss="modal">Close</button>

                <button type="button" class="btn btn-primary waves-effect waves-light">Save</button>

              </div>

            </div>

            <!-- Modal content -->

          </div>

        </div>

        <div class="row">

          <div class="col-md-8">

            <p>

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum vehicula urna et imperdiet.

              Morbi

              venenatis arcu tortor, vitae luctus neque finibus in. Vestibulum facilisis facilisis sodales. Sed accumsan

              purus ut odio blandit, sit amet vehicula augue accumsan. Integer feugiat tortor vitae augue lacinia

              sollicitudin. Etiam efficitur lorem vel tempus convallis. Proin at sem vestibulum, consectetur justo in,

              imperdiet lacus. Fusce eget leo sed sapien ullamcorper malesuada ut sed elit. Suspendisse potenti. Donec

              at

              odio varius nunc tempus finibus eget vitae eros. Mauris nec neque id arcu dictum consequat. Morbi arcu

              urna,

              aliquam non vulputate ut, consectetur et leo. Etiam odio sapien, cursus ut scelerisque et, facilisis quis

              sapien. Vestibulum consequat est vitae urna pharetra, eu ultricies mi imperdiet. Fusce in justo sit amet

              nisl dapibus accumsan sit amet sodales enim. Cras luctus euismod accumsan.

​

              Suspendisse quis est justo. Phasellus ut commodo magna. Sed varius tincidunt sapien, lobortis vehicula

              justo

              dapibus eu. Aliquam sit amet convallis massa, quis vulputate urna. Curabitur vel feugiat nisl. Lorem ipsum

              dolor sit amet, consectetur adipiscing elit. Nunc porttitor, ligula eu iaculis efficitur, lacus elit

              vestibulum nulla, ut hendrerit ex tellus at justo. Proin a ex consectetur, auctor nisi nec, varius libero.

              Vivamus semper erat urna, et hendrerit purus cursus id. Praesent congue viverra varius. Vivamus sodales at

              dui non tempus. Mauris rutrum odio id leo bibendum, pharetra auctor orci congue.

​

              Pellentesque id commodo nulla. Vestibulum fermentum aliquam turpis, eget finibus augue luctus a.

              Pellentesque in enim ac dolor interdum facilisis vestibulum eget ligula. Duis tellus massa, accumsan at

              imperdiet in, accumsan at tortor. Integer at pulvinar odio. Aliquam pellentesque leo nec enim vestibulum

              ullamcorper. Mauris lacinia mi eu erat gravida, vulputate volutpat elit finibus. Maecenas non tellus dui.

              Etiam eu euismod libero.

​

              Mauris feugiat iaculis erat in maximus. Nam aliquet lectus ac vestibulum iaculis. Etiam a magna

              condimentum,

              consequat elit convallis, feugiat mauris. Maecenas vulputate vitae dui id dapibus. Donec sed ultricies

              sapien, iaculis aliquet lacus. Mauris tincidunt libero vulputate auctor bibendum. Cras sit amet neque nec

              mauris laoreet mattis. Morbi pellentesque mauris vitae nulla blandit semper. Aliquam quis metus odio.

              Praesent cursus, nibh fringilla bibendum interdum, ligula magna sagittis mi, in rutrum lectus sapien eu

              quam. Curabitur justo nibh, tempor eu sollicitudin a, tempus at nunc. Donec placerat facilisis eros.

​

              Quisque eu urna tellus. Suspendisse non lorem nec eros varius malesuada ac et neque. Ut tortor orci,

              luctus

              in lorem ut, laoreet efficitur urna. Aliquam vulputate justo sem, non mollis dolor pharetra ac.

              Suspendisse

              tempus quam nisi, a ullamcorper ante vestibulum vel. Ut blandit ut nulla nec lacinia. Nunc elementum

              fermentum diam, sed finibus dui egestas sed. Maecenas fringilla est at pellentesque pellentesque. Quisque

              sollicitudin nisl id pulvinar luctus. Aenean pellentesque aliquet neque at facilisis. Cras consectetur

              maximus congue. In eu lobortis libero, a consectetur mi. Duis luctus scelerisque pharetra. Vivamus

              iaculis,

              leo vel convallis elementum, felis sem tempus justo, eget luctus risus metus eu dolor. Duis posuere nisi

              in

              luctus tincidunt.

            </p>

          </div>

        </div>

      </section>

      <hr my-5>

      <section id="second">

        <div class="row">

          <div class="col-md-8">

            <p>

              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum vehicula urna et imperdiet.

              Morbi

              venenatis arcu tortor, vitae luctus neque finibus in. Vestibulum facilisis facilisis sodales. Sed accumsan

              purus ut odio blandit, sit amet vehicula augue accumsan. Integer feugiat tortor vitae augue lacinia

              sollicitudin. Etiam efficitur lorem vel tempus convallis. Proin at sem vestibulum, consectetur justo in,

              imperdiet lacus. Fusce eget leo sed sapien ullamcorper malesuada ut sed elit. Suspendisse potenti. Donec

              at

              odio varius nunc tempus finibus eget vitae eros. Mauris nec neque id arcu dictum consequat. Morbi arcu

              urna,

              aliquam non vulputate ut, consectetur et leo. Etiam odio sapien, cursus ut scelerisque et, facilisis quis

              sapien. Vestibulum consequat est vitae urna pharetra, eu ultricies mi imperdiet. Fusce in justo sit amet

              nisl dapibus accumsan sit amet sodales enim. Cras luctus euismod accumsan.

​

              Suspendisse quis est justo. Phasellus ut commodo magna. Sed varius tincidunt sapien, lobortis vehicula

              justo

              dapibus eu. Aliquam sit amet convallis massa, quis vulputate urna. Curabitur vel feugiat nisl. Lorem ipsum

              dolor sit amet, consectetur adipiscing elit. Nunc porttitor, ligula eu iaculis efficitur, lacus elit

              vestibulum nulla, ut hendrerit ex tellus at justo. Proin a ex consectetur, auctor nisi nec, varius libero.

              Vivamus semper erat urna, et hendrerit purus cursus id. Praesent congue viverra varius. Vivamus sodales at

              dui non tempus. Mauris rutrum odio id leo bibendum, pharetra auctor orci congue.

​

              Pellentesque id commodo nulla. Vestibulum fermentum aliquam turpis, eget finibus augue luctus a.

              Pellentesque in enim ac dolor interdum facilisis vestibulum eget ligula. Duis tellus massa, accumsan at

              imperdiet in, accumsan at tortor. Integer at pulvinar odio. Aliquam pellentesque leo nec enim vestibulum

              ullamcorper. Mauris lacinia mi eu erat gravida, vulputate volutpat elit finibus. Maecenas non tellus dui.

              Etiam eu euismod libero.

​

              Mauris feugiat iaculis erat in maximus. Nam aliquet lectus ac vestibulum iaculis. Etiam a magna

              condimentum,

              consequat elit convallis, feugiat mauris. Maecenas vulputate vitae dui id dapibus. Donec sed ultricies

              sapien, iaculis aliquet lacus. Mauris tincidunt libero vulputate auctor bibendum. Cras sit amet neque nec

              mauris laoreet mattis. Morbi pellentesque mauris vitae nulla blandit semper. Aliquam quis metus odio.

              Praesent cursus, nibh fringilla bibendum interdum, ligula magna sagittis mi, in rutrum lectus sapien eu

              quam. Curabitur justo nibh, tempor eu sollicitudin a, tempus at nunc. Donec placerat facilisis eros.

​

              Quisque eu urna tellus. Suspendisse non lorem nec eros varius malesuada ac et neque. Ut tortor orci,

              luctus

              in lorem ut, laoreet efficitur urna. Aliquam vulputate justo sem, non mollis dolor pharetra ac.

              Suspendisse

              tempus quam nisi, a ullamcorper ante vestibulum vel. Ut blandit ut nulla nec lacinia. Nunc elementum

              fermentum diam, sed finibus dui egestas sed. Maecenas fringilla est at pellentesque pellentesque. Quisque

              sollicitudin nisl id pulvinar luctus. Aenean pellentesque aliquet neque at facilisis. Cras consectetur

              maximus congue. In eu lobortis libero, a consectetur mi. Duis luctus scelerisque pharetra. Vivamus

              iaculis,

              leo vel convallis elementum, felis sem tempus justo, eget luctus risus metus eu dolor. Duis posuere nisi

              in

              luctus tincidunt.

            </p>

          </div>

        </div>

        <div class="row mt-5">

          <div class="col-md-12">

            <!-- Info message -->

            <a class="btn btn-info" onclick="toastr.info('Hi! I am info message.');">Info message</a>

            <!-- Warning message -->

            <a class="btn btn-warning" onclick="toastr.warning('Hi! I am warning message.');">Warning message</a>

            <!-- Success message -->

            <a class="btn btn-success" onclick="toastr.success('Hi! I am success message.');">Success message</a>

            <!-- Error message -->

            <a class="btn btn-danger" onclick="toastr.error('Hi! I am error message.');">Error message</a>

          </div>

        </div>

      </section>

    </div>

  </main>