ngx-bootstrap: unable to set theme to bootstrap4 with systemjs

When using SystemJS, you cannot switch the theme to Bootstrap 4 via the recommended method:

import {Ng2BootstrapConfig, Ng2BootstrapTheme} from 'ng2-bootstrap/ng2-bootstrap';

Ng2BootstrapConfig.theme = Ng2BootstrapTheme.BS4;

enableProdMode();

 bootstrap(AppComponent);

When this is done, the AppComponent will recognize the BS4 theme, but the ng2 components will not.

As an example, clone https://github.com/mjhugo/angular2-quickstart (which has been updated to bs4 theme, see https://github.com/mjhugo/angular2-quickstart/commit/953d888991c058dbf75318393367b54c818b627b) and run npm i and npm start and notice that the theme will not be applied correctly

wrong theme

If it had applied the bs4 theme correctly, it should look more like this:

As indicated in https://github.com/valor-software/ng2-bootstrap/issues/371 there is a workaround - add this script block and ng2-bootstrap will switch to bootstrap4 theme.

  <script type="text/javascript">
    // temporary hack for enable bootstrap 4
    window.__theme = 'bs4';
  </script>

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 17 (5 by maintainers)

Most upvoted comments

+1 for way of changing icon package, I would like to use FontAwesome instead of Glyphicons.

alexciesielski on Jun 1, 2016

this is because Glyphicons is included in bootstrap 3 but not in 4, you are missing the glyphicon-chevron-left and glyphicon-chevron-right icons. I think that it would be nice if ng2-bootstrap had support for changing out icon pack for bs4.

if you are using font-awesome + bs4 you can add css aliases like this (using sass):


.glyphicon {
  @extend .fa;

  &.glyphicon-chevron-left {
    @extend .fa-chevron-left;
  }

  &.glyphicon-chevron-right {
    @extend .fa-chevron-right;
  }

  &.glyphicon-chevron-up {
    @extend .fa-chevron-up;
  }

  &.glyphicon-chevron-down {
    @extend .fa-chevron-down;
  }
}

maxfisher05 on May 31, 2016