Override Bootstrap CSS Classes

I am trying to override the locked CSS classes on some Bootstrap elements so that I can style elements however I want, but I’m not having much luck.

I have tried in my own stylesheet to use the class names but the changes I’ve made just don’t display.

Here I have used the .nav-items class in my own CSS stylesheet to override the default styles but my changes aren’t showing up. Am I missing something? You can see this worked with .navbar as I have successfully overridden the background colour.

The key to overriding the default classes is first, to make sure you have the right class/id which with navbars can be a bit tricky. Secondly you just use the dots to the right of the class/id in the main Styles window to duplicate it. This way you make sure you have exactly what the other class had so you can overwrite them correctly.

My guess is that you have chosen the wrong HTML item or the wrong class and that’s why you’re not seeing the changes happen. Go back to the styles page and see the various classes that go with your selection in the HTML window. Roam around it a bit more until you find the right item to edit. If you need further help you’ll need to let us know exactly what it is you’re trying to change and I’m sure someone will be able to help you with that.

Ah! I see! Ok, so I have now hovered over some elements and can see the CSS code blocks attached to that element, they are context sensitive. I have gone through and clicked on the Bootstrap CSS blocks and pressed Copy to so they are in my own stylesheet. I’ve then edited in there to fit the style I am trying to achieve and it is now displaying (or I guess overriding the Bootstrap CSS code blocks).

Wow this was slightly confusing but I now can see how it all works. From this I have a suggestion. It would be amazing if we could choose to hide away the Bootstrap CSS code blocks in the Stylesheet panel, this way we get a contextual view of each element in the page that displays our own custom CSS code blocks (beats sifting through loads of CSS code blocks when you only want to work on your own custom CSS code blocks).

Thanks very much for the help!

I don’t see this in your screenshot, but the page is to the right, under the 3 dots. This shows you the page of any class or ID. These are clickable links that will take you directly to that class on that page. This is a great tool and gives you a shortcut to getting to any class/ID location.

Keep in mind that the site pages are context sensitive in that anything you click in the HTML window or app preview window will automatically update the Styles window to every class or ID linked to the selection. This includes all default, custom or 3rd party components This helps you to not have to wade through all the css, only the pertinent ones.

And once again it is a great tool to use as a shortcut to a specific class or ID when clicking the page link under the dots of any class/ID.

You can also just open your custom css files directly.