How to Overwrite Styling in Twitter Bootstrap

How to overwrite styling in Twitter Bootstrap

Add your own class, ex: <div class="sidebar right"></div>, with the CSS as

.sidebar.right { 
    float:right
} 

How to overwrite Twitter Bootstrap navbar-inner class

Create your own CSS file which you will use to overwrite styles from the bootstrap.css and add its reference to your HTML after the reference to bootstrap.css. Also, to ensure that your styles overwrite the bootstrap ones you can use the !important keyword in your css.

So, create a CSS file and call it something like bootstrap-overwrite.css.

Add the bootstrap class you want to overwrite -

.navbar-inner
{
  background: none !important;
}

Add the reference to your HTML after the bootstrap reference -

<link href="styles/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="styles/bootstrap-overwrite.css" rel="stylesheet" type="text/css" />

Twitter Bootstrap is a framework that is supposed to be restyled so you shouldn't be afraid of overwriting the default styling.

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

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

Override an inline CSS style

Using CSS you have no choice but to use an !important rule for each declaration within the .twitter-typeahead .tt-hint selector as there is no other way to override the inline styles using an external stylesheet.

---

Related Topics