Bootstrap 4.6 - new feature: flexible vertical pills and sleek horizontal tabs (inactive tab no longer highlighted)

I recently implemented Bootstrap 4.6 into my project.

The page I am working on includes both vertical pills and horizontal tabs. While the vertical pills are displaying correctly, I have encountered an issue with the styling of the horizontal tabs when they are selected.

Below is a snippet of my HTML code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <!-- Bootstrap and jQuery CDNs -->
  
  <style type="text/css">
/* Custom CSS goes here */

  </style>

  <title></title>
</head>

<body>
  <div class="profile-posts tab">
    <div class="row">
      <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
        aria-orientation="vertical">
          <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href=
          "#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"
          name="v-pills-home-tab">Foo</a> 

          <a class="nav-link" id="v-pills-profile-tab"
          data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls=
          "v-pills-profile" aria-selected="false" name="v-pills-profile-tab">Bar</a>
          
          <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href=
          "#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected=
          "false" name="v-pills-messages-tab">FooBar</a>

          <a class="nav-link" id=
          "v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
          aria-controls="v-pills-settings" aria-selected="false" name=
          "v-pills-settings-tab">FoofooBar</a>
        </div>
      </div>

      <!-- Horizontal tabs content -->

      <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
          aria-labelledby="v-pills-home-tab">
            <ul class="nav nav-tabs">
              <li class="active"><a href="#first" data-toggle="tab">Menu 1</a></li>

              <li><a href="#second" data-toggle="tab">Menu 2</a></li>

              <li><a href="#third" data-toggle="tab">Menu 3</a></li>
            </ul>

            <div class="tab-content">
              <div id="first" class="tab-pane active">
                Menu 1 items
              </div>

              <div id="second" class="tab-pane">
                Menu 2 items
              </div>

              <div id="third" class="tab-pane">
                Menu 3 items
              </div>
            </div>
          </div>

          <!-- Remaining tabs go here -->

        </div>
      </div>
    </div>
  </div>
</body>
</html>

I am currently seeking guidance on how to address the styling issue where the selected tab is not highlighted properly. Additionally, there seems to be some spacing concerns between the tabs that may require adjustment in the CSS.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Insert This Class for nav-tabs > a tag nav-link

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790d170f1709">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d7b5b8b8a3a4a3a5b6a797e3f9e1f9e7">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>


  <style type="text/css">
/*<![CDATA[*/
  /* temp */

  .profile-posts .navbar {
  background-color: grey;
  min-height: 60px;
  }

  .profile-posts .navbar-default .navbar-text {
  color: #ffffff;
  }

  .profile-posts .nav-tabs > li.active > a, .profile-posts .nav-tabs > .profile-posts li.active > a:focus, .profile-posts .nav-tabs > li.active > a:hover {
    color: #555;
    cursor: default;
    background-color: #fff;
    border: 1px solid #ddd;
        border-bottom-color: rgb(221, 221, 221);
    border-bottom-color: transparent;
  }
  /*]]>*/
  </style>

  <title></title>
</head>

<body>
  <div class="profile-posts tab">
    <div class="row">
      <div class="col-3">
        <div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist"
        aria-orientation="vertical">
          <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href=
          "#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true"
          name="v-pills-home-tab">Foo</a> 

          <a class="nav-link" id="v-pills-profile-tab"
          data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls=
          "v-pills-profile" aria-selected="false" name="v-pills-profile-tab">Bar</a>
          
          <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href=
          "#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected=
          "false" name="v-pills-messages-tab">FooBar</a>

          <a class="nav-link" id=
          "v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
          aria-controls="v-pills-settings" aria-selected="false" name=
          "v-pills-settings-tab">FoofooBar</a>
        </div>
      </div>

      <div class="col-9">
        <div class="tab-content" id="v-pills-tabContent">
          <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel"
          aria-labelledby="v-pills-home-tab">
            <!-- Nav tabs -->

            <ul class="nav nav-tabs">
              <li><a class="nav-link active" href="#first" data-toggle="tab">Menu 1</a></li>

              <li><a class="nav-link" href="#second" data-toggle="tab">Menu 2</a></li>

              <li><a class="nav-link" href="#third" data-toggle="tab">Menu 3</a></li>
            </ul><!-- Nav tabs content -->

            <div class="tab-content">
              <div id="first" class="tab-pane active">
                Menu 1 items
              </div>

              <div id="second" class="tab-pane">
                Menu 2 items
              </div>

              <div id="third" class="tab-pane">
                Menu 3 items
              </div>
            </div>
          </div>

          <div class="tab-pane fade" id="v-pills-profile" role="tabpanel"
          aria-labelledby="v-pills-profile-tab">
            Bar
          </div>

          <div class="tab-pane fade" id="v-pills-messages" role="tabpanel"
          aria-labelledby="v-pills-messages-tab">
            FooBar
          </div>

          <div class="tab-pane fade" id="v-pills-settings" role="tabpanel"
          aria-labelledby="v-pills-settings-tab">
            FoofooBar
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

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

Validating Forms in AngularJS: Ensuring At Least One Input Field is Not Empty

Consider the following basic HTML form: <form name="myForm" action="#sent" method="post" ng-app> <input name="userPreference1" type="text" ng-model="shipment.userPreference" /> <input name="userPreference2" type="text" ng-model="shipm ...

javascripthtmlvalidationangularjs

Is it possible to apply styling to an element based on the position property of its ancestors using only CSS?

