This project is specifically designed as an extention for bootstrap to provide a comprehensive support for building interfaces.

Download

Bootstrap Essentials

Compiled and minified CSS and JavaScript. No original source files are included.

Download

Source code

Source scss and JavaScript. Requires a SCSS compiler and some setup.

Download source

Install with Bower

You can also install and manage Bootstrap's Sass, CSS and JavaScript using Bower:

$ bower install bootstrap-essentials

Autoprefixer required for Sass

Bootstrap Essentials uses Autoprefixer to deal with CSS vendor prefixes. If you're compiling Bootstrap Essentials from its Sass source and not using our Gruntfile, you'll need to integrate Autoprefixer into your build process yourself. If you're using precompiled Bootstrap or using our Gruntfile, you don't need to worry about this because Autoprefixer is already integrated into our Gruntfile.

What's included

Bootstrap Essentials is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.

jQuery required

Please note that all JavaScript plugins included in Bootstrap Essentials requires jQuery, as shown in the starter template.

Precompiled Bootstrap

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap Essentials. You'll see something like this:

bootstrap-essentials/
├── css/
│   ├── bootstrap-essentials.css
│   ├── bootstrap-essentials.css.map
│   ├── bootstrap-essentials.min.css
│   └── bootstrap-essentials.min.css.map
└── js/
    ├── bootstrap-essentials.js
    └── bootstrap-essentials.min.js
   

Place the included css and js files along with bootstrap.css and bootstap.js. We provide compiled CSS and JS (bootstrap-essentials.*), as well as compiled and minified CSS and JS (bootstrap-essentials.min.*). CSS source maps (bootstrap-essentials.*.map) are available for use with certain browsers' developer tools.

Bootstrap Essentials source code

The Bootstrap Essentials source code download includes the precompiled CSS and JavaScript, along with source SCSS and JavaScript. More specifically, it includes the following:


bootstrap/
├── scss/
├── js/
└── dist/
    ├── css/
    └── js/

The scss/ and js/ are the source code for our CSS and JS (respectively). The dist/ folder includes everything listed in the precompiled download section above. The docs/ folder includes the source code for our documentation, and examples/ of Bootstrap usage. Beyond that, any other included file provides support for packages, license information, and development.

Compiling CSS and JavaScript

Bootstrap Essentials uses Grunt for its build system, with convenient methods for working with the framework. It's how we compile our code, run tests, and more.

Installing Grunt

To install Grunt, you must first download and install node.js (which includes npm). npm stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:
  1. Install grunt-cli globally with npm install -g grunt-cli.
  2. Navigate to the root /bootstrap-essentials/ directory, then run npm install. npm will look at the package.json file and automatically install the necessary local dependencies listed there.
  3. When completed, run the grunt command from the command line to compile the script.

Troubleshooting

Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

Basic template

Start with this basic HTML template, or modify these examples. We hope you'll customize our templates and examples, adapting them to suit your needs.

Copy the HTML below to begin working with a minimal Bootstrap document.


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-essentials.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-essentials.min.js"></script>
  </body>
</html>
						

Examples

Build on the basic template above with Bootstrap's many components. We encourage you to customize and adapt Bootstrap to suit your individual project's needs.

Containers

Full Page example

Full Page

Full page represtation of page using .container-table

Flex Container example

Flex Container

Flex container to adjust row components height.

Login Page example

Login

Simple Login Page using login Container.

2 Column Login example

2 Column Login

Build a Login page in 2 columns.

Navbars

Navbar example

Slide

A basic template for Slide Navigation.

Static top navbar example

Slide In

A basic template for Slide In Navigation.

Navmenu

A basic template showing the navmenu element and demonstrates usage of the offcanvas plugin.

Off Canvas Push Menu

A template demonstrating a push effect for the off canvas navmenu.

Off Canvas Reveal Menu

A template demonstrating a reveal effect by placing the navmenu under the content.

Scroll to Top

This is a template to show how scroll to top button works.

Sidebars

This layout is specifically designed to keep sidebar of fixed width and content of fluid width. Such option is adopted by old sites, blogs, document page, video watch page and more. These sidebars are different from fixed navmenu as they are at relative position rather than fixed.

Navbar example

Simple Sidebar

This is a simple sidebar for page navigation that breaks at mobile devices.

Static top navbar example

Navmenu Sidebar

This a offcanvas example with navmenu as sidebar i.e. toggleable in mobile devices.

Blog Sidebar

The sidebar is position at right and break at mobile device breakpoint