Bootstrap stylesheet overwrites my custom stylesheet

I have a .css stylesheet to configure my Bootstrap navbar but Meteor loads the merged css files before the Bootstrap css file gets loaded which overwrites my changes.I’ve tried adding an explicit link to my css file after the Bootstrap link, but it makes no difference

From “show source”:

<html>
<head>
  <script type="text/javascript" src="http://ff.kis.v2.scr.kaspersky-labs.com/A5E18DC7-F07A-D341-AC91-193B05BF8BA6/main.js" charset="UTF-8"></script>
  <script id='meteor-headers' type='application/ejson'>{"token":1501658235420.72,"proxyCount":1,"headers":{"x-forwarded-proto":"http","x-forwarded-port":"3000","x-forwarded-for":"127.0.0.1","cache-control":"max-age=0","upgrade-insecure-requests":"1","connection":"keep-alive","dnt":"1","referer":"http://localhost:3000/homepage","accept-encoding":"gzip, deflate","accept-language":"en-US,en;q=0.5","accept":"text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8","host":"localhost:3000","x-ip-chain":"127.0.0.1,127.0.0.1"}}</script>

  <link rel="stylesheet" type="text/css" class="__meteor-css__" href="/merged-stylesheets.css?hash=ad85f01850244631cc8857f94f08e233b1ef5e38">

  <link href='https://fonts.googleapis.com/css?family=Jolly+Lodger|Roboto:400,400italic,700' rel='stylesheet' type='text/css'>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="client/navbar.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <script src="http://getbootstrap.com/assets/js/docs.min.js"></script>

Eliminating the Bootstrap css link allows my navbar changes to work but it makes the rest of the page look like crap. I suppose I could chain another class to the HTML and css (myNav) but it is ugly and a chunk of work.

Suggestions for what I’m doing wrong or how to fix it? TIA.

There are three approaches to this problem:

  1. The simple approach: Use a special class on your body - like <body class='myAwesomeApp'> and scope your own css with this class. As the term ‘cascading’ in CSS says, this will override the standard styles, since your class is more specific.
  .myAwesomeApp .nav {
    background-color: red;
  }
  1. The complex approach: Use the SCSS version of Bootstrap, which allows you to control the load order and override Bootstrap-specific SCSS variables before importing the rest of Bootstrap. This approach is particularly useful if you would like to change the default colours for elements. Bootstrap SCSS uses SCSS variables like $brand-primary that allow theming, so you only have to change the colour in one line of code and it is applied to all classes that are referencing it.

  2. The combined approach: Use the regular bootstrap CSS, so you don’t have to fiddle with the SASS setup for Bootstrap. But still use SCSS to scope your classes by nesting them, which is not possible in standard CSS.

  .myAwesomeApp {
    .nav {
      background-color: red;
    }
  }
1 Like

How do I add a class to the <body> tag in Meteor? The <body> tag gets added automatically to wrap all of the templates.

Just add a .html file including a <body> tag, like this:

<body class="my-awesome-app"></body>

In my app, I am actually hooking the class to the html element. In this case, you have to use jquery to do that:

Meteor.startup(() => $('html').addClass('my-awesome-app'));

Just to add - this is a known issue and is being tracked here (add your :+1: vote accordingly!):

1 Like

Thanks for the hint. Left my :+1: there.

(Although purists might say that relying on a specific load order is not really CSS-conformant.)

1 Like