bootstrap not loading on angular partial page

Question

I have this issue with a couple different pages I've been working on. I'll provide a simple example. I'm not very comfortable with front-end work so apologies if my html page is hard to read.

I have an angular single-page application with a header bar that takes up 100px and then partial pages are routed below it.

my index.html

<html>
<head>
  <base href="/">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.default.css">
  <!--<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.8.5/css/selectize.bootstrap3.css">-->
  <link rel="stylesheet" type="text/css" href="./stylesheets/style.css">
  <link rel="stylesheet" type="text/css" href="./stylesheets/index.css">
</head>

<body data-ng-app="angulobby" data-ng-controller="indexController">
<div id="container">
  <header>
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="navbar-header">
          <a class="navbar-brand" href="/">AnguLobby Prototype</a>
        </div>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="/"><i class="fa fa-home"></i> Home</a></li>
          <li><a href="/login"><i class="fa fa-shield"></i> Login</a></li>
          <li><a href="/register"><i class="fa fa-comment"></i> Register</a></li>
          <div ng-controller="logoutController">
            <a ng-click='logout()' class="btn btn-default">Logout</a>
          </div>
        </ul>
      </div>
    </nav>
  </header>
  <!--injected views go here-->
  <div id="ng-view" ng-view></div>
</div>
<script src="https://use.fontawesome.com/7222f42b52.js"></script>
<script src="./socket.io/socket.io.js"></script>
<script src="./main.js"></script>

<!--expose angular controllers-->
<script src="controllers/home.js"></script>
<script src="controllers/index.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/logout.js"></script>
<script src="controllers/register.js"></script>
<script src="controllers/select-params.js"></script>
<script src="controllers/queueTimer.js"></script>
<script src="controllers/lobby.js"></script>

<!--expose angular services-->
<script src="./services/auth.js"></script>
<script src="./services/gamelist.js"></script>
<script src="./services/queue.js"></script>
<script src="./services/socket.js"></script>
<script src="./services/lobby.js"></script>
</body>
</html>

and index.css

html, body {
  height: 100%;
}
#container {
  height:100%;
  display:flex;
  flex-flow:column;
}

#ng-view {
  overflow: hidden;
}

header {
  height: 100px;
}

and then for instance if I have a simple partial page that I would like to inject into ng-view:

lobby.html

<head>
  <link rel="stylesheet" type="text/css" href="../stylesheets/lobby.css">

</head>

<div id="lobby-container" class="container">
  <div class="container">
    <div class="row">
      <div id="chat" class="col-md-2">
      </div>
      <div id="users" class="col-md-2"></div>
    </div>
  </div>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script
    src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
    integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
    crossorigin="anonymous">
  </script>
</div>

and lobby.css

#lobby-container {
  background-color: greenyellow;
  height: 100%;
  width: 100%;
}

#chat {
  background-color: grey;
  height: 100%;
}

#users {
  background-color: darkblue;
  height: 100%;
}

When I load the partial page on it's own, no bootstrap is executed.It shows two divs without the col class attributed.

But, when I build the project, the bootstrap is loaded.

I understand that the general problem is that the partial views only get the bootstrap added from index.html when angular actually injects them into ng-view. What I would like to do is be able to preview each partial page and have bootstrap loaded already without having to build the project each time. I am using the webstorm IDE if that matters.

you'd need to include the bootstrap headers for partials too. it should work smoothly. so all you need to do is include the headers, css, js etc in partial pages as well. — sbharti
– sbharti, Commented Jul 7, 2017 at 17:05
@ShaurabhBharti If you look at my lobby.html page, I thought that I accomplished that by adding the <script> tags and the CDN links. Is that incorrectly implemented? — Ryan
– Ryan, Commented Jul 7, 2017 at 17:06
@RyanPage add <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> to lobby.html head — Dalin Huang
– Dalin Huang, Commented Jul 7, 2017 at 17:08

Ryan · Accepted Answer · 2017-07-07 17:09:06Z

2

Okay, just figured it out. I had added the bootstrap.js file but forgot to add the bootstrap.css file. Adding <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

to the <head> of lobby.html fixed the problem.

answered Jul 7, 2017 at 17:09

Ryan

3431 gold badge3 silver badges12 bronze badges

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

Collectives™ on Stack Overflow

bootstrap not loading on angular partial page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest