The Bootstrap nav-justified feature fails to utilize the entire width available

Have you heard of the class called nav-pill? It's meant to make links have equal width and occupy all horizontal space.

To achieve equal-width elements, simply use .nav-justified, as suggested. This will ensure that nav links take up all horizontal space.

You can find more about this feature here: Bootstrap's explanation on Fill and justify.

The code snippet they provide is as follows:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="nav nav-pills nav-justified">
   <a class="nav-link active" href="#">Active</a>
   <a class="nav-link" href="#">Longer nav link</a>
   <a class="nav-link" href="#">Link</a>
   <a class="nav-link disabled" href="#">Disabled</a>
</nav>

However, it seems that this implementation is not working properly...

Could it be possible that something has been missed or misunderstood?

Edit:
Allow me to rephrase my inquiry:
I grasp the concept behind .nav-fill. However, I seek a clearer understanding of what .nav-justified entails and why it doesn't seem to function as intended.

htmlcssbootstrap-4navjustify

Answer №1

To enhance the navigation, consider including an additional class called nav-item

<nav class="nav nav-pills nav-fill">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>

View the solution in action on Jsfiddle

Answer №2

To achieve dynamic width links in a navigation bar, add the nav-fill class to the nav element. The .nav-justified class can be used to give all links the same width.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<h6>Using nav-fill (to achieve dynamic width links)</h6>
<nav class="nav nav-pills nav-fill">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>
<h6>Using nav-fill and nav-justified (to achieve uniform link width)</h6>
<nav class="nav nav-pills nav-fill nav-justified">
   <a class="nav-item nav-link active" href="#">Active</a>
   <a class="nav-link nav-item" href="#">Longer nav link</a>
   <a class="nav-link nav-item" href="#">Link</a>
   <a class="nav-link nav-item disabled" href="#">Disabled</a>
</nav>

If you prefer not to use Bootstrap, you can achieve the same effect as follows:

.custom-nav {
  display: flex;
}

.custom-nav a {
  flex: 1 1 auto; /* this property does the trick */ 
  border: 1px solid #ccc;
  text-align: center;
  padding: 10px 20px;
}
    <nav class="custom-nav">
       <a  href="#">Active</a>
       <a  href="#">Longer nav link</a>
       <a  href="#">Link</a>
       <a  href="#">Disabled</a>
    </nav>

Answer №3

To achieve this, it is essential to adhere to the html structure of Bootstrap. It involves wrapping a tags within li, giving those li a class of nav-item inside a ul, and assigning the ul classes like nav nav-pills nav-fill.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">


<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Longer nav link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Fiddle demo available here

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

How to fix the issue of the mobile Chrome bar occupying part of the screen height in CSS

I am encountering a well-known issue with my collapsible scrollable bar implemented in Bootstrap. The problem occurs when scrolling on mobile devices, as the search bar takes up space from the sidebar's 100% height, causing the scrollbar to not reach ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best method for converting a variable with HTML content into a printable string?

In an attempt to display user-entered data from a text box to an HTML div, there seems to be an issue when the data contains HTML content. Instead of displaying the content as a string, it shows it as HTML elements. For example: let text = "<h1>Worl ...

javascripthtmlstring

How can I use CSS to clip the United States, specifically Tennessee and Nashville, from the left side?

For my ASP.NET generated hyperlink that says "select location", when the user clicks on it, they are redirected to a new page where they can choose a different location at /change-location/default.aspx. This could be any country, state, or city in the worl ...

htmlcssasp.net

Menu Toggle with Bootstrap 3

I have implemented two Bootstrap 3 navigation menus on a single page. One menu works fine when the toggle button is activated for responsiveness, but the other one doesn't work as expected. How can I resolve this issue? Below are the code snippets fo ...

javascriptjqueryhtmlcsstwitter-bootstrap

Angular-Phonegap - The issue with "min-height: 100%" not functioning properly

I am faced with this specific HTML file: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- NOTE: Make sure to remove the width=d ...

htmlcssangularjscordova

Setting the height of a Bootstrap radio button

My Bootstrap radio buttons are set to a width of 200px. However, when the text inside the button exceeds this width, it wraps onto two lines leading to changes in button height. How can I ensure that all other buttons displayed scale to the same height? h ...

