<div class="alert alert-success" role="alert">Success!</div>
<div class="alert alert-info" role="alert">Information</div>
<div class="alert alert-warning" role="alert">Warning!</div>
<div class="alert alert-danger" role="alert">Danger!</div>

<div class="alert alert-success alert-dismissible" role="alert">
  <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  Success!
</div>

<ol class="breadcrumb">
  <li><a href="#/manage">Manage</a></li>
  <li><a href="#/manage/hosts">Hosts</a></li>
  <li><a href="#/manage/hosts/1">topaxi.ch</a></li>
  <li><a href="#/manage/hosts/1/services">Services</a></li>
</ol>

<ol class="breadcrumb breadcrumb--first-mobileonly">
  <li><a href="#/manage">Manage</a></li>
  <li><a href="#/manage/hosts">Hosts</a></li>
  <li><a href="#/manage/hosts/1">topaxi.ch</a></li>
  <li><a href="#/manage/hosts/1/services">Services</a></li>
</ol>

<div class="card" style="max-width:400px">
  <img class="card-img-top" src="http://lorempixel.com/400/200" alt="Card image">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <ul class="list-group list-group--flush">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-block">
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<div class="card" style="max-width:400px">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <h6 class="card-subtitle text-muted">Support card subtitle</h6>
  </div>
  <img src="http://lorempixel.com/398/200" alt="Card image">
  <div class="card-block">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

<div class="card card--inverse card--primary text-center">
  <div class="card-block">
    <blockquote class="card-blockquote">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
      <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
    </blockquote>
  </div>
</div>

<div class="card card--inverse">
  <div class="card-block">
    <h3 class="card-title">Special title treatment</h3>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

<div class="card text-center">
  <div class="card-header">
    Featured
  </div>
  <div class="card-block">
    <h4 class="card-title">Special title treatment</h4>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

<div class="list-group">
  <div class="list-group-item">Something</div>
  <div class="list-group-item active">An active something</div>
  <div class="list-group-item">Something</div>
  <div class="list-group-item" disabled="disabled">A disabled Something</div>
</div>

<div class="card" style="max-width:400px">
  <div class="card-block">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
  <div class="list-group list-group--flush">
    <div class="list-group-item">Something</div>
    <div class="list-group-item active">An active something</div>
    <div class="list-group-item">Something</div>
    <div class="list-group-item" disabled="disabled">A disabled Something</div>
  </div>
</div>

<button class="btn btn-primary" onclick="document.getElementById('example-modal').classList.add('modal--visible')">
  Show Modal
