Decrease the distance between hyperlinks

I understand that this question has been asked numerous times before, but as a beginner in HTML, I still require some assistance.

Given the code provided below, how can I decrease the spacing between the links in each column?

Code:

a {
  color: white;
}

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4f2d20203b3c3b3c2e3f0f7c617c6178">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">

        <li><a href="https://www.b.org/opengovernment/prr/Pages/default.aspx">Public Records Request</a></li>

        <li><a href="https://www.b.org/AgenciesAndServices/Pages/Default.aspx">Contact Us</a></li>

        <li><a href="https://www.b.org/ReportAComplaint/Pages/Default.aspx">Report a Complaint</a></li>

        <li><a href="https://www.b.org/Terms/Pages/Default.aspx">Terms of Use</a></li>

        <li><a href="https://www.b.org/Terms/Pages/Default.aspxx">Accessiblity Statement</a></li>

        <li><a href="https://lp.constantcontactpages.com/su/ErJFVZz/BrowardLife">Subscribe</a></li>

      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://b.granicus.com/ViewPublisher.php?view_id=15">Watch Meetings</a></li>
        <li><a href="https://www.b.org/Pages/Welcome.aspx">Copyrights 2022, Government</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
        <ul class="nav nav-pills">

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

</div>

htmlcsstwitter-bootstrap-3

Answer №1

Every column on this page currently has padding of 15px on the left and right. If you're looking to reduce the spacing, consider changing it to 8px instead.

Check out the code below to see how this can be done.

Tip: You might be able to find a CSS utility class within Bootstrap that can help with this.

