AngularJS

Search for '{{search_term}}'

AngularJS UI with Bootstrap Skeleton

CMOS is the Code-Maven Open Source podcast that also includes video interviews. Subscribe to this feed RSS feed with your Podcast listener app or via iTunes iTunes.

To make AngularJS and Bootstrap work nicely together you can use the Angular UI Bootstrap project.

examples/html/angular-ui-bootstrap-skeleton.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport"
     content="width=device-width, initial-scale=1, user-scalable=yes">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.min.js"></script>

  <script>
   angular.module('DemoApp', [])
   .controller('DemoController', function($scope) {
       $scope.message = "Hello World";
   });
  
  </script>

</head>
<body ng-app="DemoApp" ng-controller="DemoController">

<div class="container-fluid">
  <div class="row">
      <div class="col-md-1"></div>
      <div class="col-md-10"></div>
      <div class="col-md-1"></div>
  </div>

  <div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-7">
        <h1>Main Title</h1>
        <h2>Sub title</h2>
        {{message}}
      </div>
      <div class="col-md-3"></div>
  </div>
</div>

</body>
</html>

Comments

In the comments, please wrap your code snippets within <pre> </pre> tags and use spaces for indentation.
comments powered by Disqus