Troubleshooting spacing and padding problems in Bootstrap 5.2.3's Scrollspy feature

Hello, I'm currently working on developing a new portfolio template that features a list on the left side to guide users through different sections of the page. Utilizing Scrollspy in Bootstrap 5.2.3 has been helpful so far, but I've noticed that the side list includes some excess padding by default. This extra space is creating unnecessary distance between the list and the content on larger pages. Does anyone have suggestions on how I can address this issue? For reference, you can view my code on my Pen (the large grey box at the top serves as a placeholder for an image).

Thank you in advance for your help.

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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c7dcc0dcc1">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="72101d1d06010600130232475c405c41">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

</html>

htmlcsstwitter-bootstrapbootstrap-5scrollspy

Answer №1

Bootstrap’s grid system is designed to be responsive across all six default breakpoints, as well as any custom breakpoints you define. The six default grid tiers include:

  • Extra small (xs)
  • Small (sm)
  • Medium (md)
  • Large (lg)
  • Extra large (xl)
  • Extra extra large (XXL)

Grid system · Bootstrap v5.3

Each breakpoint comes with its own container, unique class prefix, and modifiers. So, in your specific case, adjustments will need to be made for the xl size.

You can also use pe-5, which indicates a right padding of 3rem and may contribute to the spacing.

A Unique 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bbd9d4d4cfc8cfc9dacbfb8e95899588">[email protected]</a>/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... (Content abbreviated for brevity)</p>
          </div>

          <div id="item-2">
            <h4>Team & Role</h4>
            <p>This is some placeholder content for the scrollspy page... (Content abbreviated for brevity)</p>
          </div>

          <div id="item-3">
            <h4>Research</h4>
            <p>This is some placeholder content for the scrollspy page... (Content abbreviated for brevity)</p>
          </div>
          <div id="item-4">
            <h4>Iterations</h4>
            <p>This is some placeholder content for the scrollspy page... (Content abbreviated for brevity)</p>
          </div>
          <div id="item-5">
            <h4>Results</h4>
            <p>This is some placeholder content for the scrollspy page... (Content abbreviated for brevity)</p>
          </div>

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

  </div>

  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="385a57574c4b4c4a5948780d160a160b">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7L+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

</body>

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

Is there a way to restrict the orientation of a UIWebView using JavaScript or HTML?

Currently, I am working on HTML content for an iPad application. The challenge at hand is locking the UIWebView's content to portrait mode. Despite having already submitted the app to Apple, I have only come across a solution in this question, which s ...

javascripthtmlcocoa-touchuiwebview

Creating a seamless full-page grid layout with CSS to eliminate the need for scrolling

My goal is to have 20 items on the grid of this page, each taking up full width and height with a fluid layout. Currently, I have successfully set up the page with 20 items spanning full width in a fluid design. However, the content of the grid is being p ...

htmlcsswordpressfluid-layout

Automatically integrating Nivo Lightbox into your website

I incorporated Nivo Lightbox into my website, seamlessly integrating all images with the plugin using the following code: <div class="portfolio-item"> <div class="portfolio-thumb "> <a class="lightbox" data-lightbox-type="ajax" title="Strat ...

javascriptjqueryhtmlcsstwitter-bootstrap

The nested navigation link disappears suddenly on Internet Explorer 9

This query closely resembles another issue: Nested menu keeps vanishing on IE 8 & 9. However, the solution provided is quite limited. Why do my nested menus disappear before I can reach them with my cursor unless I move it swiftly? This peculiar behavi ...

cssinternet-explorer-9nav

What is the process for generating a GET request for selected checkboxes and subsequently showcasing the data on an HTML webpage?

Currently working on an app project and need assistance with implementing a feature. I have successfully set up a POST method for the checkboxes that are checked, but I am unsure how to retrieve this data and display it on my HTML page using a GET method ...