cssradio-buttonbootstrap-5

Exploring High-Density Mobile Devices with Bootstrap 3 Landscape Mode

After completing my first Bootstrap site using version 3, I noticed a display issue when viewing it on an iPhone 5 or LG G2 in landscape mode due to the pixel density. This was not a problem with the Responsive Grid system I previously used. Although I sp ...

csstwitter-bootstrapresponsive-designtwitter-bootstrap-3

Optimal guidelines for logging in

After successfully creating a website using HTML, CSS, and JavaScript, I am now looking to implement a login feature to provide privacy for certain users. I have noticed that some developers use PHP, while others use JS or Node.js for this purpose. However ...

javascripthtmlnode.jsauthentication

"Implementing responsive design with Bootstrap's carousel through media queries

I'm having some trouble creating a basic carousel using bootstrap because the images are not displaying full screen. Do I need to use media queries to achieve this and if so, how can I implement them? <div id="myCarousel" class="carousel slide" da ...

htmlcssbootstrap-4media-queries

Can using $.ajax to submit a form be considered contradictory?

Currently, I am engaged in developing an MVC application that heavily relies on jQuery and HTML forms. However, I have started to notice a conflict between the two... For instance, I have had to prevent the default form submission to execute my AJAX call ...

jqueryhtmlasp.net-mvcajax

Progressively increasing the time by 15 seconds during each iteration of the CSS @each loop

I recently made changes to a CSS script that involves the repetition of an animation task. Rather than repeating a segment of code 30 times, I decided to streamline it using a loop. Now, there are 30 <div></div> segments and each one undergoes ...

htmlcssanimation

Can I inspect the HTML source of GWT?

How can I access the HTML source code generated by GWT? Currently, I only see the DIV with a specific ID when viewing the source. Is there a way to view the entire HTML output? Is it possible to design my table in HTML using divs and lists, then wrap it i ...

javahtmlgwt

How can I display Bootstrap 4v6 Modal automatically when the page loads?

I have been attempting to create a subscription pop up modal box using the latest Bootstrap 4 framework. My goal is to have the subscription box appear automatically when the page loads, without requiring clients to click a button. Despite following variou ...

jquerybootstrap-modalbootstrap-4twitter-bootstrap-4

how can I pass a group of values as an argument in math.sum function?

Using math.js for convenience, I was intrigued if I could utilize the math.sum method to calculate the sum of a collection of input values. For example, something along the lines of: Here's a snippet of code to help visualize my concept: $(documen ...

javascripthtmljquerymathmath.js

The phone number is not able to be clicked on

I have a phone number included in my markup that I would like to make clickable. Here is the code snippet: <h3 class="footer">Need assistance? Call <a href="tel:+180006XXXX">1800 06X XXX</a></h3> However, upon running this code, I ...

htmlcss

Organizing an HTML layout

Looking for a way to sort a div structure based on a parameter, I came across a small JavaScript that seems to not work as expected. It appears that the sorting function is not parsing the values perfectly... This is the logic I am using for sorting: < ...

javascripthtmlsorting

Can users be prevented from bookmarking a particular web page?

I'm working on a Python (Django) webpage and I need to prevent users from being able to bookmark a certain page. Is there a way to do this? ...

javascriptpythonhtml

Implementing MySQL in JavaScript code leads to various possibilities

I am working on a web application that requires retrieving values from a MySQL database. The process involves: PHP code generates an HTML page successfully. Clicking a button updates a cookie, which also works. Using the cookie in a MySQL query, which is ...

phpjqueryhtmlmysqlajax

Is it possible to leverage the flex features of react-native in a manner similar to the row/column system of

Is it a good idea to utilize flex in react native by creating custom components that retrieve flex values? I previously used the bootstrap grid system and now I am exploring react native. Is there a way to implement this example using react-native bootstr ...

javascriptcssreactjsreact-nativeflexbox

How can I send an HTML document from a WebApi 2 action using the IHttpActionResult interface?

When it comes to building an html document and returning it in a web api, many resources recommend using HttpResponseMessage. However, I am eager to achieve this using IHttpActionResult instead. Here is my current approach: [ResponseType(typeof(HttpRe ...

c#html.netasp.net-web-api