Modifying the appearance of Bootstrap 4 Nav-tabs using CSS

I have implemented Bootstrap 4 Nav-tabs as shown below:

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
      aria-selected="true">SavedAssets</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#submitted" role="tab" aria-controls="profile"
      aria-selected="false">SubmittedAssets</a>
  </li>
</ul>

I am looking to customize the appearance of my nav-tabs to resemble the design in this image: Tabs image

The desired effect is for a blue line to highlight the active tab, and move to the next tab when clicked.

Any assistance with writing CSS code for this would be greatly appreciated. Thank you!

cssbootstrap-4tabs

Answer №1

By following this method, you can achieve the exact result you desire while minimizing the use of !important

The CSS snippets provided above and below both serve the same purpose, but the one below is simpler and requires less code

.nav-tabs .nav-link, .nav-tabs .nav-link.active, .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
    color: gray;
}

.nav-tabs .nav-link.active {
    color: #000000;
    border-radius: 0;
    border-bottom: 2px solid blue;
}


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<style>
.nav-tabs .nav-link {
    color: gray;
    border: 0;
    border-bottom: 1px solid grey;
}

.nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: 1px solid grey;
}

.nav-tabs .nav-link.active {
    color: #000000;
    border: 0;
    border-radius: 0;
    border-bottom: 2px solid blue;
}
</style>

<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
        <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home"
        aria-selected="true">SavedAssets</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" id="profile-tab" data-toggle="tab" href="#submitted" role="tab" aria-controls="profile"
        aria-selected="false">SubmittedAssets</a>
    </li>
</ul>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Answer №2

You can customize the Bootstrap stylings in your own CSS file by overriding them. Here's an example:

.nav-link {
  background: #ffffff;
  color: #000000;
  border-bottom: 1px solid grey !important;
  border-color: none !important;
}

.nav-link.active {
  border-bottom: 2px solid blue !important;
  color: #000000 !important;
}

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

Creating an HTML Page and Hosting it on a Server

Currently, I am in the process of learning how to set up an HTML page on a server. Although I have managed to do so, the problem is that an index page appears by default. I do not want this page to show; rather, I would prefer my home page to be visible. Y ...

htmlcssweb-hostingfile-management

Issue with Gmail failing to render CSS in HTML email (svnspam)

After successfully setting up and configuring svnspam, I noticed that the emails sent to my Gmail account are missing the colored diffs. When examining the original email using Gmail's view original feature, I found the CSS code as follows: <html ...

htmlcssemailgmail

I have written code in JavaScript, but now I am interested in converting it to jQuery

What is the best way to convert this to jQuery? showDish("balkandish1") function showDish(dishName) { var i; $(".city").css('display', 'none'); $("#" + dishName).css('display', 'block'); } ...

javascriptjqueryhtmlcss

Move your cursor over the image to activate the effect, then hover over it again to make the effect disappear

Looking to enhance my images with hover effects. Currently, all the images are in grayscale and I'd like to change that so that when you hover over an image, it reverts to full color and remains that way until hovered over again. I've noticed so ...

javascripthtmlcss

JavaScript issue causing unexpected behavior in top and left positions

I've been experiencing an issue with my JavaScript code on an HTML file. Despite changing the top or left values, the image does not move as expected. I've spent hours searching for a solution and even tried copying tons of different code snippet ...

javascripthtmlcss

Indent the text within a span element that is displayed as an inline block

I am in search of a solution using only CSS for the following issue. Take into account the HTML below: <p> <span>Some text</span> <span>Some text</span> </p> Both <span> elements are set as inline-block. ...

css

Header Dropdown Problems

Hey there, I have a question regarding my header setup. I currently have two headers in place: Whenever I click the notification button, the dropdown menu seems to disrupt the layout of the header. Here is a screenshot for reference: Below is the CSS cod ...

htmlcss

Tips for implementing a default font on a website

I've incorporated a unique font into a specific section of my website design, but I'm aware that this particular font may not be available on most of my users' computers. Is there a method to apply this font to selected text without resortin ...

javascripthtmlcss

How can I place a DOM element without relying on style properties?

Before diving in, let me provide some context. I am currently developing a visual element that operates similar to a spreadsheet. It features scrollable content areas in both directions, with axis indicators on the left and top that remain visible at all t ...

javascriptcssspreadsheet

Easily center list item numbers vertically within fixed height containers

I am facing an issue with the alignment of ordered list item numbers in a list with fixed height and vertically centered content. The numbers seem to be positioned inaccurately. li { height: 80px; border: 1px solid black; } li > span { heigh ...

htmlcss

Enhance your Vue app by dynamically modifying classes with Tailwind

I am working on a Vue3 application that utilizes Tailwinds configured in the tailwind.config.js file. My question is, can I dynamically modify the value of a preconfigured class from the tailwind.config.js file? For instance: tailwind.config.js: const d ...

cssvue.jstailwind-css

Static Sidebar integrated with Twitter Bootstrap version 2.3.5

Currently, I am in the process of learning how to incorporate a fixed sidebar using Twitter Bootstrap 2.3.5. Below is a snippet of the code I have been working on: <div class="container"> <div class="row"> <div class="span4" id="sid ...

htmlcsstwitter-bootstrap

Having difficulty changing placeholder text style in Scss

I'm a newcomer to SCSS and I'm attempting to customize the color of my placeholder text from light gray to dark gray. Below is the HTML code snippet: <div class="form-group"> <textarea class="thread-textarea" ng-maxlength="255" ma ...

csshtmlsass

Difficulty aligning two images in one div using HTML and CSS

Having trouble with HTML and CSS. I have a div containing 2 images - one for background and the other for an avatar image that I can't seem to center. I've tried using margin:0 auto; and display:block; but it's not working. Current HTML pag ...

htmlcssimagealignment

Grid Property Equivalent to Flex-Grow

I stumbled upon a bug in the way Chrome version 75 handles flexbox. Therefore, I am curious to explore if the issue persists with grid, but for my test to be accurate, I need a grid property that functions similarly to flex-grow considering the current str ...

csscss-grid

Tips for adjusting the up and down controls and spins of a date input after modifying its height

After adjusting the height of my inputs (date type) to 40px, I noticed that the up and down controls are no longer aligned with the text inside the field. I am looking for a solution to either adjust the height of the spins or remove them if necessary in ...

javascriptjquerycsshtml

Style your Checkbox Button with the Checkbox component from Element Plus

Currently, I am utilizing Vue 3 along with the Element Plus library. My goal is to modify the hover, active, and select colors of the Checkbox Button that I have implemented. Unfortunately, my attempts to do so have not been successful. I essentially copie ...

javascripthtmlcssvue.js

What is the best way to ensure input text fills the entire grid?

Take a look at this code snippet: <div class="form-group col-md-6"> <label class="col-md-4">Last Updated (Real Time)</label> <input class="form-control col-md-8" type="text" ng-model="status.lastUpdated" ng-readonly="true"/ ...

htmlcsstwitter-bootstrap-3col

ReactJS Navbar component experiencing CSS hover bug

While developing a navbar component in React, I encountered an unexpected issue - the hover effect on my navigation links suddenly stopped working. Strangely enough, the cursor: pointer functionality still operates on my logo but not on the nav links durin ...

htmlcssreactjsweb-deploymentreact-component

Consistent CSS alignment across all browsers

I have designed a four-digit counter that needs to be displayed in the bottom right corner of the page. Each digit is represented by a block image as a background. It is functioning properly in Chrome, but there are compatibility issues with IE7+ and Firef ...

csscross-browseralignment