Webflow to Bootstrap, priority for exported CSS

Design help Custom code
1

Hello there.
Context
We’re designing a site on Webflow that is being imported into Bootstrap. The reason being there are many moving parts behind the scenes that the client is handling with their team, including databases and and libraries.

Issue
The issue they’re running into is that Bootstrap and its libraries are overriding some of the styling done in Webflow. The main issue we’ve noticed is some links are defaulting to Bootraps blue, and all links become underlined.

Question
Any ideas on how to give global priority Webflow’s styling over Bootsrap’s, or any other workaround?

Many thanks all!

2

You’d have to add !important to the webflow css properties. Or change the order in which the CSS is being imported and referenced to the project.

3

Thank you Austin.

Changing the order worked for most of it!

The links would still show the underline on hover, which we solved with a simple at the beginning:

a:hover { 
  text-decoration: none;
}

And to hide a dropdown menu arrow that Bootstrap still added to the dropdown toggle we identified it via inspector then used display: none in the code.

All solved!

Thanks again

1 Like