The vertical spacing in the footer navigation list is excessively large

Trying to create a footer with four columns that contain anchor tags using Bootstrap 4.4 nav classes. The columns are set up correctly but there is too much vertical padding between each nav item. I've attempted to adjust this without success. As shown in the attached image, there is excessive space between items in all four footer columns. Any solutions to this problem?

<footer class="border-top footer text-muted" style="background-color: darkblue" >
        <div class="container" style="background-color: darkblue">
            <div class="row">
                <div class="col-sm" style="background-color: darkblue">
                    <h4 style="color: white; font-weight: bold;">Company</h4>
                    <ul class="nav flex-column">
                        <li class="nav-item p-0">
                            <a class="nav-link text-light" asp-area="" asp-page="/Privacy">Privacy Policy</a>
                        </li>
                        <li class="nav-item p-0">
                            <a class="nav-link text-light" asp-area="" asp-page="/Terms">Terms of Use</a>
                        </li>
                    </ul>
                </div>
                ... Three other columns just like above
          </div>
       </div>
   </footer>

https://i.sstatic.net/JRR7S.png

Answer №1

Reduce the amount of padding on the nav-link element

Answer №2

It appears that there may be an issue with the connection to Bootstrap. After inserting your code snippet into a new HTML file, I included this line in the <head> section:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

The result was a more compact layout: view in FF Dev 80

My analysis suggests that the issue could be caused by linking to the incorrect version of Bootstrap.css.

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

What is the Best Way to Utilize CSS ID Selectors with Next JS?

After discovering that npx create-react-app is no longer supported, I decided to delve into Next JS as a new framework. My goal now is to transition one of my websites from pure HTML, SASS (CSS), and JavaScript to utilizing Next JS and SASS. The current c ...

Implementing the Disabled Attribute on a Dynamically Generated Button Using React

My QWERTY keyboard is dynamically rendered through a component as Bootstrap buttons using bootstrap-react. Each button does not have an ID to avoid relying on IDs in React. When a letter button is clicked, it triggers an onClick event passed as props back ...

Enable the ability to scroll and click to navigate an overlapping Div element

A customer has a website with a dark teal design and is not pleased with the appearance of the scroll bar, as it disrupts the overall style. The client requested that I find a solution without using third-party libraries, and one that they can easily under ...

Adjusting the text color of cells in a table based on their values using Ruby on Rails

I have a cell within a table that is formatted like this: <td><%= play_result.timestamp.strftime("%H:%M:%S") + ' ' + play_result.status + ':' + ' ' + '[' + play_result.host + ']' + ' ' ...

Page Built with Bootstrap Showing Excessive White Space Below and Footer Misaligned

Looking for some assistance with a webpage I've been working on. Here is the page in question: I used the official static navbar example from Bootstrap as inspiration: https://getbootstrap.com/examples/navbar-static-top/ As well as the official stic ...

Using D3-GraphViz in Javascript along with an Angular template: A step-by-step guide

I am attempting to integrate d3-graphviz following the guidance provided here within an angular template, like in this example. The tutorial on the d3-graphviz website advises me to include the following code in the index.html file: <!DOCTYPE html> & ...

Unable to get 'margin: 0 auto' to function properly on mobile devices

We recently created a website at but are facing issues with mobile device compatibility and centering the content using margin: 0 auto along with a specified width. The problem can be seen here: for "topuctovnici.sk" We have set .core to 1240px in widt ...

Combining CSS, jQuery, and HTML into a single .html file would allow for seamless integration

I've been searching extensively, but I haven't been able to locate exactly what I need. My goal is to merge my jQuery and CSS into a single .html file, but I'm struggling to get the jQuery functionality to work. Although I have experience wi ...

Struggle with typescript integration with emotion and styled components

Issue Description: I encountered an issue while working with typescript and emotion/styled libraries. When attempting to specify the type of the parent component that wraps a styled component, I faced difficulties. The scenario involves a parent componen ...

Maintain the fixed position of the Google Map <div> while allowing background <div>s to scroll

I'm having trouble keeping a Google Map div fixed on the screen while allowing my background, consisting of multiple scrolling divs with content inside, to scroll as normal. My attempt to wrap the map div in another fixed div resulted in the map disa ...

Tips for concealing the delete button within the main content area and displaying it in the subsequent "add" pop-up window upon clicking the "add" button in Angular

I have a card with add and delete buttons. I want only the add button to show initially, and when clicked, a new card should open with both add and delete buttons. Everything is working as expected except I can't figure out how to hide the delete butt ...

CSS Dropdown Menu Malfunctioning

I recently created a navigation bar using some online tutorials, and everything seems to be working fine except for the drop-down menu. I've been struggling with it for hours and can't seem to find a solution. Any help would be greatly appreciate ...

Why is the decision made to simply remove an item? Is there an option to instead choose and delete the specific item?

I am facing an issue with my form where I have a function to dynamically add inputs using "append" and another button to remove the inputs added. When I use the "last-child" selector to delete the last generated div, the remove button stops working and I a ...

Problems with the main title formatting in the header

I am currently working on a new website and have encountered an issue with the header design. The Mainline "PersIntra" is overlapping the "log out button" box, which I would like to be positioned beside it instead. Despite my efforts with CSS and nesting ...

Creating an arrow shape with a dynamically adjustable width using pure CSS

Looking to create a container with an upward arrow attached to it, but encountering some challenges. I've used the border drawing trick in the past, which seems like a possible solution. However, it seems limited to specific sizes since you need to sp ...

Creating a tooltip that doesn't rely on any child elements

I've been experimenting with creating a tooltip that appears when hovering over an <a> tag and displays a <div> from another location For example: <p> blah blah <a class="tooltiphover">hover me</a> blah blah &l ...

Is it possible to use the same identifier for both the name and id attributes in HTML?

In the world of coding, the "name" attribute is often used in server-side programming to send name/value pairs in requests. On the other hand, the "id" attribute is commonly utilized in client-side programming such as Javascript and CSS. However, both att ...

Using Javascript, the sum of inputs is calculated based on the keyup event

I am a beginner in javascript and I'm learning about events. Below is the HTML code for a table that displays income titles and their respective prices. <table class="table table-hover table-bordered" id="incomeId"> <thead> <tr&g ...

Bootstrap navbar partially collapsed with inner items concealed not at the edges

Many discussions have come up regarding partially collapsing Bootstrap navbars, such as: Item1 Item2 Item3 Item4 Item5 Is it possible to achieve the following collapsed format: Item1 Item2 Item3 =menu= Or: =menu= Item3 Item4 Item5 This method ...

Issue with the overall HTML design

The placement of the banner is exactly where I want it to be, however, the boxes using jQuery masonry are overlapping it. I'm not sure what I did wrong here. Any suggestions or insights on how to fix this issue? Example HTML Code: <script type="t ...