Hola! Im trying to remove the borders on the Tabbed content with a class but it doesn’t work. Why?
Im trying to remove those ugly borders to come with something like this after
What im doing wrong? Any one knows?
Im trying to remove those ugly borders to come with something like this after
What im doing wrong? Any one knows?
Not 100% sure I understand what you want it to do, but try adding this css in the header.
Change the #10A06F to any colour you want. I just made the rest of the borders transparent, so you will need to tweak it to suit your design.
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
border-bottom: 3px solid !important;
border-color: transparent transparent #10A06F!important;
}
.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
border-bottom: 3px solid !important;
border-color: transparent transparent #10A06F!important;
}
To space out the Tabs evenly apply the bootstrap class ‘nav-fill’ to the list
The unfortunate issue with trying to override some classes is you need to add ‘!important’ to the value or it doesn’t apply. Which the Class manager doesnt support at present. So you have the fun task of manually adding the styles.
1 Like
Don’t forget to add the CSS inside some style tags…
<style>
Css goes here
</style> 
1 Like
hahahahaha 
How it works like charm!! Thanks a lot!! Do you know how to do the line between the buttons?
Where do you get all this code? do you know them or there is a page you can check?
Just edit the CSS I gave you. You can see I made the top and the side border transparent. You can add a line with the colour to them.
Well everything is either standard Bootstrap 4 or I also use the Inspector tools in Safari to find what classes are effect different parts, you can test different properties out in the browser itself.
In the case of the tabs. I actually just used the tabs bloc in Blocs and inspected it.
If I tell you anymore you might need to go missing 
See this topic for info on creating TAB custom classes
Yeah. That’s the same code I posted above.
ah, I see it now.
Only there is no need to do this in HTML with a code editor.
All you need to do is add these classes via the ClassManager, then select the class, and make the edits using the class editor all within Blocs.
1 Like
Very true, and I would often suggest that. Although on the tabs, I experienced an issue where it needed ‘!important’ added, which the class manager doesn’t give us, and so the class didn’t over-ride.
That makes sense.
However, Stewie_Griffen was looking for guidance for common css options, in particular the control of the border lines. Using these classes within blocs provides that functionality.
1 Like
guys don’t fight over me! Im married already 
1 Like
How do I unsubscribe
1 Like
haha!! 
1 Like
You are correct. I re-tested it. There must have been something wrong with the project I tested it in before, where it wasn’t over-ridding without the !important.
1 Like
…so we aren’t getting a divorce, then?! 
I dont know… you’ve changed man. HAHAH
1 Like