This project is specifically designed as an extention for bootstrap to provide a comprehensive support for building interfaces.
Install with Bower
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.
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.
Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootstrap Essentials. You'll see something like this:
Place the included css and js files along with
bootstap.js. We provide compiled
CSS and JS (
bootstrap-essentials.*), as well as compiled and minified CSS and JS (
CSS source maps (
are available for use with certain browsers' developer tools.
Bootstrap Essentials source code
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.
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.
npm install -g grunt-cli.
- Navigate to the root
/bootstrap-essentials/directory, then run
npm install. npm will look at the
package.jsonfile and automatically install the necessary local dependencies listed there.
- When completed, run the
gruntcommand from the command line to compile the script.
Should you encounter problems with installing dependencies or running Grunt commands, first delete the
/node_modules/ directory generated by npm. Then, rerun
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.
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.
A basic template showing the navmenu element and demonstrates usage of the offcanvas plugin.
Off Canvas Reveal Menu
A template demonstrating a reveal effect by placing the navmenu under the content.
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.