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

Question

I am using ng2-bootstrap from valiant software. When I launch a website using an ng service, the page that is being served 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 explicitly pulls the second inline style from the file node_modules / bootstrap / dist / css / bootstrap.css. I want to override the background color of the body tag. I can modify the bootstrap.css file in the node-modules module, but this does not seem to be the correct solution.

Changing the style.css file does nothing. Even modifying the index.html file does not seem to do anything. Styles look overridden.

Any help would be most appreciated.

thanks

Answer 1

I found a solution after some digging.

The following was specified in the angular-cli.json file:

 "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 reorder the styles

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

and add any overrides to src / styles.css file

Answer 2

Perhaps they changed some things in the updates from this post in December. But I did not have to make any changes to my angular-cli.json file, but to indicate the only specified style was default styles.css , which is in the src root directory. But what ended up working for me, just added a few @import statements for my custom css files to the bootstrap.css file and made sure the stylesheet was listed in my index.html.

My setup is @angular 2.4.7, node-sass 4.5, node 6.9.5, bootstrap 4, ngBootstrap 1.0.0-alpha

Answer 3

The latest release of ng2-bootstrap contains instructions that I talked about how to use bootstrap 4 with @ angular / cli.
Most of the instructions should be applicable to bootstrap 3 without any problems. The main interest for you is that if you use SASS and define a variable.scss file, then any overrides you need can be placed in this file.
If you want to do this, you will have to use the SSS version of bootstrap (the github repository for the SASS version also shows the details of variable overrides).

Answer 4

If you use sass, which I advise you of, you can put your overrides after importing the boot file into the 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; }