How to override Bootstrap CSS Style to Customise using CSS

Question

I have this navbar in all of bootstrap:

.navbar {
  background-color: aqua;
}

<!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.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css">
  <link rel="stylesheet" href="bootstrap.min.css">
  <link rel="stylesheet" href="boot.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
  <script src="boot.js"></script>
</head>

<body>
  <div class="container-fluid">
    <nav class="navbar navbar-expand-md bg-dark navbar-dark">
      <a class="navbar-brand" href="#">Navbar</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
              <span class="navbar-toggler-icon"></span>
            </button>
      <div class="collapse navbar-collapse" id="collapsibleNavbar">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">Subjects</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</body>

</html>

My problem is when i have the code in my boot.css file:

The background of the navbar is still the dark colour that was implemented in the nav tag. How can I override bootstrap css styling and customise my own.

Bryan Elliott · Answer 1 · 2020-02-27T02:29:40.537

1

You have to remove the bg-dark class from the <navbar> element, and replace it with one of the bootstrap background color classes, like .bg-primary or some other color. For example:

<nav class="navbar navbar-expand-md bg-primary navbar-dark">

Or you can make your own, such as:

.bg-aqua {
    background-color: aqua !important;
}

and add it as a class to the <navbar>:

<nav class="navbar navbar-expand-md bg-aqua navbar-light">

Note: the navbar-dark and navbar-light classes will make the text in your navbar white or black, depending on which one you choose.

Here is the Bootstrap Navbar Color Scheme documentatation here.

edited Feb 27 '20 at 02:29

answered Feb 27 '20 at 01:52

Bryan Elliott

4,055
2
21
22

Elliot Thanks for the response. Unfortunately this did not work and it is still the dark colour. – user218030 Feb 27 '20 at 01:56
@user218030, ok yes, sorry about that. I edited the answer. Try that, that should work. – Bryan Elliott Feb 27 '20 at 02:02
I think you meant ```.bg-dark``` because with that it works. thanks. – user218030 Feb 27 '20 at 02:11
@user218030, oh good. I edited my answer. If it answered your question and/or it was helpful, would you mark it as the accepted answer please? (the checkmark next to the answer) – Bryan Elliott Feb 27 '20 at 02:25

score 0 · Answer 2 · answered Feb 27 '20 at 02:10

You could try changing the color by using id. If you want to change many elements at once this may not be the best solution for you tho.

Simply add the id of your choice in this line (id="navigationID in this example):

 <nav class="navbar navbar-expand-md bg-dark navbar-dark" id="navigationID">

Then declare the background color you want in css for this id:

#navigationID{
  background-color:aqua !important;
}

Here is a working version of what i'm talking about

https://jsfiddle.net/q6fb7k5o/

score 0 · Answer 3 · answered Feb 27 '20 at 02:31

bootstrap bg-dark has there own style with !important so that if you want to override bootstrap style you have to put more specification than bootstrap style or you can remove those bootstrap style. see below details,

How can I override Bootstrap CSS styles?

How to override Bootstrap CSS Style to Customise using CSS

3 Answers3