In Bootstrap 4, the positioning of :after is different compared to Bootstrap 3

Our bootstrap nav-tabs have a unique default look with an 'indicator' icon below the selected tab. This is achieved by styling the active anchor element as follows:

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

However, when migrating to bootstrap 4, we noticed that the indicator no longer aligns properly with the tab.

HTML

<div class="container">
  <div class="row">
    <div class="col-12">
      <ul class="pt-3 nav nav-tabs" id="nav-tab" role="tablist">
        <li class="nav-item">
          <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
        </li>
      </ul>
      <div class="tab-content" id="nav-tabContent">
          <div class="tab-pane fade active show" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
            <p>Home Content</p>
          </div>
          <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
            <p>Profile Content</p>
          </div>
        </div>
    </div>
  </div>
</div>

CSS

Javascript (inside document load or ready)

After applying our legacy CSS for the tabs in bootstrap 4, we encountered alignment issues with the indicator. See the updated look below:

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

For more details and to see the output, visit our JS Fiddle link: http://jsfiddle.net/nLe1b30u/

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Simply by including position:relative in the CSS for 

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover
, you can achieve the desired effect.

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
cursor: default;
position: relative;
}

Give it a try and see if it works for you!

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 about determining the map size based on Divine proportions?

Is there a way to make the map at https://codepen.io/sinanelms/pen/MqdNNY responsive to screen size changes? I attempted the following code but was unable to achieve the desired outcome. <style type="text/css"> body{ background:#fff;} #map ...

pythonhtmlflask-sqlalchemy

Form submission requires a checkbox to be checked

I have been searching for a way to make checkboxes required. Is there a method similar to using required="required"? Currently, I generate my checkboxes in the following manner and would really appreciate any guidance on this topic. It's crucial for m ...

javascriptjqueryhtml

The issue with jquery slideToggle is that it mistakenly opens all divs instead of just the specific div that should

My website has a dynamic page with a variable number of <div> elements. The concept is that users can click on the + symbol, which is represented by an <img> tag, to display the corresponding div. Currently, my code includes: PHP/HTML $plus ...

javascriptphpjqueryhtml

Tips for concealing a tab within Angular Bootstrap UI using ng-show/ng-hide

Angular Bootstrap UI is being utilized to display a tabset. The necessary script, ui-bootstrap-tpls-0.6.0.min.js, and some HTML template files are included in the setup. Check out the following markup: <tabset> <tab ng-hide="!hideme"> ...

twitter-bootstrapangularjsangularjs-directive

Press the button in an HTML document to activate JavaScript

What could be the issue with my code? I have a button in HTML <a class="btn btn-warning btn-mini publish-btn" href="#" data-rowid="@computer.id" data-toggle="modal" data-target="#myModal">Outdated</a> and my modal <fieldset style="text-al ...

javascriptjqueryhtmlcsstwitter-bootstrap

What causes getBoundingClientRect() in Javascript to occasionally produce decimal values?

Currently, I am experimenting with an HTML5 canvas element. A major concern of mine is setting up a mousemove event to monitor the movement of the mouse over the canvas for drawing and other purposes. Unfortunately, I have not been able to locate a definit ...

javascriptcsshtmlcanvas

Using TypeScript, apply an event to every element within an array of elements through iteration

I have written the code snippet below, however I am encountering an issue where every element alerts the index of the last iteration. For instance, if there are 24 items in the elements array, each element will alert "Changed row 23" on change. I underst ...

webtypescripthtml

Struggling to get Django and AngularJS to play nice?

After opening the file angular.html with AngularJS in Chrome, the table displays the array of information as expected. However, when attempting to use Django with the same angular.html file, the array is not showing up in the table. Unsure of how to procee ...

htmldjangoangularjs

Using V-for to iterate over a multi-dimensional array

As I venture into the world of vue.js, I find myself faced with the challenge of populating nested select elements using v-for. Despite scouring through various resources on this topic, I have been unable to determine a solution that fits my particular sce ...

htmlarraysvue.js

Enhancing User Experience with CSS

Is there a way to create a link within a div and change the hover color to indicate it's a link? The challenge is that my div contains both an image and text in separate divs. div { :hover { background-color: light cyan; } Currently, when I hov ...

htmlcss

Incorporating HTML5 audio elements in JavaScript

I am working on a project where I need to create a grid of 16 audio files with separate links for each in HTML, CSS and JavaScript. Each box in the grid should link to a different audio file. My initial thought was to use a table to achieve this, so I cre ...

javascriptcsshtmlaudio

"Enhancing Your Web Pages: Generating and Inserting HTML Elements on the Fly Using

For my master's degree project, I am working on developing a shopping web app. The issue I am facing is that I need assistance with creating a div and adding it to the HTML file with an ID matching the category name from the .ts file when the addCate ...

htmlangularbootstrap-4

"Items within mui Grid do not properly align within the Grid container

I'm struggling to fit two large Grid items inside a Grid container. The Grid container needs to be 100% of the screen's height (or parent container) Grid items are large and need to fill the container while remaining scrollable Image #1 shows t ...

cssreactjsmaterial-uiflexbox

Use jQuery and AJAX to update the current HTML content only when the image has finished loading

I am attempting to load a .php file that contains a 2Mb image into a specific div. While I can make this work with ajax, my issue is that I only want the content of the current div to be replaced with the new one once the image finishes loading. Currently ...

phpjqueryhtmlajaxloading

dragging and dropping files for easy upload

Here is a challenge I am facing: I am looking for a solution that allows users to drag multiple images from their local file system onto the flash/flex/html5 app. The app should then extract the file name details and communicate with the server. Once t ...

flashapache-flexhtmlfile-upload

Leverage flex columns in Bootstrap 4.0 for advanced layout options

Hey, I need some assistance to set up columns in my code. Here's the current code snippet: <div class="container-fluid h-100"> <div class="row h-100"> <div class="flex-column h-100">side menu</div> <div ...

csstwitter-bootstrapflexboxbootstrap-4twitter-bootstrap-4

Get rid of any empty space in the image preview icon

Is there a way to eliminate the white space that appears when mixing landscape and portrait images? I want the images to move up and fill the space, even if they don't align perfectly. Additionally, I would like the images to resize based on the scal ...

javascriptphphtmlcss

Hide the external div if the tab is active in Angular Bootstrap

How can I determine if a specific tab is active and then hide a div outside all tabs when it is active? Plunker: https://plnkr.co/edit/b9O9S7JxxgzhQKcKONkn?p=preview <div class="border"> Conceal me when Tab #3 is active. </div> < ...

javascriptangularjstwitter-bootstrapangular-ui-bootstrapangular-ui-bootstrap-tab

Optimizing images for typography in SEO

Dealing with font rendering issues across different platforms can be quite challenging (for example, Windows often has unsightly anti-aliasing, and TTF fonts are not anti-aliased at all). This led me to consider generating a separate PNG file for each head ...

htmlseo

Determining the worth of radio buttons, dropdown menus, and checkboxes

I am working on designing a menu for a pizza place as part of a learning project. The menu allows users to select their pizza size from small, medium, and large using radio buttons, and then customize it further with three select boxes where each selection ...

javascripthtmlajax