Customize the default tab appearance in bootstrap version 5.2

Is there a way to customize the appearance of these tabs? I'm looking to change the color to match the primary color of Bootstrap.

https://i.sstatic.net/6HaUO.png

instead of

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

<!DOCTYPE html>
<html>

<body>

    <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="31535e5e45424543504171041f031f02">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
    <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="781a17170c0b0c0a1908384d564a564b">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">



<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" 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="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled">Disabled</a>
  </li>
</ul></body>

</html>

htmlcssbootstrap-5

Answer №1

Here is the CSS code you need to add:

a.nav-link.active {
  border: transparent;
  border-bottom: 4px solid green !important;
}
<!DOCTYPE html>
<html>

<body>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="690b06061d1a1d1d1b0819295c475b475a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2c0cdcdd6d1d6d0c3d2e2978c908c91">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

  <ul class="nav nav-tabs">
    <li class="nav-item">
      <a class="nav-link active" aria-current="page" 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="#">Link</a>
    </li>
    <li class="nav-item">
      <a class="nav-link disabled">Disabled</a>
    </li>
  </ul>
</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

What is the best way to position elements at the top and bottom of a container?

I'm struggling to align one of the elements in my container to the top while using flexbox. All elements are currently aligned to the bottom, but I want a specific text to be at the top of the container. jQuery(document).ready(function($) { ...

htmlcssflexbox

The Vue component appears to be missing from the HTML code

I recently began learning Vue.js in school, and for my first assignment I need to print a h2 from a Vue component. However, I am having trouble getting it to work. Below is the code for the Vue component that I have created. var app = new Vue({ ...

javascripthtmlvue.js

Establish a buffering system for the <video> element

Currently, I am facing an issue with playing videos from a remote server as they take an extended amount of time to start. It appears that the entire video must be downloaded before playback begins. Is there a way to configure the videos so they can begi ...

javascripthtmlvideowebhtml5-video

Semantic UI allows for both left and right action input functionalities to be utilized

Is there a way to add actions on both ends of an input field? Here's what I've tried so far: <form class="ui form"> <div class="ui left action input"> <select class="ui compact selection dropdown" name="seats"> ...

htmlcsssemantic-ui

Placing toast notifications on top of dialog modals

When trying to combine a DaisyUI modal (a TailwindCSS UI library) with a toast alert library from GitHub, I'm facing an issue where the global toast alerts are not appearing above the modal dialog. Despite experimenting with various CSS options using ...

htmlcssmodal-dialogsveltetoast

What are the best methods for aligning pseudo elements vertically?

I am facing an issue with the placement of a before and after pseudo element for articleSubTitle. The problem occurs when the text from articleSubTitle wraps to a new line within a small container or on mobile devices. This causes the after element to appe ...

htmlcss

Stylized search input inspired by Pinterest with a bubbly design

When it comes to my search bar, I want the user's entered keywords to be displayed within a bubble that has a delete option when they press space to add another keyword. This functionality is similar to what Pinterest does with their search bar, as de ...

javascripthtmlcss

What is the best way to retrieve all of a user's records based on a specified selection

My HTML text input field looks like this: <input id="CustID" name="CustID" dir="rtl" value="<?php echo $CustID;?>" size="35" required="true" maxlength="9" > Whenever a user enters their number, I want a select box to display all tickets assoc ...

phphtmlajaxselect

Directional Div CSS Transition

Is it feasible to determine the starting direction of a CSS transition? I've designed a div that enlarges in height when hovered over; however, it's situated at the bottom of the page, causing the scrollbar to extend downward. Ideally, I would ...

jquerycsstransitiondirection

JavaScript for Verifying Phone Numbers

After extensive research and tutorials, I am still unable to figure out what is going wrong with my work. I have a button that looks like this: Despite Stack Overflow causing some trouble for me, please ignore the missing class as it is there. This is no ...

javascripthtmlcss

Require guidance and resolution

<div class="container"> <div class="top-section"> <img id="image1" /> <img id="image2" /> </div> <div class="content"> ... </div> <div class="bottom-section"> ... </div> </div ...

jquerycss

What is the best way to eliminate tags from a BeautifulSoup-scraped list?

When using beautifulsoup to scrape a page, I am trying to extract the "title" by searching for specific tags: title = [text.find_all('h1', {'class', 'entry-title'}) for text in texts] The resulting output is a list like this: ...

pythonhtmlbeautifulsouptags

Ways to set up various Content-Security-Policies and headers in your application?

In my email application, I am trying to prevent alerts in JavaScript by using a CSP header. However, even with the current policy in place, alerts can still execute when I send an HTML document attachment that contains script tags. Changing all JavaScript ...

javascripthtmlsecurityxsscontent-security-policy

Tips for stopping the loading of background images on an image slider

I am utilizing unslider to showcase an image slider on the landing page of my website. The slides are designed with background images in the CSS, and they adjust based on the media query. My concern is that I don't want all the slider images to load a ...

jquerycssimageoptimization

Is it possible to set a unique identifier in Vue.js that persists even after the page is reloaded?

Currently, I'm working on a small project diving into Vue js - a Habittracker. Unfortunately, there is a bug in my code. When the page is reloaded and new habits are added, the function that should change the background doesn't work as expected. ...

javascriptcssvue.jslocal-storagequasar-framework

Adding a dynamic object to the secondary column header of an output table: A step-by-step guide

Working on a transition table module, my main challenge is presenting the output in a user-friendly manner. In the past, I used Excel for this task, where making the table readable was simple but extracting data from millions of rows took hours. Now with R ...

htmlrshinytransitiondt

How can I trim a value using one-way data binding in Angular?

Is there a way to trim values in Angular using one-way data binding? Can this be done directly in the component.html file rather than in typescript? I tried the following but it didn't work: <P>{{country.trim()}}</P> Thanks ...

htmlangular

Discovering how to adjust the "border-spacing" in a React Material-UI Table to ensure each row is nicely separated

I am looking to create Material-UI Collapsi Table Rows with separate styling. Check out the link for more information: https://material-ui.com/components/tables/#CollapsibleTable.tsx const theme = createMuiTheme({ overrides: { MuiTable: { root ...

cssreactjsmaterial-ui

The Jquery script seems to be malfunctioning on one specific page while working perfectly fine on

I received a jQuery script from a foreign web page that I'm trying to implement on my own site. $(function () { var $txt = $('input[id$=TextBoxFiltroProv]'); var $ddl = $('select[id$=DropDownListProv]'); var $items = $ ...

jqueryasp.netwebhtml

Improving the style of Google Maps InfoWindows for right-to-left languages

I'm currently working on a Google Maps marker infowindow and trying to adjust the padding specifically for RTL languages. Here's what I've attempted so far: google.maps.event.addListener(marker, 'click', function () { i ...

javascriptjquerycssgoogle-maps