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

Vixxy 0
Viewed 20

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:
Screenshot of inspect

Bootstrap v3.4.1

asp.net-core css
1 Answers

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

IT goldman0
Related