In the Twitter Bootstrap documentation, which element is utilized for the sidebar?

I'm curious about the most efficient method for creating a sidebar like this using Bootstrap 4.

https://i.sstatic.net/3eKwN.png

From what I can see, it appears to be a custom component designed specifically for the documentation page, rather than a built-in feature of the framework. However, I could be mistaken.

<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 approach I've come up with is something similar to this:

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

However, I believe there must be a more effective way to achieve this.

What is the proper technique for constructing a sidebar or table of contents like this using Bootstrap 4?

Answer №1

Below is a straightforward navigation sidebar with content positioned on the right side:

<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>

We're essentially creating a layout where the navigation takes up 25% (3/12) of the screen and the remaining space is used for content.

If you prefer the navigation to stack vertically on smaller screens, you can replace col-3 with col-sm-3. In this scenario, the navigation will stack below the sm breakpoint.


To learn more about vertical navigations, visit this link, and for information on the grid system, check out this resource.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the purpose of including a viewport meta tag on my website if I already have CSS media queries in place?

As someone who is just starting out with building websites, I have been delving into the world of meta tags. However, even after conducting thorough research, I am still unsure about the necessity of a meta viewport tag when I am already utilizing CSS me ...

Converting an HTML page into a JSON object by scraping it

Is there a way to convert an HTML page into a JSON object using web scraping? Here is the content of the page: <html><head><title>Index</title><meta charset="UTF-8"></head><body><div><p>[ <a href ...

positioning the cursor at the end of a content-editable div

When working with a contenteditable div, I encountered several issues specific to FireFox. To address these problems, I found that appending a br tag to the end of the div was necessary. <div id="testDiv" contentEditable="true"> Hey, click the butt ...

What strategies can I use to ensure that the navigation bar is responsive when viewed on a

Check out my CSS file here for the navigation styling. See the screenshot of my HTML file showcasing the navigation panel here. I'm seeking assistance in making my navigation responsive on all mobile devices, as it is currently not functioning prope ...

The optimal method for loading CSS and Javascript from an ajax response within a JavaScript function - Ensuring cross-browser compatibility

I am in a situation where I need jQuery to make sense of an ajax response, but due to latency reasons, I cannot load jQuery on page load. My goal is to be able to dynamically load javascipt and css whenever this ajax call is made. After reading numerous a ...

Adjusting the size of the iframe to match the dimensions of the window

Is there a way to make the iframe automatically fill up the entire space? For example, only opens the iframe up to half of the window in Mozilla Firefox and IE6. How can I ensure that it takes the maximum size of the screen? Are there any CSS or JavaScr ...

Retrieve information from an HTML form

Currently, I have a piece of Javascript that fetches the HTML for a form from the server using an XMLHttpRequest and then displays the form on the page. I am looking for a solution to extract the data that would be sent via POST if the form were submitted ...

Having trouble displaying API JSON data in a Vue.js table component

In my HTML file, I have implemented fetching data from an API and displaying it in a table successfully. Now, I am trying to convert the HTML file to use Vue.js, but encountering some issues. Despite being able to fetch data from the API with Vue, the tab ...

The background-color of a single child within an absolutely positioned element in Chrome may not be displayed if the element has a z-index and overflow scrolling

This test page has been created to showcase the issue: <html> <head> <style> .panel { position: absolute; width: 326px; max-height: 200px; overflow: scroll; z-index: 1000; } .item-container { width: 100%; list-style: none; ...

Tips for removing empty space caused by the iPhone notch on your webpage

Hey there, I'm struggling to remove the blank space on my iPhone with a notch at the top of the screen. Do you have any advice on how to change the background color from the default white? My website is live and you can check it out at . I've att ...

Accessing CSS content from a bundle within the code of an ASP.NET MVC website

I have a website that utilizes bootstrap along with a customized bootstrap theme. The website is designed to send notification emails to its users upon certain actions being triggered. For these notification emails, I want the content to be in well-format ...

"JQuery event handlers not functioning as expected: .click and .on failing

For some time now, I've been facing this issue and I'm at a loss trying to figure it out. I have attempted various solutions such as using .click(), .on(), .delegate, and even utilizing .find() to locate the specific element causing the problem. ...

Tips for inserting a PHP array into an email communication

I have a question regarding sending emails through PHP. How can I include PHP arrays in the message section of an email? Here is a simple array that I created and attempted to include in the email, but it seems incorrect as I couldn't find any releva ...

Rapid processing of JavaScript upon page load

I recently implemented a dark mode feature on my WordPress site. Here are the four modes I included: 1- Automatically based on user's system settings 2- Light mode 3- Semi-lit mode 4- Dark mode The implementation is in place and functioning perf ...

Animations and transitions for cards

import Section from '@/components/section' import {Card, CardHeader, CardBody, CardFooter, Divider, Link, Image, Button} from "@nextui-org/react"; import { CSSProperties, useState } from 'react'; const Index = () => { c ...

What is the best way to launch a Popup window that spans from the top to the bottom of the screen?

I'm attempting to create a popup window that stretches from the top of the screen to the "applications" bar in Windows. Here's the code I'm using: function windowOpener(windowHeight, windowWidth, windowName, windowUri) { var windowHeight = ...

Enhanced Compatibility of HTML5/CSS3 Modal Box with Internet Explorer

I'm experimenting with HTML5/CSS3 for the first time and have implemented a cool little link to display a dialog (modal) on one of my web pages. While this works perfectly in Chrome/Firefox, it unfortunately doesn't function properly in Internet ...

Creating tailored output data from a single table

Can you please assist me with a problem I am facing in generating output data using PHP and MySQL? Below is an image of my table: https://i.stack.imgur.com/zaieZ.png I would like the output to be displayed to the user in the following format: 1. Account ...

Replacing the content of li elements

I have come up with a code snippet that generates li elements with input values after submitting the form. However, there is an issue where if you start typing in the input field again, it will overwrite all existing li elements. import './App.css&apo ...

In HTML, discover a sneaky way to conceal the video progress bar

I'm having trouble using webkit and it's not working for me #videoP::-webkit-progress-value { display: none; } #videoP::-webkit-progress-bar { display: none; } This is the code I have for my video in HTML <video id="videoP&quo ...