Switch up the design on Bootstrap 4 navigation tabs

Trying to customize the appearance of the current tab in a nav-tabs setup has been a bit challenging. I've created a simple file to test this functionality. When a tab is clicked, the content switches correctly, but I'm struggling to apply specific CSS styles to the active tab.

Is there an error in the file I've created? And is there a straightforward way to achieve the desired styling, such as changing the background color of the active tab, using the existing resources linked in this document? My aim is to keep the project lightweight without relying on additional JavaScript.

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item active">
      <a href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane">
      <h2>Second</h2>
    </div>
  </div>
</div>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

cssbootstrap-4

Answer №1

After some exploration, I discovered that default Bootstrap 4 offered a solution that perfectly fit my needs. Here is the finalized version of the initial post.

  • Eliminated the "active" class from the <li> element
  • Included the "nav-item" class to the <li> anchors
  • Appended the "active" class to the first <li> anchor
  • Incorporated the "fade" and "show" classes to the first "tab-pane" <div>
  • Added the "fade" class to the second "tab-pane" <div>

The addition of the "fade" class in two instances was not necessarily required, but it did give a subtle touch.

<div class="container">
  <ul class="nav nav-tabs nav-justified">
    <li class="nav-item">
      <a class="nav-link active" href="#first10" data-toggle="tab">First</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#second10" data-toggle="tab">Second</a>
    </li>
  </ul>
  <div class="tab-content">
    <div id="first10" class="tab-pane fade show active">
      <h2>First</h2>
    </div>
    <div id="second10" class="tab-pane fade">
      <h2>Second</h2>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

Answer №2

When a tab is clicked, add a class with your desired styling to it.

Make sure to assign specific IDs to your tabs, such as #Tab1 and #Tab2

For example:

$('#Tab1').on('click', function () {
   $('#Tab1').addClass('active');
   $('#Tab2').removeClass('active');
});

Repeat the process for the second tab:

$('#Tab2').on('click', function () {
   $('#Tab2').addClass('active');
   $('#Tab1').removeClass('active');
});

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

Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Having an issue with this code snippet where nothing is being added. It seems like the variable result may not be taking a number or something else, but I'm not entirely sure why. $(document).ready(function () //document.getElementById(1).style. ...

javascriptjqueryhtmlcss

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

I would like to align the text of my list items to the left. Additionally, I want all the icons to be the same size as the envelope icon used in Gmail list item. Currently, my code looks like this: https://i.stack.imgur.com/9LNOs.png How can I achieve th ...

cssreactjsfont-awesomematerial-uitailwind-css

Positioning a text directly next to an image that are both hyperlinked to the same webpage located in the center of the image

When viewing my site on a mobile device, I want to have an image with text next to it that both link to the parent menu. However, I'm facing an issue with the text not aligning properly (it should be centered within the picture height but appears at t ...

htmlcss

Angular is throwing error TS2322 stating that the type 'string' cannot be assigned to the type '"canvas" while working with ng-particles

My goal is to incorporate particles.js into the home screen component of my project. I have successfully installed "npm install ng-particles" and "npm install tsparticles." However, even after serving and restarting the application, I am unable to resolve ...

htmlcssangulartypescriptparticle.js

Header of table remains fixed as user scrolls through data, allowing for easy reference. The left

Above, I have utilized some code from another answer here to display a table. However, I am now contemplating the possibility of customizing it so that the first column remains fixed for horizontal scrolling. Currently, I'm employing the following as ...

jqueryhtmlcss

CSS: Floating navigation bar that becomes fixed upon reaching the top of the page

Looking for a creative approach to achieve the following: An innovative navigation bar that initially appears on a page regularly but then becomes fixed at the top as I scroll down. An alternative perspective: imagine a navigation bar that starts off unf ...

csstwitter-bootstrapnavbar

Angular 6 CSS spacing dilemmas

We recently made the switch from Angular 5 to Angular 6 and noticed that there is no spacing between the buttons/icons, etc. We are looking to bring back the spaces between the buttons and icons. I have recreated the issue below. As you can see in the Ang ...

