What is the best way to customize bootstrap/override settings?

One of my biggest frustrations is trying to set properties that aren’t set with bootstrap. For example, I want to change the navtabs to not have a solid 3px border around it when clicked. I’d also like to put a border around the sides and top of the tab to give my navtab content areas a bit more distriction. For example:

There are several times I want to modify a attribute for an element but I am unable as it’s locked for Bootstrap:

image

My question - can I just simply disable this? I don’t want to be constrained by this. I would like to be able to override this as I see fit. Is there any issue with doing so?

Have you tried theme manager? That might have the option to override this permanently.

If you do not wish to use that, then writing CSS manually would be the way to go. Use !important to override Bootstrap’s CSS.

1 Like

Yes. And I don't see anywhere to edit these areas - or I'm not looking in the right area. I only see the ability to edit basic settings like the colors, body, fonts, etc. I'm not really sure how/if Advanced is use. Is this the area you're referring to using?

Under the advanced tab see:

3 Likes

Thanks for your reply @ben.

Unfortunately, this seems like a LOT of white noise to filter through to find what I need. I almost feel as if all of these attributes are listed here but haven’t yet been organized like the “Basic tab” - and I must select the ones I wish to edit? The problem is, I don’t have much in the way of descriptions to know which attribute(s) is(are) actually is the one(s) I need. Is there any sort of reference for these or a general approach to finding the appropriate advanced variables?

edit: an “add all” option would be great here. For example, I know what the color is for a property I wish to change. That would be a great starting point for me in tracking down what to change in the advanced variables - whereas right now I’m trying to guess which of these are the property I’m wishing to adjust and selecting them until I hopefully find the correct one.

You are not constrained and you cannot disable this, it's how CSS works.

You can simply edit your styles either in the styles panel or directly in the custom css file you are using for your project.

Example:

.nav-tabs .nav-link {
    border: none;
}

will remove the borders around .nav-link placed in .nav-tabs.

2 Likes