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

user_1420197 0
Viewed 2227

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?

twitter-bootstrap-4 bootstrap-4 twitter-bootstrap css html
1 Answers

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.

user_89188930
Related