Category: HTML

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to customize navs with Bootstrap 5.

Using Dropdowns

We can add dropdowns to our navs.

For example, we can write:

<ul class="nav nav-tabs">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">action 1</a></li>  
      <li><a class="dropdown-item" href="#">action 2</a></li>  
      <li><a class="dropdown-item" href="#">action 3</a></li>  
      <li>  
        <hr class="dropdown-divider">  
      </li>  
      <li><a class="dropdown-item" href="#">actiob 4</a></li>  
    </ul>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

We add a dropdown by adding an li with the dropdown and nav-link classes.

Together, they make the dropdown toggle fit inside the menu.

Then we add our dropdown toggle with the .dropdown-toggle class.

And .dropdown-item class is applied to dropdown items.

We also have .nav-tabs to style the nav as tabs.

Pills with Dropdowns

We can change .nav-tabs to .nav-pills to change the links to display as pills:

<ul class="nav nav-pills">  
  <li class="nav-item">  
    <a class="nav-link active" aria-current="page" href="#">foo</a>  
  </li>  
  <li class="nav-item dropdown">  
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>  
    <ul class="dropdown-menu">  
      <li><a class="dropdown-item" href="#">action 1</a></li>  
      <li><a class="dropdown-item" href="#">action 2</a></li>  
      <li><a class="dropdown-item" href="#">action 3</a></li>  
      <li>  
        <hr class="dropdown-divider">  
      </li>  
      <li><a class="dropdown-item" href="#">actiob 4</a></li>  
    </ul>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link" href="#">bar</a>  
  </li>  
  <li class="nav-item">  
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
  </li>  
</ul>

JavaScript Behavior

We can add tabs that show content when we click on it.

To do that, we write:

<ul class="nav nav-tabs" id="myTab" role="tablist">  
  <li class="nav-item" role="presentation">  
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>  
  </li>  
  <li class="nav-item" role="presentation">  
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>  
  </li>  
  <li class="nav-item" role="presentation">  
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>  
  </li>  
</ul>  
<div class="tab-content" id="myTabContent">  
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.  
  </div>  
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.  
  </div>  
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Sed dui purus, tempor ac consectetur quis, viverra ut tellus. Duis eget venenatis nibh, eget placerat diam. Suspendisse a ex libero. Ut quis turpis tempor sem pharetra ullamcorper sed at metus. In eget nibh orci. Aenean ac nulla nulla. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin eu facilisis felis. Nulla sed risus mattis, tristique odio eu, mattis ex. Morbi aliquet nulla eget vestibulum lobortis. Sed aliquam odio magna, et dictum sapien scelerisque sed. Praesent odio sapien, gravida ac leo quis, ornare placerat nibh. Donec id ex mauris. Nunc ut sapien quis ex malesuada pretium non sed elit. Cras maximus ipsum sed augue sollicitudin, ut scelerisque velit ultrices. Sed rutrum viverra massa in condimentum.  
  </div>  
</div>

to add the tabs.

The nav-item class is applied to the nav items.

And the tab-pane class is applied to the content class.

href is the URL for content. It should match the ID of the tab content divs plus a hash before it.

fade adds a fade effect for transitions.

Conclusion

We can add navs to display content.

The styling can be changed.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add modals with JavaScript with Bootstrap 5.

Scrollable Modal

We can make a modal that lets us scroll the modal body by adding the .modal-dialog-scrollable class:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.
        </p>
        <p>
          Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Vertically Centered

We can use the modal-dialog-centered class to vertically center the modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Using the Grid

We can put the grid inside the modal body.

This way, we can create layouts for our content.

For example, we can write:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div class="modal-body">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-6">.col-md-6</div>
              <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div>
              <div class="col-md-2 ml-auto">.col-md-2 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-md-6 ml-auto">.col-md-6 .ml-auto</div>
            </div>
            <div class="row">
              <div class="col-sm-9">
                Level 1: .col-sm-9
                <div class="row">
                  <div class="col-8 col-sm-6">
                    Level 2: .col-8 .col-sm-6
                  </div>
                  <div class="col-4 col-sm-6">
                    Level 2: .col-4 .col-sm-6
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We put our grid inside the div with the modal-body class.

