What component is used in the Twitter Bootstrap's docs for sidebar?

Question

I'm wondering what is the easiest way to build this kind of sidebar with Bootstrap 4.

To me, it looks like a custom component they built for the docs page, not being included in the framework. I'm not sure if I'm right.

<ul class="nav bd-sidenav">
  <li class="active bd-sidenav-active">
    <a href="/docs/4.0/getting-started/introduction/">
      Introduction
    </a>
  </li>
  <li>
    <a href="/docs/4.0/getting-started/download/">
      Download
    </a>
  </li>
   ...
</ul>

The closest I got was by creating something like this:

<ul class="nav">
  <li class="w-100">
    <a href="#">
      Item 1
    </a>
  </li>
   ...
</ul>

But I think there should be a better way.

What is the right way to build such a sidebar/table of contents with Bootstrap 4?

Answer 1

Here's a simple nav sidebar with content at the right:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row">
    <div class="col-3">
      <nav class="nav flex-column">
        <a class="p-1 nav-link active" href="#">Active</a>
        <a class="p-1 nav-link" href="#">Link</a>
        <a class="p-1 nav-link" href="#">Link</a>
        <a class="p-1 nav-link disabled" href="#">Disabled</a>
      </nav>
    </div>
    <div class="col bg-light">
      Here's your content! Added class bg-light for a light gray background.
    </div>
  </div>
</div>

Basically we're making a grid with the nav taking 1/4th (3/12) of the screen and the content using the rest of the screen.

If you want the nav to stack on smaller screens, you can replace col-3 with col-sm-3 for example. In this case the nav will stack under the sm breakpoint.

---

You can read more about vertical navs here, and the grid system here.