CODEWITHSUNDEEP
htmlcsspixelbulma
jmrueda
jmrueda

Reputation: 1428

Trying to get Bulma pixel detail: Tabs with bottom border same width as text

I am using Bulma.io for some frontend I am building and wanted to go to pixel-detail level.

I was wondering if there is some scss edit for the TABS component I could use for getting the bottom border stretched to text, not to the whole div, like in the following image:

tabs in bulma

and here is my actual result where you can notice that the blue line is not just covering text, but going all to the next TAB:

my result in bulma

Thanks!

Upvotes: 0

Views: 552

Answers (1)

Ouroborus
Ouroborus

Reputation: 16896

You could use:

.tabs li.is-active {
    padding-left: 1em;
    padding-right: 1em;
}
.tabs li.is-active a {
    padding-left: 0;
    padding-right: 0;
}

However, due to the way Bulma requires the tabs to be constructed, doing this also makes it so the area to the left and right within the active tab are no longer clickable. This may not be an issue as the tab in question is the selected one so there is little reason to be clicking it.

Upvotes: 1

Related Questions