O'Reilly logo

Bootstrap 4 – Responsive Web Design by Jason Marah, Benjamin Jakobus, Matt Lambert, Silvio Moreto

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Creating a settings page

Moving on with our web app example, it is time to create a settings page for the application. We have already created a link for this in the navigation bar, inside the button group. Do you remember?

So, in the same folder as that of the web app HTML file, create another one named settings.html and update the link at the navigation bar:

<div id="nav-options" class="btn-group pull-right hidden-xs">
  <button type="button" class="btn btn-default dropdown-toggle thumbnail" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <img src="imgs/jon.png">
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Profile</a></li>
    <li><a href="settings.html">Setting</a></li> <li role="separator" class="divider"></li> <li><a ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required