Angular Material Layout

HTML

<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<div ng-app="sandbox">
<div layout-gt-sm="row" layout="column" layout-margin>

    <main flex-md="60" flex-order-gt-sm="2">
        <h1 class="md-title">
            Main Content
        </h1>

      <p>
      <md-button class="md-primary navButton" ng-href="#/">Main</md-button>
                <md-button class="md-primary navButton" ng-href="#/test1">Test 1</md-button>
                <md-button class="md-primary navButton">Test 2</md-button>
      </p>
       
    </main>

 
</div>
</div>

CSS

.navButton{
    font-weight: bold;
    margin: 0px;
    height: inherit;
    width: 150px;
    border-radius: 0px;
    text-transform: none;
    border: solid;
}

JavaScript

angular.module('sandbox', ['ngMaterial']);