Guide to creating a see-through right border for vertical tabs using Bootstrap 4

I have been working on creating vertical tabs in Bootstrap 4 and have almost completed the task. However, I am facing an issue with making the right border of the active tab transparent. Despite several attempts, I have not been successful in achieving this effect. You can see what I have done so far in this working fiddle: https://jsfiddle.net/mgryf1v5/4/

HTML:

<div class="container">
   <div id="tabs-6ea2d5d5-9e96-4da1-89be-d8faff5a653d" role="tabpanel">
    <ul class="nav nav-tabs nav-tabs-left" role="tablist">
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-1" aria-controls="tab-1" role="tab" data-toggle="tab" aria-selected="false">Tab 1</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-2" aria-controls="tab-2" role="tab" data-toggle="tab">Tab 2</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-3" aria-controls="tab-3" role="tab" data-toggle="tab">Tab 3</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-4" aria-controls="tab-4" role="tab" data-toggle="tab">Tab 4</a></li>
        <li role="presentation" class="nav-item"><a class="nav-link" href="#tab-5" aria-controls="tab-5" role="tab" data-toggle="tab">Tab 5</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="tab-1" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 1
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-2" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 2
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-3" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 3
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-4" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 4
                </div>
            </div>
        </div>
        <div class="tab-pane" id="tab-5" role="tabpanel">
            <div class="row">
                <div class="col-12">
                    Content 5
                </div>
            </div>
        </div>
    </div>
</div>
</div>

CSS:

.nav-tabs-left {
    float: left;
    display: block;
    margin-right: 20px;
    border-bottom:0;
    border-right: 1px solid #ddd;
}
.nav-tabs-left .nav-link.active, .nav-tabs-left .nav-item.show .nav-link {
    border-color: #dee2e6 transparent #dee2e6 #dee2e6;
}

EDIT

Based on recommendations from @Rishi Raj, here is the final version of the CSS:

.nav-tabs-left {
    float: left;
    display: block;
    margin-right: 20px;
    border-bottom:0;
    border-right: unset !important;
}
.nav-tabs-left .nav-link {
  border-right: 1px solid #ddd !important; 
}
.nav-tabs-left .nav-link.active, .nav-tabs-left .nav-item.show .nav-link {
    border-color: #dee2e6 #fff #dee2e6 #dee2e6 !important;
}

For a live demonstration, you can view the updated fiddle here: https://jsfiddle.net/1rq4wv3z/

csstwitter-bootstrapbootstrap-4

Answer №1

.nav-link.active { 
  border-color: #dee2e6 #fff #dee2e6 #dee2e6 !important;
}
.nav-tabs-left { 
  border-right: unset !important; 
} 
.nav-link { 
  border-right: 1px solid #ddd !important;
}

Answer №2

