Twitter Bootstrap Question posted in

Override Boostrap in Angular App-Twitter bootstrap

I am attempting to override the default Twitter Bootstrap styles in my Angular application. I am using AngularJS v1.6.8.

My file structure looks like the following:

*src
*app
*public
*styles
*global-styles.css
*index.html

I’ve placed the css I’d like to use to override Twitter Bootstrap styles in global-styles.css.

Currently, I am using “bootstrap-css-only” in order to leverage the default styles provided by Twitter Bootstrap.

I added my global-styles.css to my index.html like so:

<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="stylesheet" href="/styles/global-styles.css">

My custom styles don’t show up on my index.html and/or on any of the components. Any ideas?

Thank you.

Tags:

2

Answers


  1. 0

    Whatever the new CSS classes you want to override that CSS classes you have to keep in a style.css file. I will work and just add !important in CSS class attributes.
    .

    Login or Signup to reply.
  2. 0

    This is because base href is set to “/” and failed to load your css altogether.
    You can either remove base tag and use relative path:

    <meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles/global-styles.css">

    or set absolute path:

    <meta name="viewport" content="width=device-width, initial-scale=1">
<base href="/">
<link rel="stylesheet" href="ROOT_PATH/src/public/styles/global-styles.css">

    note: you’ll need to replace ROOT_PATH

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search