The content will be size automatically.

Varying Modal Content

We can put a form in the modal body.

For example. we can write:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="modal-message">New post</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="recipient-name" class="col-form-label">Title:</label>
            <input type="text" class="form-control" id="recipient-name">
          </div>
          <div class="mb-3">
            <label for="message-text" class="col-form-label">content:</label>
            <textarea class="form-control" id="message-text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

We put a form inside the modal body.

Conclusion

We can add a modal with scrollable content.

Also, we can put a grid or forms inside the modal body.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add modals with JavaScript with Bootstrap 5.

Modal

Modals are popups that show notification and other content.

It’s placed over everything else in the document and remove scroll from the body.

Clicking on the backdrop will automatically close the modal.

Bootstrap 5 only supports one modal window at a time.

Modals use position: fixed .

The autofocus attribute has no effect in Bootstrap modals.

We can achieve the same effect with JavaScript code by focusing elements when the show.bs.modal event is emitted:

const myModal = document.getElementById('myModal');
const myInput = document.getElementById('myInput');

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

Modal Components

We can add a modal by adding a few classes to our container elements:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal'>
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We add a button to open the modal.

The button has the data-toggle attribute to open the modal with the given selector.

Then in our modal, we have the same ID as the data-toggle value.

Then we have our modal content.

It includes the modal-dialog class to define the modal.

modal-content contains the content.

modal-header has the header.

modal-title has the title.

modal-body has the body.

modal-footer has the footer.

Static Backdrop

The backdrop can be set to static so that it won’t close when we click outside it.

For example, we can write:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

We just add the data-backdrop='static' attribute to disable closing when clicking outside.

Scrolling Long Content

When we have long content, then the scrolling depends on the modal instead of the page:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal">
  Launch modal
</button>

<div class="modal" tabindex="-1" id='modal' data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam at neque orci. In vehicula metus eu euismod rhoncus. Pellentesque pharetra ligula sed efficitur ultricies. Quisque et congue metus, id rutrum purus. Maecenas finibus efficitur mauris, quis varius enim elementum a. Phasellus vel aliquet diam. Proin tincidunt eros pellentesque mauris laoreet, nec ullamcorper magna vulputate. Suspendisse potenti. Nullam lobortis ultricies nunc id vulputate. Curabitur pulvinar, lorem ac tempus lobortis, tortor tortor dignissim enim, quis tempor est lacus ut augue. Sed tincidunt lectus urna, ac aliquet velit suscipit a. Nullam tempus sem id nibh vulputate, nec ultricies lorem porttitor. Sed pharetra lacinia odio non sodales.
        </p>
        <p>
          Mauris ullamcorper ornare dui at bibendum. Duis sed quam ac purus tincidunt aliquet. Suspendisse potenti. Praesent vitae turpis dui. Fusce ut tincidunt est, ut sagittis mi. Sed euismod pharetra pulvinar. Morbi at facilisis quam. Vestibulum sagittis arcu sit amet scelerisque vestibulum. Nulla nisl libero, ornare et facilisis et, tempus sagittis massa. Sed tincidunt metus non ex ornare, eu elementum lorem sagittis. Nam a sapien eleifend, dignissim purus sit amet, ultrices neque. Suspendisse imperdiet purus eu posuere pellentesque. Nulla facilisi.
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Since we have long content, the scroll bar will scroll the modal instead of the page.

Conclusion

We can add modals to display what we want.

The backdrop can close or modal and that can be disabled.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to manipulate navs with JavaScript with Bootstrap 5.

Using Data Attributes

We can add the data-toggle='tab' to add the links to show content when we click it.

For example, we can write:

<ul class="nav nav-tabs" id="tab">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" >Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" >Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" >Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane active" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

  <div class="tab-pane" id="profile"> Nam at neque orci. In vehicula metus eu euismod rhoncus.</div>

  <div class="tab-pane" id="messages">Pellentesque pharetra ligula sed efficitur ultricies. </div>

  <div class="tab-pane" id="settings">Quisque et congue metus, id rutrum purus. </div>
