Few tricks to know before continue to styles and variations.


Change the UI and colors with several utility classes.



Few more inline navigation types

In Page Navigation

A component which is fixed to one side of your page and can scroll to a section by selecting it.

Add the following code to the end of your HTML file (after footer), and don't forget to add id attribute to your sections. You can add nav-page-left class to the .nav-page element to place the navigation at the left side of the page. Please note that you can't have more than one .nav-page in your page.

You can change offset of navigation change by adding a data-spy-offset="300" to your .nav-page. Default value is 200.

<ul class="nav-page">
  <li class="nav-item">
    <a class="nav-link active" href="#basics" title="Basic"></a>
  <li class="nav-item">
    <a class="nav-link" href="#styles" title="Styles"></a>
  <li class="nav-item">
    <a class="nav-link" href="#variations" title="Variations"></a>
  <li class="nav-item">
    <a class="nav-link" href="#in-page" title="In Page Navigation"></a>