Is there a way to override the navbar.less css?

Question

Sorry if this is a silly question, I'm completely new to bootstrap and ASP.NET.

I'd really like to change the nav-link colours for my web application but applying inline CSS and changing the bootstrap.css is not working. According to inspect all CSS for the nav-links are being overridden by Navbar.less

Screenshot of inspect:

Bootstrap v3.4.1

Use **!important** in inline css like `color:blue !important`. It will override — Mrudhula Katta, Sep 24 '22 at 16:01

score 0 · Answer 1 · answered Sep 24 '22 at 16:23

Of course you should be compiling bootstrap's files combined with your style to make a perfect match, taking advantage of bootstrap variables, and overriding them in case of need. You can compile it automatically when saving using editor extension or other way you choose.

I assume you are using bootstrap 3 because it uses less files.

main.less <-- your file

@import "path/to/bootstrap.less";

// your overrides here: (see file variables.less)
@navbar-default-color:             white;
@navbar-default-bg:                pink;

// and also
.my-primary-border {
  border: 1px solid @brand-primary;
}

// and rest of your styles.

my-html.html

<!-- main.css is automatic output of main.less -->
<link rel="stylesheet" href="main.css">

If you're using bootstrap 4/5 it's the same idea. See here

Is there a way to override the navbar.less css?

1 Answers1