a {
  color: white;
}

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.row>div {
  padding-left: 8px;
  padding-right: 8px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">

        <li><a href="https://www.example.com">Link 1</a></li>

        <li><a href="https://www.example.com">Link 2</a></li>

        <li><a href="https://www.example.com">Link 3</a></li>

        <li><a href="https://www.example.com">Link 4</a></li>

        <li><a href="https://www.example.com">Link 5</a></li>

        <li><a href="https://www.example.com">Link 6</a></li>

      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a href="https://www.example.com">Link 7</a></li>
        <li><a href="https://www.example.com">Link 8</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
        <ul class="nav nav-pills">

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

</div>

To address the issue mentioned in the comments, you'll need to adjust the padding for each link (<a href="..." />). In the Dev Tools, you can observe that a selector (.nav>li>a) is already defining the padding for each link. To override this padding, you'll need to increase the specificity by adding .external-link to each link and including the following selector.

.nav .external-link {
  padding: 2px;
}


a {
  color: white;
}

.footer-background {
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: #1c2a48;
}

.logo,
.nav {
  margin-bottom: 10px;
}

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav .external-link {
  padding: 2px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="footer-background container-fluid">
  <div class="row">
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">

        <li><a class="external-link" href="https://www.example.com">Link 1</a></li>

        <li><a class="external-link" href="https://www.example.com">Link 2</a></li>

        <li><a class="external-link" href="https://www.example.com">Link 3</a></li>

        <li><a class="external-link" href="https://www.example.com">Link 4</a></li>

        <li><a class="external-link" href="https://www.example.com">Link 5</a></li>

        <li><a class="external-link" href="https://www.example.com">Link 6</a></li>

      </ul>
    </div>
    <div class="col-xs-6 col-sm-4 center-block">
      <ul class="nav nav-pills">
        <li><a class="external-link" href="https://www.example.com">Link 7</a></li>
        <li><a class="external-link" href="https://www.example.com">Link 8</a></li>
      </ul>
    </div>
    <div class="col-xs-12 col-sm-4">
      <div class="text-white" style="padding-top: 3rem; text-align: center;">
        <ul class="nav nav-pills">

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

</div>

Answer №2

When utilizing flexbox, you have the option to simply use the gap property.

.nav-pills {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

Answer №3

Setting the line-height attribute to "line-height: 1.42857143;" can be adjusted to "1" for the nav-pills class. The styling for these classes is primarily determined by the bootstrap.css stylesheet that you have imported.

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 place the icon on the right side of the @mui/Chip component?

Currently, I am working with MUI version 5.15.0. I have a component called Chip, and my goal is to display the icon after the label on the right side. I attempted to use the CSS rule - .MuiChip-icon{ order:1 }, but it resulted in too much spacing. Additio ...

cssreactjsmaterial-uisx

What is the best way to preserve the background color of nested progress bars?

In this scenario, I am attempting to apply border-radius specifically to the upper and lower right corners of the progress bars. The idea is to create a cascading effect where each color (red, green, and blue) progress bar overlaps slightly with the next o ...

htmlcssbootstrap-4

The background image on my link bar is inexplicably not appearing

I've been trying to solve this issue for hours and I'm at a loss. Initially, the background image was displaying correctly, but now it's not working. HTML: <head> <link type="text/css" rel="stylesheet" href="css/normalize.css" ...

phphtmlcssimagebackground

Ensuring your image matches the size of the containing div element

I am trying to create a navigation bar in the footer of my website using images. The footer should take up 10% of the total screen, and the images should also be contained within that 10%. However, I am having trouble with the images not scaling properly a ...

cssbootstrap-4

Guide to verifying a value within a JSON object in Ionic 2

Is there a way to check the value of "no_cover" in thumbnail[0] and replace it with asset/sss.jpg in order to display on the listpage? I have attempted to include <img src="{{item.LINKS.thumbnail[0]}}"> in Listpage.html, but it only shows the thumbna ...

javascripthtmltypescriptionic-frameworkionic2

Formulate a multi-line string using a collection in React's JavaScript framework

I'm working on a React function that involves a set and I need to update an HTML element using the data from this set. Below is an example of my code: const updateElement = (mySet) => { document.getElementById('myId').innerHTML = Arra ...

javascripthtmlreactjstypescript

Steps for implementing a select all feature with jQuery

I'm currently working on a jQuery function that is acting as a select-all option. Everything is functioning correctly except that when I deselect any of the child elements from select all, the option remains enabled. My goal is to enable or disable th ...

javascriptjquerycss

Apply CSS styles to the checkbox

I am new to CSS and I need help styling a checkbox element. When the user selects one of the checkboxes, I want the background color to change to yellow. Thank you for any assistance you can provide! .radio_toggle { float:left; } .radio_toggle label ...

htmlcsscheckbox

What is the reason that <span> elements do not automatically wrap around to the next line when they are in line with each other without any white space?

Once upon a time, I believed that line breaks had no impact on the rendering of HTML due to minification. However, I recently discovered something peculiar. <!DOCTYPE html> <html> <body> <style> div { width: 200px; background: ...

htmlcsshtml-rendering

Chart: Observing the Discrepancy in the Initial X-Axis Points

I'm working on incorporating multiple charts onto one page, with each chart centered and stacked one after the other. I've set a fixed width for the graph canvas. The challenge arises from the varying ranges of tick values - one chart may have a ...

javascriptcssflot

Tips for creating a highly adaptable code base- Utilize variables

Can anyone help me optimize this lengthy and cumbersome code in HTML and JS? I want to make it more efficient by using variables instead of repeating the same code over and over. In the HTML, I've used href links to switch between different months, w ...

javascriptjqueryhtmloptimization

Retrieve all hyperlinks from HTML using C programming

Is there a way to extract all URLs from an HTML document using the C standard library? I attempted to use sscanf() for this purpose, but encountered errors when checking with valgrind. I'm unsure if my code will meet the requirements even after succe ...

htmlcregexstring

An image inside this stylishly framed photo with rounded corners

.a { clip-path: polygon(10% 0, 100% 0%, 100% 100%, 10% 100%,10% 60%, 0% 50%, 10% 40%); } .a { position: relative; width: 500px; height: 500px; background:url("https://cdn.pixabay.com/photo/2020/02/16/07/55/thailand-4852830_960_720.jpg"); border-radi ...

htmlcss

Bootstrap version 5.3.0 has a unique behavior where dropdowns placed outside the collapsed area of the navbar will display the menu inside the navbar, rather than outside

Is there a way to fix the issue where the dropdown menu appears in the body of the navbar when it is collapsed? I have tried using attributes like data-bs-reference but couldn't find much information on how to resolve this. <nav class="navbar ...

csstwitter-bootstrapdropdownbootstrap-5

What is the best way to ensure both landscape and portrait images are completely responsive and equal in height within a carousel?

I am currently working with a bootstrap carousel that contains both portrait and landscape images. On wide screens, the carousel height is automatically set to match the tallest image's height. However, this behavior results in white spaces on the top ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-carousel

Implementing the 'bootstrap tour' feature in a Ruby on Rails application

I have integrated bootstrap-tour.min.css and bootstrap-tour.min.js into my project. <script type="text/javascript" src='bootstrap-tour.min.js'></script> <link rel="stylesheet" type="text/css" href="bootstrap-tour.min.css"> Her ...

javascriptcssruby-on-railsrubytwitter-bootstrap

Header 1 is not receiving any special styling, while Headers 2 through 6 are being styled accordingly

I am currently utilizing Skeleton V2.0.4 to design a landing page, but I seem to be having trouble with my styles not displaying correctly. Below are the specific lines of code related to it: /* Typography –––––––––––––– ...

htmlcsstags

Display iframe as the initial content upon loading

Seeking solutions for loading an iframe using jQuery or Ajax and outputting the content to the page once it has been loaded. The challenge lies in loading an external page that may be slow or fail to load altogether, leading to undesired blank spaces on th ...

phpjavascriptjqueryhtmlajax

Utilizing Selenium with Java, you can hover over a button and choose to click on any of the available options

Currently, I am utilizing Selenium to automate the user interface using Java. Within the UI, there is an action button that, when hovered over by the User, displays two clickable options - Create and Edit. For ease of use, I have stored CSS locators as E ...

javacssseleniummousehover

Optimal practices for naming divs in XHTML/CSS

Is it acceptable to use spaces in div names like this? <div class="frame header">Some content here</div> Having a space in the name might require separate CSS classes such as: .frame { display: block; } .header { background-color: #efefef; } ...

csshtmlxhtml