javascriptcssangularangular5angular6

Using Bootstrap to style the <option> element with RGBA colors

Struggling to figure this out and seeking assistance. I have a form using bootstrap where I can apply rgba color for my select tag but not for the options. Select CSS: select { background-color: rgba(0,0,0,0.25) !important; border: 1px solid rgba ...

jqueryhtmlcsstwitter-bootstrap

Tips for resolving the Firefox display problem with input[type="file"] using CSS

After researching articles, it became clear to me that input[type="file"] displays differently across various web browsers. I am in need of a simple solution using only CSS to address this issue as I only require adjusting the width of the element. The w ...

htmlcss

Is it possible to change the background color of a MUI theme in ReactJS by using Css

Currently, I am utilizing Material UI to create a theme that is functioning correctly. However, upon adding <CssBaseline/> to the App.js file, it unexpectedly changes the background color to white instead of the intended #1f262a specified in the inde ...

javascriptcssreactjsmaterial-ui

Engage in intricate animations on Blaze

Currently seeking an effective method for implementing animations within my app using Blaze. To provide further clarification, I have included a basic example below: <template name="global"> <h1>Hello everyone!</h1> {{> foo}} ...

cssmeteoriron-routermeteor-blazeanimate.css

Tips for positioning a box on top of a map in a floating manner

I am trying to figure out how to position the div with class box on top of the map in this jsbin. Can someone help me achieve this? Below is the CSS code I have for styling the box and body. body { font-family: "Helvetica Neue", Helvetica, sans-serif; ...

javascripthtmlcssd3.js

Attempting to align two div blocks side by side to occupy the entire page

http://jsfiddle.net/UeLMA/1/ Here's the HTML code snippet: <div id="left" style="background: red; display: inline-block; float: left"> aaaa<br /> aaaaa </div> <div id="right" style="background: yellow; float: left">&l ...

jqueryhtmlcss

Hover over the first element to remove its class and replace it with a different element

I am attempting to develop a function that adds the class = "actived" to the first Element. This class has a CSS style that highlights the element in question. I have a list of 4 lines and I want the first one to automatically receive this class, while t ...

javascripthtmlcss

Enhance your PrimeNG p-calendar by customizing the background-color of the dates

Hello, I am currently attempting to customize the appearance of the p-calendar, but I am struggling with changing the color of the displayed dates. Can anyone provide assistance? Thank you in advance. Below is my template: <div class="p-field p-co ...

htmlcssangularprimengprimeng-calendar

What is the best way to dynamically implement text ellipsis using CSS in conjunction with Angular 7?

i need to display a list of cards in a component, each card has a description coming from the server. In my component.html, I am using a ngFor like this: <div [style.background-image]="'url('+row.companyId?.coverUrl+')'" class="img- ...

cssangulartypescript

BS4 Dynamic Countdown Clock

I have successfully integrated a countdown timer into my website, utilizing the following HTML code: <div id="clockdiv"> <div> <span class="days"></span> <div class="smalltext">Days</ ...

javascripthtmlcsstwitter-bootstrapbootstrap-4

How are these background images able to remain in a fixed position like this?

Trying to name this question correctly was a bit tricky. Hopefully I got it right. I have a new client and they want their website to have a similar feel to . If you check out the index page and scroll down, there's this cool 'smooth animation& ...

htmlcssbackground-imagebackground-attachment

The content within the iframe is not displayed

I've set up a dropdown menu with separate iframes for each option. Here's the code I used: $(function(){ $('#klanten-lijst').on('change',function(){ $('#klanten div').hide(); $('.klant-'+t ...

javascripthtmlcssiframe

What is the method for toggling background URLs?

Currently, I am utilizing flaunt.js by Todd Moto for my navigation system. My goal is to seamlessly switch the hamburger image with another image when the mobile-menu is shown and hidden. Check out the demo here. For a detailed tutorial, visit this link. ...

javascriptjquerycsstoggleclass