</button>
<div class="modal" id="example-modal">
  <div class="modal-dialog">
    <div class="modal-header">
      Example Modal Title
      <button type="button" class="close" aria-label="Close" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>
        Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
        Maecenas justo orci, rutrum et vestibulum at, consectetur id ex. Aliquam
        erat volutpat. Mauris eleifend sed odio eu lacinia. Donec non dolor
        tempus, finibus velit vel, <a href="#">consequat justo</a>. Mauris at
        nisl metus. Donec sit amet lacus tincidunt, pulvinar velit sollicitudin,
        lacinia urna. Praesent nisi dolor, mollis convallis pellentesque non,
        blandit quis ligula. Nam sed purus lacinia, blandit felis et, vehicula
        nisi. Donec consequat augue est, mattis fringilla ipsum facilisis eget.
      </p>
      <p>
        Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
        Maecenas justo orci, rutrum et vestibulum at, consectetur id ex. Aliquam
        erat volutpat. Mauris eleifend sed odio eu lacinia. Donec non dolor
        tempus, finibus velit vel, <a href="#">consequat justo</a>. Mauris at
        nisl metus. Donec sit amet lacus tincidunt, pulvinar velit sollicitudin,
        lacinia urna. Praesent nisi dolor, mollis convallis pellentesque non,
        blandit quis ligula. Nam sed purus lacinia, blandit felis et, vehicula
        nisi. Donec consequat augue est, mattis fringilla ipsum facilisis eget.
      </p>
      <p>
        Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
        Maecenas justo orci, rutrum et vestibulum at, consectetur id ex. Aliquam
        erat volutpat. Mauris eleifend sed odio eu lacinia. Donec non dolor
        tempus, finibus velit vel, <a href="#">consequat justo</a>. Mauris at
        nisl metus. Donec sit amet lacus tincidunt, pulvinar velit sollicitudin,
        lacinia urna. Praesent nisi dolor, mollis convallis pellentesque non,
        blandit quis ligula. Nam sed purus lacinia, blandit felis et, vehicula
        nisi. Donec consequat augue est, mattis fringilla ipsum facilisis eget.
      </p>
      <p>
        Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
        Maecenas justo orci, rutrum et vestibulum at, consectetur id ex. Aliquam
        erat volutpat. Mauris eleifend sed odio eu lacinia. Donec non dolor
        tempus, finibus velit vel, <a href="#">consequat justo</a>. Mauris at
        nisl metus. Donec sit amet lacus tincidunt, pulvinar velit sollicitudin,
        lacinia urna. Praesent nisi dolor, mollis convallis pellentesque non,
        blandit quis ligula. Nam sed purus lacinia, blandit felis et, vehicula
        nisi. Donec consequat augue est, mattis fringilla ipsum facilisis eget.
      </p>
      <p>
        Curabitur ullamcorper velit et nisl fermentum <a href="#">molestie</a>.
        Maecenas justo orci, rutrum et vestibulum at, consectetur id ex. Aliquam
        erat volutpat. Mauris eleifend sed odio eu lacinia. Donec non dolor
        tempus, finibus velit vel, <a href="#">consequat justo</a>. Mauris at
        nisl metus. Donec sit amet lacus tincidunt, pulvinar velit sollicitudin,
        lacinia urna. Praesent nisi dolor, mollis convallis pellentesque non,
        blandit quis ligula. Nam sed purus lacinia, blandit felis et, vehicula
        nisi. Donec consequat augue est, mattis fringilla ipsum facilisis eget.
      </p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        Close
      </button>
    </div>
  </div>
</div>

<button class="btn btn-primary" onclick="document.getElementById('example-modal-small').classList.add('modal--visible')">
  Show Small Modal
</button>
<button class="btn btn-primary" onclick="document.getElementById('example-modal-large').classList.add('modal--visible')">
  Show Large Modal
</button>
<button class="btn btn-primary" onclick="document.getElementById('example-modal-fullscreen').classList.add('modal--visible')">
  Show Fullscreen Modal
</button>
<button class="btn btn-primary" onclick="document.getElementById('example-modal-auto').classList.add('modal--visible')">
  Show Auto Modal
</button>

<div class="modal" id="example-modal-small">
  <div class="modal-dialog modal-dialog--small">
    <div class="modal-header">
      Small Modal Title
      <button type="button" class="close" aria-label="Close" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Small modal content!</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        Close
      </button>
    </div>
  </div>
</div>

<div class="modal" id="example-modal-large">
  <div class="modal-dialog modal-dialog--large">
    <div class="modal-header">
      Large Modal Title
      <button type="button" class="close" aria-label="Close" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Large modal content!</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        Close
      </button>
    </div>
  </div>
</div>

<div class="modal" id="example-modal-fullscreen">
  <div class="modal-dialog modal-dialog--fullscreen">
    <div class="modal-header">
      Fullscreen Modal Title
      <button type="button" class="close" aria-label="Close" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Fullscreen modal content!</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        Close
      </button>
    </div>
  </div>
</div>

<div class="modal" id="example-modal-auto">
  <div class="modal-dialog modal-dialog--auto">
    <div class="modal-header">
      Auto Modal Title
      <button type="button" class="close" aria-label="Close" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      <p>Auto modal content!</p>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" onclick="this.parentNode.parentNode.parentNode.classList.remove('modal--visible')">
        Close
      </button>
    </div>
  </div>
</div>

<nav class="nav-side">
  <header class="nav-side-header">
    <button class="nav-toggle nav-side-toggle" onclick="this.parentNode.parentNode.classList.toggle('nav-side--expand')">
      <span class="nav-toggle-icon"></span>
    </button>
    <a href="#">
      <div class="nav-side-header-logo"></div>
      <div class="nav-side-header-title">Foobar</div>
    </a>
  </header>
  <section class="nav-side-body">
    <ul class="nav-side-list">
      <li class="nav-side-list-header">Settings</li>
      <li class="nav-side-list-item">
        <a href="#">
          <i class="fa fa-user"></i>
          Users
        </a>
      </li>
      <li class="nav-side-list-item">
        <a href="#">
          <i class="fa fa-users"></i>
          Teams
        </a>
      </li>
    </ul>
  </section>
