Explaining the Usage of Nav-pills in Bootstrap v4

I am looking to align my navigation bar across the width of the div. However, I am currently using Bootstrap v4 and the nav-justify class is not available yet.

Below is the code snippet:

<ul class="nav nav-pills">
    <li class="nav-item">
        <a class="nav-link active" href="#subscribed" data-toggle="tab">My Subscriptions</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventPassed" data-toggle="tab">Past Events</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventNow" data-toggle="tab">Current Events</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventIncoming" data-toggle="tab">Upcoming Events</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventCreation" data-toggle="tab">Create an Event</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#eventOwn" data-toggle="tab">My Events</a>
    </li>
</ul>

I am looking for a responsive solution to achieve this, without using percentages in CSS.

htmlcsstwitter-bootstrapresponsive-designbootstrap-4

Answer №1

it appears that the nav-justify class is missing. To remedy this, you can manually add it based on TB3's code:

SCSS code:

// Justified nav links
// -------------------------

@mixin nav-justified {
  width: 100%;

  .nav-item {
    float: none;
  }

  .nav-link {
    text-align: center;
    margin-bottom: 5px;
  }

  > .dropdown .dropdown-menu { //todo: remove child selector
    top: auto;
    left: auto;
  }

  @include media-breakpoint-up(sm) {
    .nav-item {
      display: table-cell;
      width: 1%;
    }
    .nav-link {
        margin-bottom: 0;
    }
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
@mixin nav-tabs-justified {
  border-bottom: 0;

  .nav-link {
    // Override margin from .nav-tabs
    margin-right: 0;
    border-radius: $border-radius;
  }

  .nav-link.active,
  .nav-link.active:hover,
  .nav-link.active:focus {
    border: 1px solid $nav-tabs-justified-link-border-color;
  }

  @include media-breakpoint-up(sm) {
    .nav-link {
      border-bottom: 1px solid $nav-tabs-justified-link-border-color;
      border-radius: $border-radius $border-radius 0 0;
    }
   .nav-link.active,
   .nav-link.active:hover,
   .nav-link.active:focus {
      border-bottom-color: $nav-tabs-justified-active-link-border-color;
    }
  }
}

.nav-justified {
  @include nav-justified;
  @include nav-tabs-justified;
}

compiled CSS code:

.nav-justified {
  width: 100%;
  border-bottom: 0; }
  .nav-justified .nav-item {
    float: none; }
  .nav-justified .nav-link {
    text-align: center;
    margin-bottom: 5px; }
  .nav-justified > .dropdown .dropdown-menu {
    top: auto;
    left: auto; }
  @media (min-width: 544px) {
    .nav-justified .nav-item {
      display: table-cell;
      width: 1%; }
    .nav-justified .nav-link {
      margin-bottom: 0; } }
  .nav-justified .nav-link {
    margin-right: 0;
    border-radius: 0.25rem; }
  .nav-justified .nav-link.active,
  .nav-justified .nav-link.active:hover,
  .nav-justified .nav-link.active:focus {
    border: 1px solid #ddd; }
  @media (min-width: 544px) {
    .nav-justified .nav-link {
      border-bottom: 1px solid #ddd;
      border-radius: 0.25rem 0.25rem 0 0; }
    .nav-justified .nav-link.active,
    .nav-justified .nav-link.active:hover,
    .nav-justified .nav-link.active:focus {
      border-bottom-color: #fff; } }

HTML

<div class="container">
<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Another link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>
</div>

large screens https://i.sstatic.net/wxeBJ.png

small screen https://i.sstatic.net/U25mh.png

UPDATE: With the introduction of BS4 alpha 6, the nav-justified has been reinstated, along with a new class nav-fill

Answer №2

With the release of Bootstrap alpha 6, the class nav-justified has made a comeback, accompanied by the introduction of a new class called nav-fill.

For more information, visit

To implement these classes, simply add them to your nav element.

<ul class="nav nav-pills nav-justified">
        ..
</ul>

Check out this example of a justified nav using Bootstrap 4: Bootstrap 4 Justified Nav

Answer №3

In the Boostrap v.4 alpha documentation, they originally had it displayed on this page, but unfortunately, it is no longer working as intended.

A ticket has been created regarding this issue, and there is already a pull request for the v4-dev branch available.

It would be impractical to post the entire code snippet here, so you can view the changes made here and patch your SASS file accordingly:

// Justified nav links
// -------------------------

@mixin nav-justified {
  width: 100%;

  .nav-item {
    float: none;
  }

  .nav-link {
    margin-bottom: $nav-tabs-justified-link-margin-bottom;
    text-align: center;
  }

  .dropdown .dropdown-menu {
    top: auto;
    left: auto;
  }

  @include media-breakpoint-up(md) {
    .nav-item {
      display: table-cell;
      width: 1%;
    }
    .nav-link {
      margin-bottom: 0;
    }
  }
}

// Move borders to anchors instead of bottom of list
//
// Mixin for adding on top the shared `.nav-justified` styles for our tabs
@mixin nav-tabs-justified {
  border-bottom: 0;

  .nav-link { // Override margin from .nav-tabs
    margin-right: 0;
    @include border-radius($nav-tabs-justified-link-border-radius);
  }

  .nav-link.active {
    @include plain-hover-focus {
      border: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color;
    }
  }

  @include media-breakpoint-up(md) {
    .nav-link,
    .nav-link.disabled,
    .nav-link.disabled:hover {
      border-bottom: $nav-tabs-justified-link-border-width solid $nav-tabs-justified-link-border-color;
      @include border-top-radius($nav-tabs-justified-link-border-radius);
    }
    .nav-link.active {
      @include plain-hover-focus {
        border-bottom-color: $nav-tabs-justified-active-link-border-color;
      }
    }
  }
}

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

The :not selector in a chained condition is not functioning properly for a child div

I have a child div that is being impacted by the .img class. Even when I use the :not selector for this div like so .main .content .index-exp .img:not(.view-image){ /*rest*/ } it continues to affect my div. You can view the issue at this link. Is this ...

htmlcsscss-selectors

Display the chosen HTML template in real-time

Recently, I started using Angular 2 and encountered an issue that I need help with. 1] I have created 2-3 templates for emails and SMS that will display predefined data. 2] I have also designed a screen with a dropdown menu containing options like email ...

angularjshtmltypescriptangular

Clicking on a hyperlink within an Angular Material button does not prompt the browser to navigate to the linked page

Currently, I am utilizing Angular Material with AngularJS v1. Encountering issues with a simplistic menu bar while utilizing angular material. Below is the piece of HTML code representing the menu bar: <md-toolbar layout="row" class="md-whiteframe-z3" ...

htmlangularjsbuttonangular-material

Just starting out with Boostrap; looking for ways to tidy up this code and achieve the intended effect

UPDATE: Check out the revised JS Fiddle link at the end of this post; I managed to achieve the desired result, but I believe there's room for improvement in the code! After experimenting with HTML/CSS for some time, I'm now working on my first l ...

htmlcsstwitter-bootstrap

Django - tallying timer in action

Looking to add a timer that begins when accessing this template: {% block content %} <h3>C-Test</h3> <p>In the text below, some word endings are missing. The gap is about half the length of the word, so you need to fill in the rest ...

javascripthtmldjangotimerdjango-templates

Creating if-else conditions in React can be achieved by utilizing the ternary

How can I make an if-else condition dynamic based on a button click? I have tried implementing it but it doesn't seem to work. I attempted to create conditions for different languages. For example, clicking the button labeled "Español" should print ...

htmlreactjs

The height of the footer element is gradually dwindling

Have you ever wondered why a footer element mysteriously shrinks in height when the browser window is resized? I attempted to create a fiddle with my code, but unfortunately, it's not replicable on JSFiddle so I won't be sharing it. This is how ...

htmlcss

What is preventing me from installing Angular Bootstrap?

Version Information: Angular CLI: 14.2.3 Node: 16.15.1 Package Manager: npm 8.12.1 Operating System: darwin x64 Encountered an error while trying to install Angular Bootstrap using NPM: npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! ...

node.jsangularnpmbootstrap-4node-modules

Ways to adjust the div height to match the span height

.headerDesc { width: 100% + 1px; height: 70px; background-color: #4d2765; margin: 0 -8px; } .headerDesc span { padding: 5px; position: absolute; color: white; font-family: 'Arial', sans-serif; text-al ...

htmlcss

Creating a Dropdown Filter using Vanilla JavaScript

I am currently working on a project for one of my college courses, which involves creating a dropdown list filter using pure JavaScript to filter a grid of images in HTML/CSS. The main challenge I am facing is that this filter needs to be able to work with ...

javascripthtmlcss

Change the class of the div when the first div is selected

My goal is to switch the class of the #klapp element (from .klapp to .klappe) whenever a click event happens inside the #label-it container, including when the #klapp element itself is clicked. The challenge is that I am not able to use unique IDs for each ...

javascriptjqueryhtmlcss

Having trouble bringing in css files

I'm having trouble loading a CSS file when trying to import it into another CSS file. I've tried various ways of defining the path but nothing seems to work. Any insights on what might be causing this issue? https://i.sstatic.net/IwaY1.png ...

css

What could be causing the span class data to not be retrieved by the getText method

Looking to retrieve the value of a span class called 'spacer-right big project-card-measure-secondary-info' <span class="spacer-right big project-card-measure-secondary-info">1</span> snippet of code: browser.waitForEl ...

javascripthtmlcssautomated-testsnightwatch.js

Can we make one tab disappear when another tab is clicked in Ionic 2 app menu icon?

I am working on a project using Ionic 2 and I have implemented multiple tabs in the application. However, I need to find a way to hide the top tab when the user clicks on the bottom tabs menu icon. Here is my Plunker for your reference. My goal is to ma ...

htmlcssangularionic2

Modifying webpage code

I am looking to develop a system where I can edit various elements such as the navbar, paragraphs, and images directly from a web page. I understand that this can be achieved with JavaScript, but I am facing the issue of my customizations reverting to defa ...

javascripthtmlcss

Generating RSS Feed on HTML View in Rails 4

I'm currently in the process of building my personal website using Ruby on Rails 4. One challenge I'm facing is trying to scrape Medium.com to display my Medium articles on my page. While the articles are showing up as intended, the RSS code is ...

htmlruby-on-railsrubyrss

How can I determine if a page is being rendered in Standards mode or Quirks mode by IE7?

Having some issues with CSS on a webpage. The code is valid and adheres to Strict HTML standards. It displays correctly in most browsers, but I'm experiencing problems in IE (specifically version 7). Is there a way to determine if the page is being re ...

htmlcssstandardsquirks-mode

Utilizing conditional statements like if/else and for loops within a switch statement in JavaScript allows for

I am currently developing a request portal that involves dynamic checkboxes, labels, and textboxes that are dependent on an option list. As a beginner in javascript, I am facing challenges with creating conditional statements. I have managed to make progr ...

javascriptjqueryhtmlcssswitch-statement

What is the best way to design distinct buttons for various devices?

For my current responsive web design project, I have utilized Bootstrap extensively. Recently, I encountered a new issue that I'm uncertain of how to tackle. The problem arises with the following HTML code snippet: <!-- button color depending on d ...

jquerycsstwitter-bootstrapresponsive-design

Missing HTML escape sequences following conversion to a string

The Android test was successfully run using the following code: public static void test() { String text="<html>" + "<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\" /> ...

javaandroidhtmldom