Personalizing navigation tabs using Bootstrap

I've been working on creating a custom bootstrap navbar tabs, but I'm struggling to remove the borders and apply the custom colors. After some trial and error, here's what I have so far:

.nav-tabs, .nav-pills {
    text-align: center;
    border: none;
}

.nav-tabs > li > a, .nav-tabs > li.active > a {
    border-radius: 0;
}

Here is my current progress: https://i.sstatic.net/2ILak.png

And this is my desired outcome:

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

<div class="row justify-content-center">
                        <div class="col-7">
                            <ul class="nav nav-tabs nav-justified mb-4" id="myTab" role="tablist">
                                <li class="nav-item" role="presentation">
                                    <button style="text-align:right; font-family: 'Remora', sans-serif; padding-right: 30px;" class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
                                </li>
                                <li class="nav-item" role="presentation">
                                    <button style="text-align:left; font-family: 'Remora', sans-serif; padding-left: 30px;" class="nav-link" id="CGM-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
                                </li>
                            </ul>
                        </div>
                    </div>
javascripthtmlcssbootstrap-5

Answer №1

To start, you should remove the classes nav-justified and mb-4 from your ul.nav element. These classes are causing issues by setting the nav to flex-grow: 1, creating extra margin below your buttons. This results in stretched-out buttons with space above them, which doesn't match the desired layout shown in your example image. It's recommended to avoid using inline CSS within your HTML code; instead, keep your CSS separate for better organization. I've also introduced a new class named .nav-wrapper to the div.col-7 element. This allows for specific styling without affecting other instances of the .col-7 class in your project.

<div class="row justify-content-center">
  <div class="nav-wrapper col-7">
    <ul class="nav nav-tabs" id="myTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="basicInfo-tab" data-bs-toggle="tab" data-bs-target="#basicInfo" type="button" role="tab" aria-controls="basicInfo" aria-selected="true">Basic Info</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="CGM-tab" data-bs-toggle="tab" data-bs-target="#systemUse" type="button" role="tab" aria-controls="systemUse" aria-selected="false">System use</button>
      </li>
    </ul>
  </div>
</div>

I have provided CSS code to approximate the design in your example image. Some selectors are more specific than usual to override bootstrap styles without using !important. The 'Remora' font is used without a fallback to 'sans-serif' since bootstrap already includes a font-family stack. Additionally, a :hover state has been added for buttons for visual feedback. Feel free to explore and modify the CodePen linked below to customize further.

.nav-wrapper {
  background-color: #f1f1f1; 
}

.nav-wrapper > .nav {
  display: flex;
  justify-content: center;
  border: 0;
  margin-top: 1rem;
}

.nav-item > .nav-link {
  border: 0;
  color: #555;
  font-family: 'Remora';
  font-weight: 700;
}

.nav-item > .nav-link:hover,
.nav-item > .nav-link.active {
  background-color: #fff;
  border-color: #0a58ca;
  border-style: solid;
  border-width: 2px 0 0 0;
  border-radius: 0;
}

.nav-item > .nav-link.active {
  color: #0a58ca;
}

As displaying the final result here isn't possible due to bootstrap limitations, you can visit the linked CodePen to see the interactive example. Click on the link and feel free to reach out if you have any questions or need further assistance.

For reference, here's a screenshot of the completed design in its default state: https://i.sstatic.net/YdYmE.png

If you require clarification on anything, don't hesitate to ask.

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

The Javascript style.opacity function eliminates the leading zero from the input string

In my application, users have the ability to change the color of the background but not the pattern. They can adjust the background behind the pattern and the opacity of the pattern. Users are prompted to input a percentage, which is actually a number betw ...

javascripthtmlcss

Having trouble with the jQuery load function not functioning properly