javascripthtmlajaxcheckboxget

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Creating a navigation menu with 4 blocks can be a bit tricky, especially when trying to show one block at a time upon click. Here is my code attempt, but unfortunately it's not working as expected. I would greatly appreciate any help or suggestions on ...

javascriptjqueryhtmlcss

Unique collection of vibrant color schemes for Bootstrap 5 design

The Bootstrap 5 documentation showcases a range of color palettes, providing options for white / black text on various background intensities to ensure optimal contrast. You can explore these color schemes at https://getbootstrap.com/docs/5.0/customize/col ...

sasscolorsbootstrap-5

Hide the selection box when hovering over the Div

Looking for a quick solution. I want the option drop down to close when another div element is hovered over. First, open the drop down and hover over the red element on the right side. When hovering over the red element, I would like the drop down to clos ...

javascriptjqueryhtmlcss

Using custom or external fonts icons in Chrome Packaged Apps involves the following steps:

Seeking to enhance the appearance of my Chrome Packaged App built in AngularDart, I searched for external icons online but came up empty-handed. Despite attempting various strategies and implementing the workaround provided below, I have been unable to ach ...

cssiconsdartangular-dartgoogle-chrome-app

Retrieve the data contained within a displayed embed tag that includes a src attribute

Can anyone provide guidance on how to retrieve the content of an embed tag using src attribute? I have an embed tag pointing to a custom page as src. I tried to use jquery to access the rendered content but I am not getting anything back. Any suggestions ...

javascriptjqueryhtml

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...

javascripthtmlcsstwitter-bootstrap

How can I retrieve text that is enclosed within 2 specific tags and then format the output according to my preference?

Is it possible to extract text between specific tags and format the output as desired? Are there any tools or scripts available for this task? For instance: [b]1.[/b] [artist]Norman Bass[/artist] – How U Like Bass? (Warp Brothers Club Mix) [i](3:26 ...

javascriptphpjqueryhtmltext

What is the best way to incorporate a button in my code that automatically triggers changes at regular intervals?

Is there a way to automatically change the color of my working traffic light in JavaScript on a timed basis, rather than relying solely on button clicks? Here is the current code I am using: <!DOCTYPE html> <html> <head> <style> # ...

javascripthtmlcss

Modifying the color of a specific node in jstree

I am attempting to modify the background color of the node I have selected in jstree. $('#syncrep').jstree({ 'core' : { 'data' : repository ...

javascriptjqueryhtmlangularjsjstree

Adjusting the grid for various mobile screen sizes

I am currently working on designing a user interface (UI) for mobile screens that includes a header, grid, and buttons. I want the UI to look consistent across all mobile devices. Here are screenshots from various mobile screens: Samsung S5 Pixel 2 XL I ...

htmlcss

Does Firebase only send a single input value instead of a Span?

I am currently facing an issue with pushing data into my firebase database. I have successfully incorporated one user input field into the process. However, now I am attempting to include a span value in my database, which changes based on a slider that co ...

javascripthtmlfirebasefirebase-realtime-database

Display a specific section of an image as the background in a div, with the image scaled and positioned perfectly

Utilizing a 1900 x 1080 image within a div as the background <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8" /> <style> html,body { height:100%; } #imageHolder{ ...

javascriptjqueryhtmlcssimage

Fill the rows of the <Table> using HTML code

I am encountering an issue with displaying data in a table on a screen: <table id="TransactionTable" class="table table-responsive table-striped"> <thead> <tr> <th></th> <th>Date</ ...

javascripthtml

Display the text and values of textareas/inputs located within a designated section of a form

I am looking to extract the labels and values of specific textareas and input tags on my website. I don't want to capture all of them, just those within a particular area. For example, I only want to retrieve the values that come after the textarea wi ...

jqueryhtml

How can I position a div element inside another fixed div element?

I'm working on a layout with a fixed gradient div that contains all my content. However, I want the content to be scrollable instead of fixed. How can I make this happen? Here is the current structure: <body> <div class="wrappe ...

htmlcss