1

I have two css files

import "bootstrap/dist/css/bootstrap.min.css";
import "semantic-ui-css/semantic.min.css";

And I prefer the design of the bootstrap in the design where they refer to the same thing, how can you write in a code line to the site to prefer the bootstrap?

Dean Xu
  • 4,438
  • 1
  • 17
  • 44
R-S
  • 151
  • 10

1 Answers1

2

Usually what I do in such cases of CSS conflicts is roundup the classes that are being used by the element that is causing the conflict and then extract only those classes and have them as internal styles(inside the tags) because the CSS preferences you know is in-line > internal > external and id > class > element and also !important takes precedance. for more info refer here - What is the order of precedence for CSS?

As an example -

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<style>
.text-primary{
    color: black !important;
}
</style>

<div class="container">
  <h2>Contextual Colors</h2>
  <p>Use the contextual classes to provide "meaning through colors":</p>
 
  <p class="text-primary">This text is important.</p>
  <p class="text-success">This text indicates success.</p>

</div>

</body>

</html>

You see I didnt want the text-primary class so i redefined it internally with !important since its bootstrap css you need !important to override it.

Similarly you can extract the classes that are needed by your sidebar(menu) and then define them internally to override your external css.

Rudr Thakur
  • 330
  • 3
  • 12