Bootstrap 5.2.3 Scrollspy spacing / padding issues

Question

I'm trying to create a new template for my portfolio using a list on the left side to orient the viewer and provide an easy way to access sections. I am using Scrollspy in Bootstrap 5.2.3 and things are looking ok except the side list seems to have some built in padding which is wasting space on the page and creating too much distance between the list and content on large pages. Any ideas on how to fix this? Please see my Pen for code reference. (the large grey box on top is a placeholder for an image.

Thanks much.

https://codepen.io/rachelmax/pen/MWBQzMd

.nav-link {
  line-height: 3;
  color: #737373;
  margin: 0;
  border: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  border-bottom-right-radius: 10;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  color: #DF00F5;
  background-color: #ebebeb;
}

<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Testing Code 5</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

</head>

<body>

  <div class="pt-5" style="height:500px; background:grey;">
  </div>

  <div class="container-12">
    <div class="row">

      <div class="col-3">
        <nav id="navbar-example3" class="h-100 pe-5">
          <nav class="nav nav-pills flex-column sticky-top">
            <a class="nav-link" href="#item-1">Problem</a>
            <a class="nav-link" href="#item-2">Team & Role</a>
            <a class="nav-link" href="#item-3">Research</a>
            <a class="nav-link" href="#item-4">Iterations</a>
            <a class="nav-link" href="#item-5">Results</a>
          </nav>
        </nav>
      </div>

      <div class="col-8 mt-4">
        <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">

          <div id="item-1">
            <h5>Item 1</h5>
            <p>....</p>
          </div>

          <div id="item-2">
            <h4>Item 2</h4>
            <p>....</p>
          </div>


          <div id="item-3">
            <h4>Item 3</h4>
            <p>....</p>
          </div>
          <div id="item-4">
            <h4>Item 4</h4>
            <p>....</p>
          </div>
          <div id="item-5">
            <h4>Item 5</h4>
            <p>....</p>
          </div>

        </div>
      </div>
    </div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

</html>

Please revise your post title to ask a clear, specific question. Don't add tags. See [ask]. — isherwood, Jan 23 '23 at 19:42

Kameron · Accepted Answer · 2023-01-23T21:34:56.617

Bootstrap’s grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follows:

Extra small (xs)

Small (sm)

Medium (md)

Large (lg)

Extra large (xl)

Extra extra large (XXL)

Grid system · Bootstrap v5.3

Each of these breakpoints has its own container, unique class prefix, and modifiers. So in your case, you will have to adjust your column sizing for xl.

You also have pe-5 which indicates padding-right: 3rem !important; which is also adding to the gap.

A Pen for Rachel

.nav-link {
  line-height: 3;
  color: #737373;
  margin: 0;
  border: 0;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  border-bottom-right-radius: 10;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  color: #DF00F5;
  background-color: #ebebeb;
}

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Testing Code 5</title>

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

</head>

<body>

  <div class="pt-5" style="height:500px; background:grey;">
  </div>

  <div class="container-12">
    <div class="row">

      <div class="col-xl-1 col-3">
        <nav id="navbar-example3" class="h-100">
          <nav class="nav nav-pills flex-column sticky-top">
            <a class="nav-link" href="#item-1">Problem</a>
            <a class="nav-link" href="#item-2">Team & Role</a>
            <a class="nav-link" href="#item-3">Research</a>
            <a class="nav-link" href="#item-4">Iterations</a>
            <a class="nav-link" href="#item-5">Results</a>
          </nav>
        </nav>
      </div>

      <div class="col-xl-11 col-9 mt-4">
        <div data-bs-spy="scroll" data-bs-target="#navbar-example3" data-bs-smooth-scroll="true" class="scrollspy-example-2" tabindex="0">

          <div id="item-1">
            <h5>Framing the Problem</h5>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.
            </p>
          </div>

          <div id="item-2">
            <h4>Team & Role</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>

          <div id="item-3">
            <h4>Research</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>
          <div id="item-4">
            <h4>Iterations</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>
          <div id="item-5">
            <h4>Results</h4>
            <p>This is some placeholder content for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize
              the scrolling and highlighting. Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content
              for the scrollspy page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting.
              Keep in mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.<br><br> This is some placeholder content for the scrollspy
              page. Note that as you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in
              mind that the JavaScript plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.This is some placeholder content for the scrollspy page. Note that as
              you scroll down the page, the appropriate navigation link is highlighted. It's repeated throughout the component example. We keep adding some more example copy here to emphasize the scrolling and highlighting. Keep in mind that the JavaScript
              plugin tries to pick the right element among all that may be visible. Multiple visible scrollspy targets at the same time may cause some issues.</p>
          </div>

        </div>
      </div>
    </div>

  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

oh that's the issue - I thought .pe-5 referred to 'pointer events' and had to correlate to the number of items the scroll spy was monitoring. Thanks for pinpointing the issue. — Rachel Max, Jan 23 '23 at 21:50

Bootstrap 5.2.3 Scrollspy spacing / padding issues

1 Answers1