Angular UI bootstrap is a set of AngularJS directives based on Twitter Bootstrap's markup and CSS.

The goal is to provide native AngularJS directives without any dependency on jQuery or Bootstrap's JavaScript. It is often better to rewrite an existing JavaScript code and create a new, pure AngularJS directive. Most of the time the resulting directive is smaller as compared to the original JavaScript code size and better integrated into the AngularJS ecosystem.

Directives

• Accordian
• Alert
• Buttons
• Carousel
• Collapse
• Dateparser
• Datepicker
• Datepicker Popup
• Dropdown
• Modal
• Pager
• Pagination
• Popover
• Position
• Progressbar
• Ratings
• Tabs
• Timepicker
• Tooltip
• Typeahead

Stack Snippet Starter Pack

HTML:

<link href="//unpkg.com/bootstrap@3/dist/css/bootstrap.css" rel="stylesheet">
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>

<div ng-app="ui.bootstrap.module" >
  <div ng-controller="ui.bootstrap.ctrl">

    <span uib-tooltip="{{ToolTipText}}" tooltip-placement="bottom" >
      Hover for Tooltip
    </span>

  </div>
</div>

JavaScript:

angular.module('ui.bootstrap.module', ['ui.bootstrap'])
.controller('ui.bootstrap.ctrl', function ($scope) {
  $scope.ToolTipText = "Hello, World!";
})

Related Tags

• angular-strap AngularStrap is light and fast. It has been built from the ground up to leverage ngAnimate!

Related Libraries

• UI-Bootstrap 4 Bootstrap components written in pure AngularJS by the AngularUI Team. Ported to Bootstrap 4 by Morgul