</div>

We have the data-toggle attribute set to tab to make the links open content.

JavaScript

We can add click listeners to tabs with the addEventListener method.

For example, we can write:

const triggerTabList = [...document.querySelectorAll('#myTab a'];
triggerTabList.forEach((triggerEl) => {
  const tabTrigger = new bootstrap.Tab(triggerEl)

  triggerEl.addEventListener('click', (e) => {
    e.preventDefault()
    tabTrigger.show()
  })
})

We create the tab objects with the bootstrap.Tab constructor.

Then we attach click listeners to them with the addEventListener method.

Then we call show inside the click listener callback to show the content.

Fade Effect

We can add a fade effect to each .tab-pane with the .fade class.

For example, we can write:

<ul class="nav nav-tabs" id="tab">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" >Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" >Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages">Messages</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" >Settings</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade active" id="home">Lorem ipsum dolor sit amet, consectetur adipiscing elit. </div>

  <div class="tab-pane fade" id="profile"> Nam at neque orci. In vehicula metus eu euismod rhoncus.</div>

  <div class="tab-pane fade" id="messages">Pellentesque pharetra ligula sed efficitur ultricies. </div>

  <div class="tab-pane fade" id="settings">Quisque et congue metus, id rutrum purus. </div>
</div>

After adding the .fade class, we’ll see the fade effect when we click on the tab links.

In addition to the show method, there’s also the dispose method to destroys an element’s tav.

getInstance gets the tab instance.

Events

Tabs fire a few events.

hide.bs.tab is emitted on the currently active tab when we hide it.

show.bs.tab is emitted on the to be shown tab when we click on it.

hidden.bs.tab is emitted on the previous active tab is we hid that tab.

shown.bs.tab is emitted when we’ve shown the newly active tab.

Conclusion

We can manipulate tabs with JavaScript.

They can be shown or hidden.

And we can listen to various events emitted.

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add scrollspys with list groups and more with Bootstrap 5.

List Group and Scrollspys

We can use list groups as navigation component for scrollspys.

For example, we can write:

<div class='row'>
  <div class='col-3'>
    <div id="list-example" class="list-group">
      <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
      <a class="list-group-item list-group-item-action" href="#list-item-2">Item 2</a>
      <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
      <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
  </div>

<div data-spy="scroll" data-target="#list-example" data-offset="0" class='col-9' style='max-height: 300px; overflow-y: scroll'>
    <h4 id="list-item-1">Item 1</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
    <h4 id="list-item-2">Item 2</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
    <h4 id="list-item-3">Item 3</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
    <h4 id="list-item-4">Item 4</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent tempus turpis augue, aliquam egestas nunc semper sit amet. Vivamus vel euismod eros. Fusce aliquam vitae nisi quis suscipit. Nullam rutrum convallis dui, a pharetra nulla dapibus eget. In diam justo, finibus in commodo fermentum, maximus sit amet tellus. </p>
  </div>
</div>

We have the list group on the left side to show the entry that we’ve scrolled to.

The right side has the content.

We set the overflow-y to scroll and have the IDs match the href of the links on the list group.

The data-target is set to the ID of the list group.

JavaScript

We can add scrollspys with the bootstrap.ScrollSpy constructor.

For example, we can write:

const scrollSpy = new bootstrap.ScrollSpy(document.getElementById('content'), {
  target: '#list-example'
})

We can then call the refresh method on it to refresh the scrollspy:

const dataSpyList = [...document.querySelectorAll('[data-spy="scroll"]')];

dataSpyList.forEach((dataSpyEl) => {
  bootstrap.ScrollSpy.getInstance(dataSpyEl)
    .refresh()
})

We get the scrollspy element and call refresh on them.

Events

The activate.bs.scrollspy event is emitted whenever a new item is activated on a scrollspy.

And we can listen to it by writing:

const scrollSpyEl = document.querySelector('[data-spy="scroll"]')
scrollSpyEl.addEventListener('activate.bs.scrollspy', () => {
  //...
})

Conclusion

We can use list groups with scrollspys.

Also, we can use JavaScript to manipulate them.