Mark-up our Layout
We'll start by adding some basic layout code to the app/index.html
file located in the root of our application folder.
Replace the current HTML code within the <body>
tags with the following code. Leave the following <script>
tags at the bottom intact as they are:
<div class="container"> <div class="col-md-12 text-center"> <a href="#" class="brand ">Angular Box Office</a> </div> <hr> <div ng-view></div> </div>
We are wrapping ng-view
with the default Bootstrap wrapper container and adding in the code for our brand name. The container class would get our page contents to the center of the screen. The col-md-12
class will create a <div>
element that is 12-column wide; it is the equivalent of .span12
in bootstrap2. The text-center
attribute is used to center align the text. The brand class is added so that we can style the brand name.