Wondering if it's possible to style an element based on its ancestors' CSS property value. Consider the HTML snippet below: <div><!-- ancestor --> <!-- Any number of descendant levels before reaching the target div --> < ...

csscss-position

Creating a circular image in a responsive navigation bar

Currently, I have a chat navigation bar with divs representing different users, each displaying a photo of the user. My goal is to have these photos displayed as perfect circles. To achieve this, I am using padding-bottom and width properties. However, I a ...

javascripthtmlcss

Using JavaScript to Toggle Visibility of Div Elements

Hi there! I'm having some trouble with a code that is supposed to show/hide div content based on the selection from a jump menu. Unfortunately, it's not working as expected. Here is the snippet of my code: JS: function toggleOther(chosen){ if ( ...

javascripthtmlasp.nethtml-table

Persist the checkbox value in the database and update the status of the label accordingly

I need a checkbox for user preference selection that is stored in a MySQL database for constant availability. The label should change to "Enabled" when the checkbox is selected and vice versa. Upon saving (submitting) the page, an alert message should disp ...

javascriptphpjqueryhtml

Child element within a nested CSS grid expands or shifts beyond its container

Explore my CodePen project here Greetings, I am currently working on creating a grid layout showcasing 6 links to various projects. Each link is comprised of an image template along with a detailed text description below it. The parent container for each ...

csscss-grid

Tips on styling HTML using a query value in string format

When using ASP.NET razor and SQL Server 2008 R2, I have a local variable declared in the following manner: var tsmMtd = db.QueryValue(" SELECT b.Name, SUM(subtotal) totalSUM FROM DR_TRANS a INNER JOIN Staff b ON a.Salesno = b.Staffno WHER ...

htmlcssasp.netsql-server-2008razor

How to add data to Laravel after successful ajax request

I have a div containing bids: @foreach($bids as $b) <div class="bids notice notice-lg"> <strong>{{$b->user->name}}</strong> is offering <span style="font-size: 18px" class="label label-success">{{$b->bid}} €</span ...

javascriptphpjqueryhtmlajax

Interactive tables created using Google Visualization

I have a Google visualization data table that works well, but I am facing an issue with the width of the table. When I click as shown in the image, I call the function drawTable(); and then I encounter this: As you can see, the table does not have a width ...

javascriptjqueryhtmlcssgoogle-visualization

Learn how to dynamically add a class to an element when hovering, and ensure that the class remains even after the mouse has

I'm facing difficulty with this task - when hovering over elements, an active class should be added to them. However, when moving the mouse to another section, the active class should remain on the last element hovered. Additionally, the first block s ...

javascriptjquerycss

Mistake in Timestamp Separation - JavaScript

I have a Timestamp retrieved from MSSQL and displayed on a Webclient. The timestamp reads: Thu Jan 01 18:00:00 CET 1970, however, I am only interested in the time format: 18:00 or 18:00:00 (preferably the former). <script> var timestamp = ...

javascriptjqueryhtmldatetime

Ensure that a v-card in Vuetify/Vue 2 is consistently square in shape, yet capable of adjusting its size dynamically

I am facing an issue where I am trying to make sure a v-card always maintains a square shape (or any other aspect ratio set), even if it means there is scrolling or cut-off text/components inside the card. For example, I want this v-card with lorem ipsum ...

cssvue.jsvuejs2vuetify.jsaspect-ratio

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?

In the index.php file, there is a script that triggers an ajax call when a header element is clicked. This call sends a $selection variable to ajax.php, which then replaces #div1 with the received HTML data. <script> $(document).ready(function(){ ...

javascriptphpjqueryhtmlajax

Dimensions of CSS Buttons

On my screen, I have 3 buttons with varying sizes determined by their padding. As the text wraps within each button, they adjust in height accordingly. However, the issue arises when the buttons end up being different heights. Instead of setting a specific ...

htmlcss

Where will the user's input be stored?

Consider the following HTML code: <div class="form-group"> <label class="col-md-3 col-xs-3 col-sm-3 control-label">Phone</label> <div class="col-md-4 col-xs-4 col-sm-4"> <input id="input ...

javascripthtmlhtml-input

Unable to See Success Notification on First Attempt

I am facing an issue with displaying a message when adding a new record. The first time I add a record, the message shows up correctly. However, if I try to add another record, the message does not appear even though the record is added successfully. Here ...

javascripthtmljquery

An error message pops up when using Next.js with Sass, indicating that a suitable loader is required to handle this file type

I've been struggling to properly wire up my next.js project with SCSS, but no matter what I try, it just won't work. I double-checked my setup for compiling SCSS files, but the error message keeps popping up: /scss/style.scss 1:0 Module parse f ...

javascriptcsssassnext.js

Issue with animating multi-column layout in Chrome causing display problems

I'm currently utilizing jQuery to create an animated multi-column layout that extends off the screen horizontally. I have implemented two controllers - one red and one blue - to navigate back and forth within the layout. Strangely enough, while the an ...

jqueryhtmlgoogle-chromecssmultiple-columns

React Transition for Mui Menu

I'm having trouble implementing a Mui menu on my website and adding a transition effect from the right side. Here is the code I have tried: <Menu transitionDuration={1} open={Open} onClose={Close} MenuListProps={} className="nav"> ...

cssreactjsmaterial-uimenu

"Learn how to showcase a picture in full-screen mode when the webpage is opened

I recently came across a script on Stack Overflow that allows me to select an image at random from an array. The script can be found here: Script to display an image selected at random from an array on page load However, I want to take this concept furthe ...

javascriptjqueryhtmlcss