.nav-tabs-left {
    float: left;
    display: block;
    margin-right: 20px;
    border-bottom:0;
    border-right-color: transparent ;
}
.nav-link {
    border-right: 1px solid #ddd !important;
} 
.nav-link.active {
border-color: #dee2e6 #fff #dee2e6 #dee2e6 !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

How to access the current class in Sass without referencing the parent class

.site-header .basket position: relative &-container width: 100% padding: 0 18px $basket: & &.opened #{$basket}-link border: 1px solid #e5e5e5 ...

csssass

The wells are surpassing the line

I'm attempting to arrange 3 Wells horizontally in one row, as shown below <div class="row" style="margin-top: 10px"> <div class="span4 well"> <h3 class="centralizado"><img src="/assets/temple.png" /> & ...

csstwitter-bootstraptwitter-bootstrap-rails

Header bar not extending across the entire width of the screen when viewed on mobile devices

View the problem screenshot hereWelcome to my first stackoverflow post, please be gentle if I make any mistakes. I'm currently working on a project for a course using Bootstrap 4. The issue I'm facing pertains to the navbar losing its full width ...

htmlcssbootstrap-4

Masonry layout organizes images in a vertical stack, with one image per row

After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...

javascriptcsstwitter-bootstrapjquery-masonrymasonry

Missing Bootstrap 3 Options Menu trip away

I created a table with 4 columns using the Bootstrap 3 grid system. Instead of utilizing the col-xs-* classes, which work well on mobile devices, I opted for the col-md-* classes. This decision was based on my preference to have larger and more visible ico ...

htmlcsstwitter-bootstrapmobileoptions-menu

Place two divs side by side with the second div filling up the remaining space on the line

Hello there, can anyone lend a hand with this problem? This is the code I have been working with: <html> <body> <div style="width=100%"> <div style="float:left; background-color:Red; height:100px">Red</div> <div st ...

htmlcss

When CSS is modified by inserting an extra div, it causes the positioning of other elements to shift towards

I'm currently working on adapting a method to make elements "sticky" for older browsers as discussed in this particular article. The basic idea involves implementing some JavaScript code that listens for scroll events. Upon detection of such an event ...

javascripthtmlcss

Injecting variable styles into my VueJS component

I am currently working on developing a custom progress bar to visualize the percentage of completed tasks. The approach I am taking involves using v-bind:styles and passing {width: dynamicWidth + '%'} to regulate the progression of the bar. To ac ...

javascriptcssvue.js

Customize Angular Material styles uniquely across various components

Within my application, I am utilizing two components that contain tab groups. The first component serves as the main page, where I have adjusted the CSS to enlarge the labels by using ViewEncapsulation.None. The second component is a dialog, and I aim to m ...

cssangularangular-material

Aligning a left-positioned div with a right-aligned div within a container

I'm trying to replicate this layout: https://i.stack.imgur.com/mUXjU.png Here is the HTML code I have so far: <div class="container"> <div class="floatingLeft">A right-aligned div</div> <div class="a">Lorem Ipsum< ...

htmlcssalignment

Is there a way to turn off the "swipe to navigate back" feature in Microsoft Edge using JavaScript or jQuery?

Working on a website that features horizontal object rotation. For instance, starting with the front view of an object followed by side, back, other side, and then back to the front. In this case, there are 24 images of an object, each taken at a 15 degre ...

javascriptjqueryioscssmicrosoft-edge

What steps can be taken to default to a Google web font when Helvetica is not available on the user's device?

Is there a way to have a font fall back to a specific one on Google Web Fonts (Open Sans) if the user does not have Helvetica installed? I'm looking for an efficient method where downloading the font is only necessary if needed. For example, I don&ap ...

htmlcssfontsfont-face

Excess space at the bottom of the Heatmap chart in Highcharts

I am facing an issue with a heatmap having extra space at the bottom that I cannot seem to remove. Despite trying various solutions from different Stack Overflow threads, such as adjusting chart.marginBottom, chart.spacingBottom, x and yAxis margins, and d ...

javascriptjqueryhtmlcsshighcharts

Side by side CSS list item with before element

Currently, I am working on displaying a list of 3 items where the list item number is larger than the actual text. I have been successful in achieving this part, but now my goal is to place them side by side. This is the code snippet I have implemented: ...

htmlcss

Setting up the file structure for customizing Bootstrap with Sass

Hello, I am currently setting up Bootstrap for customization using Sass. After creating an HTML page, I attempted to add my own custom properties to the custom.scss file. Unfortunately, these changes do not seem to affect my page as expected. I followed s ...

htmlcsssassbootstrap-5

Guide on integrating a newly bought template into an Angular 6 and Bootstrap 4 application

Although I have years of experience as a backend developer, I am relatively new to frontend development. Lately, I have been immersing myself in learning Angular 6 and Bootstrap 4 for an upcoming project at work. After setting up a basic Angular 6 applica ...

angularbootstrap-4angular6

Bespoke HTML, CSS, JavaScript, and PHP website designs within the Wordpress platform

I am a beginner in the world of Wordpress, coming from a background of creating websites from scratch. Currently, I am working on a Wordpress template (Astra) and looking to create a custom page using HTML, CSS, JavaScript, and PHP from the ground up to ad ...

javascriptphphtmlcsswordpress

Dynamic scaling and positioning of multiple images in relation to each other using CSS

I am currently working on layering images over a large logo and making sure it remains responsive. I want the overlaid images to maintain their position on the logo even when the browser window size is reduced. Here is what my current browser display look ...

htmlcssresponsive-design

Transforming the initial character of a label element into uppercase

When I receive an external HTML page, all the data comes in lowercase. I attempted to capitalize the first letter of each label tag using CSS, but it ended up making the entire text uppercase instead. Here is what I tried: .fontmodal { text-transform ...

javascriptjqueryhtmlcss

Click on a new tab to enable printing options for the page

I am looking to enhance the print page functionality on my website. Currently, when the print icon in the footer is clicked, it opens the printer dialog box directly. I would like to change this behavior so that when the Print icon is clicked, the contents ...

javascript.nethtmlcssprinting