I have encountered an issue with this code snippet while running it on XAMPP. The alert function is working fine, but the HTML content fails to load. I have included links to jQuery 3.2.1 for reference. index.html $(document).ready(function(){ $("#b ...

javascriptjqueryhtml

Issue with updating bound property correctly when dynamically generating components using v-for in Vue.js

Encountered a challenge with vue.js and seeking guidance on the best approach to address it. Here's a concise summary of the issue: Situation Data is fetched from a rest API, handled by a class called DataLoader using javascript prototype syntax. Th ...

javascriptasynchronousvue.jsvuejs2vue-component

Is it possible to move the Material UI TableSortLabel Arrow to the opposite side?

My table has columns that are both right aligned and left aligned, and I need them sorted. When the column is right aligned, I would like the sorting icon to be on the left side of the header. Otherwise, there is an awkward empty space where the icon shoul ...

cssreactjsmaterial-ui

Custom CSS for the Google Maps Circle Object

Currently, I am utilizing the Google Maps Javascript API v3 Circle object to display circles on the map. I am interested in customizing the CSS of this circle by incorporating some CSS animations. Although I am aware that custom overlays can be used for t ...

javascriptcssgoogle-maps-api-3

Switching the navigation menu using jQuery

I am looking to create a mobile menu that opens a list of options with a toggle feature. I want the menu list to appear when the toggle is clicked, and I also want to disable scrolling for the body. When the toggle menu is clicked again, the list should c ...

javascriptjqueryhtmlcssscroll

What is the best way to define one API route that accommodates two different query combinations?

Is it possible to define 1 API route with 2 different query combination options? We have 2 routes: GET /api/v1/resource?filter=byName&key=restaurant&city=chicago GET /api/v1/resource?filter=byLocation&lat=34&long=78 In soaJS, schema ...

javascriptnode.jssoajs

The page loads successfully at first, but upon refreshing, a 404 error occurs when using Zeit, Nextjs, and now

After recently updating from now v1 to v2, I encountered an issue where my pages would return a 404 error when reloading after pushing to production using now --prod. While everything worked fine locally with now dev, the routing seemed to be causing confu ...

javascriptreactjsnext.jsserverless-frameworkvercel

What is the best approach for writing a concise Select statement that produces a data list?

Currently, I am working on a small web application using Express.js and SQLite for local use. However, I am facing an issue when trying to perform a full select query on a table. All my scripts are written in JScript in 'use-strict' mode. I am a ...

javascriptnode.jssqliteexpress

Ways to access the scrollTop attribute during active user scrolling

I've been working on a website that utilizes AJAX to keep a chat section updated in real-time. One issue I encountered was ensuring the chat automatically scrolled to the bottom when a user sent a message, but remained scrollable while new messages we ...

javascriptjqueryhtmlajax

The request body parser for the express POST method appears to be devoid of

After encountering similar issues on Stack Overflow, I discovered a solution involving the use of: app.use(bodyParser.urlencoded({ extended: true })); app.use(bodyParser.json()); However, despite implementing this solution, the log for req.body is still ...

javascriptangularjsnode.jsexpress

What exactly is the purpose of the script type importmap?

Can you explain the role of <script type="importmap"> and why it has become necessary for my code to function properly? <script type="importmap"> { "imports": { "three": "http ...

javascriptimport

Does a specific HTML element exist that is unable to have JavaScript within its content?

Let me pose a question, and while the answer may be "no", it never hurts to inquire... I am in need of taking in formatted text as HTML markup and later displaying the HTML to showcase the formatted text. This is an extremely common situation. Even popula ...

htmlbrowserxss

How to populate a database with Facebook data by utilizing AJAX post and PHP

I've been developing a Facebook Canvas game and had it running smoothly on my localhost along with a local database via phpMyAdmin. However, after moving it online, I've encountered an issue with the database. Previously, the game would grab pla ...

javascriptphpmysqlajaxfacebook

Mediawiki needs to be able to respond effectively to constantly changing and evolving content

My extension generates content dynamically for certain pages. For example, I create headlines using <html> <h1>, <h2> and <h3> tags. I want my mediawiki to respond to these headlines and generate a directory dynamically. I attempte ...

phphtmlmediawiki

"Silently update the value of an Rxjs Observable without triggering notifications to subscribers

I'm currently working on updating an observable without alerting the subscribers to the next value change. In my project, I am utilizing Angular Reactive Forms and subscribing to the form control's value changes Observable in the following manner ...

javascriptangulartypescriptrxjs

Creating background color animations with Jquery hover

<div class="post_each"> <h1 class="post_title">Single Room Apartments</h1> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb" src="1.jpg"/> <img class="thumb last" ...

javascriptjqueryhtmlcss

Updating the DOM through Long Polling allows us to maintain existing attributes in jQuery Plugin

UPDATE: The functionality is all set; the pushes are working. The only issue I'm facing is that each push resets the #load_info div to empty. Is there a way to retain the original content inside the div, even though the content will be an updated vers ...

javascriptphpjqueryhtmljson

Challenges of Python Web Scraping: Insufficient Extraction of HTML Code

As someone new to Python, I am currently experiencing difficulties with my web scraping code. The script is able to access the website and bypass cookies successfully. However, it is failing to capture the entire HTML code. Here is a snippet of the HTML c ...

pythonhtmlselenium-webdriverweb-scrapingbeautifulsoup

Finding the element in the HTML using selenium and Python

Recently, I have been working on automated testing using Selenium. However, I have encountered a strange issue where I am unable to locate the element. Can someone please provide me with guidance on how to handle this situation? driver.find_element_by_xpa ...

javascriptpythonselenium