JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://bootswatch.com/spacelab/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">
        <i class="fa fa-globe fa-lg fa-fw"></i>
        <abbr title="Texas Department of Agriculture">TDA</abbr>
        <small>Livestock Exports</small>
      </a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <!-- <li>
          <a id="navNew" href="#">
            <span class="glyphicon glyphicon-file" aria-hidden="true"></span> New Reservation
          </a>
        </li> -->
        
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            Reservations <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li>
              <a href="#">
                <i class="fa fa-files-o fa-fw" aria-hidden="true"></i>
                My Reservations
                <span class="sr-only"> (current)</span>
              </a>
           ...

SCSS

$footer-height: 50px;

html {
  position: relative;
  min-height: 100%;
}

body {
  padding-top: 70px;
  /* Margin bottom by footer height */
  margin-bottom: $footer-height;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: $footer-height;
  background-color: #f5f5f5;
}

.footer .navbar {
  height: $footer-height;
}

.footer > .container,
.footer > .container-fluid {
  padding-right: 15px;
  padding-left: 15px;
}

.wrap-text { overflow-wrap: break-word; }

.navbar-login {
  width: 305px;
  padding: 10px;
  padding-bottom: 0px;
}

.navbar-login-session { padding: 0 10px; }

.icon-size { font-size: 87px; }

.navbar-nav > li > .dropdown-menu .dropdown-menu-footer {
  background-color: gainsboro;
  padding: 9px 0;
  margin-bottom: -5px;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: solid 1px darkgray;
}

.panel-heading .form-group { margin-bottom: 0; }

JavaScript

$(function () {
  $('[data-toggle="popover"]').popover()
})