Angular 2 CSS malfunction with Bootstrap v4 admin template

Question

Running AngularJS 2.2.3 with Twitter Bootstrap 4.0.0-alpha.5. Here's what I'm getting:

Versus what I want:

Full code (with rendered output): https://gist.github.com/anonymous/cbe4161acb3734c53c45c44db6db854b

EDIT: Full repo with the admin decomposed into different components: https://github.com/AlecTaylor/angular2-bootstrapv4-admin

Bhetzie · Accepted Answer · 2016-12-01 03:24:30Z

0

You're missing:

<link href="dashboard.css" rel="stylesheet">

Also, you probably shouldn't use a CDN with Angular 2.

Add to package.json:

"bootstrap": "^4.0.0-alpha.5",

Install with npm and reference from node modules:

npm i

reference:

You also probably want these as well:

npm i tether --save

<script src="node_modules/jquery/dist/jquery.min.js"></script>
    <script src="node_modules/tether/dist/js/tether.min.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

answered Dec 1, 2016 at 3:24

Bhetzie

2,94010 gold badges34 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

A T Over a year ago

Thanks, silly of me not to see that dashboard.css. Anyway it's not resolved yet, it still doesn't look right. Background is grey for one. On the other side of things, the node_modules directory doesn't seem to be mapped correctly. I've tried <link href="{name}.css" rel="stylesheet"> of ./node_modules/bootstrap/dist/css/bootstrap.min.css, node_modules/bootstrap/dist/css/bootstrap.min.css, bootstrap/dist/css/bootstrap.min.css, bootstrap.min.css and more. Also I've avoiding the JQuery dependency (Angular people don't like JQuery).

Collectives™ on Stack Overflow

Angular 2 CSS malfunction with Bootstrap v4 admin template

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related