</nav>
<main class="page-main">
  <!-- content -->
</main>
<div class="page-main-overlay" onclick="this.previousElementSibling.previousElementSibling.classList.toggle('nav-side--expand')"></div>

<nav class="nav-top">
  <header class="nav-top-header">
    <button class="nav-toggle nav-top-toggle" onclick="this.parentNode.parentNode.classList.toggle('nav-top--expand')">
      <span class="nav-toggle-icon"></span>
    </button>
    <a href="#">
      <div class="nav-top-header-logo"></div>
      <div class="nav-top-header-title">Foobar</div>
    </a>
  </header>
  <section class="nav-top-body">
    <ul class="nav-top-list">
      <li class="nav-top-list-item">
        <a href="#">
          <i class="fa fa-user"></i>
          Users
        </a>
      </li>
      <li class="nav-top-list-item">
        <a href="#">
          <i class="fa fa-users"></i>
          Teams
        </a>
      </li>
    </ul>
    <ul class="nav-top-list nav-top-list--right">
      <li class="nav-top-list-item">
        <a href="#">
          <i class="fa fa-envelope"></i>
          Messages
        </a>
      </li>
      <li class="nav-top-list-item">
        <a href="#">
          <i class="fa fa-power-off"></i>
          Logout
        </a>
      </li>
    </ul>
  </section>
</nav>

<nav>
  <ul class="pagination">
    <li class="previous disabled">
      <a href="#" aria-label="Previous">
        <span aria-hidden="true">&laquo;</span>
      </a>
    </li>
    <li class="active"><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li><a href="#">3</a></li>
    <li><a href="#">4</a></li>
    <li><a href="#">5</a></li>
    <li class="next">
      <a href="#" aria-label="Next">
        <span aria-hidden="true">&raquo;</span>
      </a>
    </li>
  </ul>
</nav>

<div class="page-viewport">
  <nav class="nav-side">
    <header class="nav-side-header">
      <button class="nav-toggle nav-side-toggle" onclick="this.parentNode.parentNode.classList.toggle('nav-side--expand')">
        <span class="nav-toggle-icon"></span>
      </button>
      <a href="#">
        <div class="nav-side-header-logo"></div>
        <div class="nav-side-header-title">Foobar</div>
      </a>
    </header>
    <section class="nav-side-body">
      <ul class="nav-side-list">
        <li class="nav-side-list-header">Settings</li>
        <li class="nav-side-list-item">
          <a class="active" href="#">
            <i class="fa fa-user"></i>
            Users
          </a>
        </li>
        <li class="nav-side-list-item">
          <a href="#">
            <i class="fa fa-users"></i>
            Teams
          </a>
        </li>
      </ul>
    </section>
    <footer class="nav-side-footer">
      <button class="nav-hide btn" type="button" title="Toggle navigation" onclick="
        this.parentNode.parentNode.classList.toggle('nav-side--autohide')
        this.firstChild.classList.toggle('fa-chevron-left')
        this.firstChild.classList.toggle('fa-chevron-right')
      "><i class="fa fa-chevron-left"></i></button>
    </footer>
  </nav>
  <main class="page-main">
    <nav class="nav-side nav-side--sub">
      <header class="nav-side-header">
        <div class="nav-side-header-title">Manage</div>
      </header>
      <section class="nav-side-body">
        <ul class="nav-side-list">
          <li class="nav-side-list-item">
            <a href="#">
              Hosts
            </a>
          </li>
          <li class="nav-side-list-item">
            <a href="#">
              Host Groups
            </a>
          </li>
        </ul>
        <ul class="nav-side-list">
          <li class="nav-side-list-item">
            <a class="active" href="#">
              Commands
            </a>
          </li>
          <li class="nav-side-list-item">
            <a href="#">
              Services
            </a>
          </li>
          <li class="nav-side-list-item">
            <a href="#">
              Service Groups
            </a>
          </li>
        </ul>
      </section>
    </nav>
    <section class="page-content">
      <!-- content -->
    </section>
  </main>
  <div class="page-main-overlay" onclick="this.previousElementSibling.previousElementSibling.classList.toggle('nav-side--expand')"></div>
</div>