How to override twitter bootstrap styles in angular2 with ng2-bootstrap

Question

I am using ng2-bootstrap from valor-software. When I start the website using ng serve, the page that is served up has the following style tags in the header:

<style type="text/css">/* You can add global styles to this file, and also import other style files */
</style>

<style type="text/css">/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}

It is clearly pulling the second inline style in from the node_modules/bootstrap/dist/css/bootstrap.css file. I want to override the background-color on the body tag. I can change the bootstrap.css file in the node-modules folder, but that doesn't feel like the right solution.

Changing the style.css file doesn't do anything. Even changing the index.html file doesn't seem to do anything. The styles appear to be overridden.

Any help would be most appreciated.

thanks

Answer 1

I found the solution after some digging.

In the angular-cli.json file was the following:

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico"
  ],
  "index": "index.html",
  "main": "main.ts",
  "test": "test.ts",
  "tsconfig": "tsconfig.json",
  "prefix": "app",
  "mobile": false,
  "styles": [
    "styles.css",
    "../node_modules/bootstrap/dist/css/bootstrap.min.css"
  ],
  "scripts": [],
  "environments": {
    "source": "environments/environment.ts",
    "dev": "environments/environment.ts",
    "prod": "environments/environment.prod.ts"
  }
}

],

I just needed to switch the order of the styles

"styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

and add any overrides to the src/styles.css file

Answer 2

If you are using sass, which I advise you should do, then you can place your overrides after you import bootstrap in your styles.scss file. For example

// version 4
@import 'variables';
@import '~bootstrap/scss/bootstrap';

// START bootstrap override
.card {
  margin-bottom: 0.5rem;
}
.card-body {
  padding: 1rem;
}