Twitter Bootstrap Question posted in

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:

enter image description here

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

enter image description here

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    The problem is in this part of code

    <!-- inject:css -->
  <link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->

    First, when I saw the <!-- inject:css --> and <!-- endinject --> comments in my index.html file, I thought that the team who are creating the angular 2 seed project provides those comments for us for more readable code and It is preferred to add every new css library between those two comments. But when I added the twitter bootstrap framework outside those two comments, it worked very well. Maybe every line of code that resides between the <!-- inject:css --> and <!-- endinject --> would be overridden by some automatically injected codes by some angular configuration files.


  2. 0

    The route where you are loading the .css should be css/bootstrap/bootstrap.min.cs

    Keep in mind that if you put ../ in your index.html, it will try to look in the parent folder where that file is, and since your css is in a folder in the same folder where you currently have the index.html try that.

    Hope this helps

    Login or Signup to reply.
  3. 0

    If you use angular-cli for your project my answer could be useful for you.

    1. in root project directory run npm install --save bootstrap
    2. edit .angular-cli.json – the file is in same location. Find here “styles” section

    And add your bootstrap.css:

      "styles": [
    "../node_modules/bootstrap/dist/css/bootstrap.min.css",
    "styles.css"
  ],

    I’ve added "../node_modules/bootstrap/dist/css/bootstrap.min.css", in my project. And now I can use all bootstrap classes.

    P.S.

    If you need not only bootstrap styles but some bootstrap scripts, just add into .angular-cli.json also script location in correspond section:

      "scripts": [
    "../node_modules/bootstrap/dist/js/bootstrap.js"
  ],
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search