Bootstrap UI

Documentation

Currently 2.3.3

This is the documentation of Bootstrap UI, a Bootstrap 3 extension for building beautiful web app user interfaces.

Technologies used:

For both installation methods must have Node.js installed.

Npm registry

The recommended way to install Bootstrap UI is from the npm registry.

$ npm install --save bootstrap-ui

Or if you use Yarn:

$ yarn add bootstrap-ui

Bower

You can also install it via Bower. However please do note that bower is deprecated.

$ bower install --save bootstrap.ui

Download

All releases can also be downloaded from GitHub.

CSS

You will find everything you need in the dist/css directory to start using Bootstrap UI styles right away (the styles link Bootstrap’s Glyphicons from dist/fonts).

Link Titillium Web font from Google Fonts and Bootstrap UI CSS in your HTML:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Titillium+Web:400,300,700&amp;subset=latin,latin-ext" />
<link rel="stylesheet" href="bower_components/bootstrap.ui/dist/css/bootstrap-ui.min.css" />

JavaScript

You will find Bootstrap UI JavaScript in the dist/js directory.

Please note that jQuery and Bootstrap JavaScript is not bundled in the Bootstrap UI distribution package, and neither are other dependencies of Bootstrap UI. You can load them from CDN if this option is available, or better, link the packages managed by Bower:

<!-- External JS dependencies -->
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/moment/min/moment-with-locales.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>
<script src="bower_components/select2/select2.min.js"></script>
<!-- Bootstrap UI JS -->
<script src="bower_components/bootstrap.ui/dist/js/bootstrap-ui.min.js"></script>

Loading original LESS styles allows you to customize your Bootstrap UI build. You can pick just the components you want and recolor the UI by overriding LESS variables (see src/less/config/variables.less).

In your LESS styles, import complete Bootstrap UI styles to customize via LESS variables:

@external-components-path: 'bower_components/';
@import 'bower_components/bootstrap.ui/src/less/bootstrap-ui';

Do not forget to declare @external-components-path variable saying where Bower dependencies are installed (relative to the calling file).

See GitHub releases for the complete changelog.