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