Padding for links in Bootstrap 4 navigation bars

I need help removing the padding-left from the first .nav-link in the .navbar-nav.

Here's an example.

In my Bootstrap 4 setup, I have added padding to the .nav-link: 

.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
}
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<section class="navigation container-fluid">
  <nav class="container navbar navbar-expand-lg navbar-dark">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="mainNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="http://www.flakneconstructionllc.com">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="about">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="services">Services</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="gallery">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="contact">Contact Us</a>
        </li>
      </ul>
    </div>
  </nav>
</section>

However, this approach is not working as expected due to the presence of a .nav-item between .navbar-nav and .nav-link.

Does anyone have a solution for this issue?

What is the best way to target the first item in this scenario?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you want to eliminate left whitespace in your navigation bar, the easiest way is to use the pl-0 padding utility class. You can apply this class to the first nav-link, as well as to the entire navbar if needed.

<section class="navigation container-fluid">
    <nav class="container pl-0 navbar navbar-expand bg-dark navbar-dark">
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="mainNavbar">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link pl-0" href="http://www.flakneconstructionllc.com">Home <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about">About Us</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="services">Services</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="gallery">Gallery</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="contact">Contact Us</a>
                </li>
            </ul>
        </div>
    </nav>
</section>

If you prefer using CSS to target the first link specifically, you can use the following code snippet:

.navbar-nav .nav-item:first-child .nav-link {
    padding-left: 0;
}

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

Design a dynamic pagination button for my project that allows users to navigate between pages effortlessly

Can anyone assist me in creating next and previous buttons? I've been struggling with my JavaScript skills. I noticed that many people use jQuery or pure JavaScript for this. Since I'm still learning JavaScript, there are a lot of concepts I&apos ...

javascripthtmljquerycss

Complete and submit both forms during a single event

Essentially, I have an event called onclick that takes form data and stores it in a variable. When another function is executed by the user, I want to send that variable through ajax within the function. This is the onclick event (first form): $('#n ...

javascriptphpjqueryhtmlajax

Tips for maintaining content within a div element

Looking at the code snippet below, I am extracting data from my database and controlling the number of characters in the output by adjusting the number (17). The issue arises when increasing this number to, for example, 50, as it causes the output to ove ...

phpcssmysql

Customizable Button component featuring background image options

Need help with creating a versatile Button component in React that can easily accommodate different sizes and shapes of background images? This is how my current implementation looks like - Button.js const Button = ({ url }) => { const inl ...

htmlcssreactjsbuttonbackground-image

Triggering a d3.js event when two radio buttons are both selected

I am currently working with a sample code that displays data based on the selected radio button: http://bl.ocks.org/juan-cb/1984c7f2b446fffeedde To enhance this functionality, I decided to add two sets of radio buttons instead of one by including the fol ...

javascripthtmld3.js

What are some tips for using CSS display grid to effectively showcase my HTML content?

Visit my About Me page with custom menu styling Any tips on aligning the body with the grid function to achieve this particular design? ...

htmlcsscss-grid

Floating Div Elements

Trying to solve this seemingly simple problem has been quite the challenge for me. I have a container with multiple divs added to it, and I want these divs to position themselves freely within any available white space. However, they must follow a pattern ...

htmlcss

step-by-step guide on showcasing and concealing textbox borders

Within a table, I have a column with a text box for users to edit the text as needed. The edited text is properly being saved using the onkeyup event. However, I want to hide the border of the text box after editing, so only the edited text is visible. If ...

htmlcss

Locate the textbox that pertains to the element currently in focus

My HTML is structured as follows: <tr> <td colspan="2" class="borderBottomCell"> <div class="benefitInfo" style="WIDTH: 99%! important;"> <asp:DropDownList ...

javascriptjqueryhtmlhtml-table

Tips for adjusting text color in a paragraph based on its content

I have a paragraph or h1 with phrases like "the color of this item is Magenta" or "this output is Red". These color-specific words (red, black, cyan, magenta or yellow) may appear within the paragraph or h1 tag. Here is my current code snippet: HTML < ...

javascriptphpjquerycssdynamic-programming

Deactivate radio buttons when the table value is greater than or equal to one

On my webpage, there are radio buttons for 'Yes' and 'No'. When 'Yes' is selected, a hidden <div> appears where users can fill in fields. Upon clicking the 'Add' button, the information is displayed in a table. ...

javascriptjqueryhtml

Wrapping words in php code

Despite using word-wrap: break-word in the content-full class, the text is not appearing correctly. What could be causing this issue? Is there a solution to ensure long words break and wrap onto the next line? Interestingly, word-wrap: break-word works for ...

javascriptphphtmlcssforms

Utilizing Jquery to locate a link inside a Div and displaying it as specified in the HTML

Looking for a solution to make div elements clickable as links? The usual methods involving window.location or window.open may not be suitable if you have numerous divs with predefined targets. If you're not well-versed in Javascript, finding the righ ...

javascriptjqueryhtmlhreftarget

Struggling with Bootstrap 5: Issue with full width footer display

Struggling with making the Bootstrap footer in full width? I've been using the Bootstrap footer example but can't seem to figure out how to achieve a full-width footer. https://i.sstatic.net/uGOdz.png <link rel="stylesheet" href="https://c ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for saving the quantity of likes from an HTML "icon button"

I recently started exploring web development as a hobby and created a website. I have managed to implement all the features I wanted except for one. Despite researching extensively about databases and Ajax, I have not been able to find a solution that work ...

phphtmlcsssqlajax

Compatibility of Blackberry Webworks

As I prepare to build a Webworks app, the documentation indicates that it is designed to function only on devices equipped with OS 5.0 or later. However, I am curious if there exists a way to make the app compatible with devices running an OS version lower ...

javahtmlblackberry

Is it possible to manipulate the carousel image within the div element?

I am working on a Bootstrap code snippet that showcases an image using the w-100 class to span the full width of the page. However, the challenge I'm facing is making sure the image is visible to users while keeping it small enough so they won't ...

javascripthtmlcssbootstrap-4bootstrap-5

Encase your image in a stylish frame using fancyBox 3

How can I enhance the appearance of image-slides in fancyBox 3? So far, I have experimented with the following code: <style> .fancybox-placeholder { padding: 40px; background: #fff; } .fancybox-image { position: static; } < ...

cssfancyboxfancybox-3

Ways to display multiple select options based on the user's selection of multiple choices and ensure they remain hidden and reset when deselected with the use of

There is a select options field that contains languages, where the user can choose multiple language options or just one. When the user selects a language, a new select option should appear for them to choose their proficiency level in that language. If t ...

javascripthtmljquerycsslaravel

Adjust the HTML size before converting it to a PDF using the jspdf .html() function

Currently, I am exploring the process of resizing an HTML element using the jsPDF method called .html(). I attempted to implement the following code but found that the width parameter did not have any impact on the final output. Since there is no officia ...

javascripthtmlpdfjspdfhtml2canvas