An overview of Bootstrap, how to download and use, basic templates and examples, and more.
Bootstrap (currently v3.4.1) has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.
Install with Bower
bower install bootstrap
Install with npm
You can also install Bootstrap using npm:
npm install [email protected]
require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The
bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the
/js/*.js files under the package's top-level directory.
package.json contains some additional metadata under the following keys:
less- path to Bootstrap's main Less source file
style- path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
Install with Composer
composer require twbs/bootstrap
Autoprefixer required for Less/Sass
Bootstrap uses Autoprefixer to deal with CSS vendor prefixes. If you're compiling Bootstrap from its Less/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 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. You'll see something like this:
bootstrap/ ├── css/ │ ├── bootstrap.css │ ├── bootstrap.css.map │ ├── bootstrap.min.css │ ├── bootstrap.min.css.map │ ├── bootstrap-theme.css │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css │ └── bootstrap-theme.min.css.map ├── js/ │ ├── bootstrap.js │ └── bootstrap.min.js └── fonts/ ├── glyphicons-halflings-regular.eot ├── glyphicons-halflings-regular.svg ├── glyphicons-halflings-regular.ttf ├── glyphicons-halflings-regular.woff └── glyphicons-halflings-regular.woff2
This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (
bootstrap.*), as well as compiled and minified CSS and JS (
bootstrap.min.*). CSS source maps (
bootstrap.*.map) are available for use with certain browsers' developer tools. Fonts from Glyphicons are included, as is the optional Bootstrap theme.
Bootstrap source code
bootstrap/ ├── less/ ├── js/ ├── fonts/ ├── dist/ │ ├── css/ │ ├── js/ │ └── fonts/ └── docs/ └── examples/
fonts/ are the source code for our CSS, JS, and icon fonts (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 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/directory, then run
npm install. npm will look at the
package.jsonfile and automatically install the necessary local dependencies listed there.
When completed, you'll be able to run the various Grunt commands provided from the command line.
Available Grunt commands
grunt watch (Watch)
Watches the Less source files and automatically recompiles them to CSS whenever you save a change.
grunt test (Run tests)
grunt docs (Build & test the docs assets)
bundle exec jekyll serve.
grunt (Build absolutely everything and run tests)
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.
Get the source code for every example below by downloading the Bootstrap repository. Examples can be found in the
Using the framework
Navbars in action
Create a custom navbar with justified links. Heads up! Not too Safari friendly.