DEVHIDE
Login Or Sign up

Bootstrap 5.2.3 Scrollspy spacing / padding issues

508 Views Asked by At

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

</html>

html css twitter-bootstrap bootstrap-5 scrollspy
Original Q&A
1

There are 1 best solutions below

1
Kameron On BEST ANSWER

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

Related Questions in HTML

Related Questions in CSS

Related Questions in TWITTER-BOOTSTRAP

Related Questions in BOOTSTRAP-5

Related Questions in SCROLLSPY

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.