How to install Twitter Bootstrap to an angular 2 project?

I have cloned the angular 2 seed project that provides fast, reliable and extensible starter for the development of my Angular 2 project.

Now, I want to install Twitter Bootstrap into my project. I followed the Angular docs:

Let's add the stylesheet.

  1. Open a terminal window in the application root folder and enter the command:

    npm install bootstrap --save

  2. Open index.html and add the following link to the .

    <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">

But Twitter Bootstrap classes are not working in my html files. And When I checked the source code from my browser, I found that my index.html file does not contain this line of code <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> even though I have added it to my index. I have tried to refresh the browser several times and I have searched for a configurable way to install Twitter Bootstrap to my project but nothing found.

Here is my index.html file:

<!DOCTYPE html> <html lang="en"> <head>   <base href="<%= APP_BASE %>">   <meta charset="utf-8">   <meta http-equiv="X-UA-Compatible" content="IE=edge">   <title><%= APP_TITLE %></title>   <meta name="description" content="">   <meta name="viewport" content="width=device-width, initial-scale=1">   <!-- inject:css -->   <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">   <!-- endinject -->    </head> <body>    <vynd-web-user-app>Loading...</vynd-web-user-app>    <script>   // Fixes undefined module function in SystemJS bundle   function module() {}   </script>    <!-- shims:js -->   <!-- endinject -->    <% if (ENV === 'dev') { %>   <script>     System.config(<%=       JSON.stringify(SYSTEM_CONFIG, null, 2)     %>)   </script>   <% } %>    <!-- libs:js -->   <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>-->   <!-- endinject -->    <!-- inject:js -->   <!-- endinject -->    <% if (ENV === 'dev') { %>   <script>   System.import('<%= BOOTSTRAP_MODULE %>')     .catch(function (e) {       console.error(e,         'Report this error at https://github.com/mgechev/angular2-seed/issues');     });   </script>   <% } %>  </body> </html> 

And here is an overview of my project structure:

How to install Twitter Bootstrap to an angular 2 project?

And here is the loaded index.html file in my browser:

How to install Twitter Bootstrap to an angular 2 project?

Replay

Category: javascript Time: 2016-07-30 Views: 1

Related post

iOS development

Android development

Python development

JAVA development

Development language

PHP development

Ruby development

search

Front-end development

Database

development tools

Open Platform

Javascript development

.NET development

cloud computing

server

Copyright (C) avrocks.com, All Rights Reserved.

processed in 0.224 (s). 12 q(s)