Repository files navigation

bootstrap-sass is a Sass-powered version ofBootstrap 3, ready to drop right into your Sass powered applications.

This is Bootstrap3. For Bootstrap4 use theBootstrap rubygem if you use Ruby, and themain repo otherwise.

Please see the appropriate guide for your environment of choice:

• Ruby on Rails.
• Bower.
• npm / Node.js.

bootstrap-sass is easy to drop into Rails with the asset pipeline.

In your Gemfile you need to add thebootstrap-sass gem, and ensure that thesass-rails gem is present - it is added to new Rails applications by default.

gem'bootstrap-sass','~> 3.4.1'gem'sassc-rails','>= 2.1.0'

bundle install and restart your server to make the files available through the pipeline.

Import Bootstrap styles inapp/assets/stylesheets/application.scss:

// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"@import"bootstrap-sprockets";@import"bootstrap";

bootstrap-sprockets must be imported beforebootstrap for the icon fonts to work.

Make sure the file has.scss extension (or.sass for Sass syntax). If you have just generated a new Rails app,it may come with a.css file instead. If this file exists, it will be served instead of Sass, so rename it:

$mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss

Then, remove all the*= require_self and*= require_tree . statements from the sass file. Instead, use@import to import Sass files.

Do not use*= require in Sass or your other stylesheets will not beable to access the Bootstrap mixins or variables.

Bootstrap JavaScript depends on jQuery.If you're using Rails 5.1+, add thejquery-rails gem to your Gemfile:

gem'jquery-rails'

$bundle install

Require Bootstrap Javascripts inapp/assets/javascripts/application.js:

//= require jquery//= require bootstrap-sprockets

bootstrap-sprockets andbootstrapshould not both be included inapplication.js.

bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js ordropdown.js, for example), whilebootstrap provides a concatenated file containing all Bootstrap Javascripts.

When usingbootstrap-sass Bower package instead of the gem in Rails, configure assets inconfig/application.rb:

# Bower asset pathsroot.join('vendor','assets','bower_components').to_s.tapdo |bower_path|config.sass.load_paths <<bower_pathconfig.assets.paths <<bower_pathend# Precompile Bootstrap fontsconfig.assets.precompile <<%r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff2?)$)# Minimum Sass number precision required by bootstrap-sass::Sass::Script::Value::Number.precision=[8, ::Sass::Script::Value::Number.precision].max

Replace Bootstrap@import statements inapplication.scss with:

$icon-font-path:"bootstrap-sass/assets/fonts/bootstrap/";@import"bootstrap-sass/assets/stylesheets/bootstrap-sprockets";@import"bootstrap-sass/assets/stylesheets/bootstrap";

Replace Bootstraprequire directive inapplication.js with:

//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets

Please make suresprockets-rails is at least v2.1.4.

bootstrap-sass is no longer compatible with Rails 3. The latest version of bootstrap-sass compatible with Rails 3.2 is v3.1.1.0.

bootstrap-sass Bower package is compatible with node-sass 3.2.0+. You can install it with:

$bower install bootstrap-sass

Sass, JS, and all other assets are located atassets.

By default,bower.json main field list only the main_bootstrap.scss and all the static assets (fonts and JS).This is compatible by default with asset managers such aswiredep.

If you usemincer with node-sass, import Bootstrap like so:

Inapplication.css.ejs.scss (NB.css.ejs.scss):

// Import mincer asset paths helper integration@import"bootstrap-mincer";@import"bootstrap";

Inapplication.js:

//= require bootstrap-sprockets

See also thisexample manifest.js for mincer.

$npm install bootstrap-sass

By default all of Bootstrap is imported.

You can also import components explicitly. To start with a full list of modules copy_bootstrap.scss file into your assets as_bootstrap-custom.scss.Then comment out components you do not want from_bootstrap-custom.In the application Sass file, replace@import 'bootstrap' with:

@import'bootstrap-custom';

bootstrap-sassrequires minimumSass number precision of 8 (default is 5).

Precision is set for Ruby automatically when using thesassc-rails gem.When using the npm or Bower version with Ruby, you can set it with:

::Sass::Script::Value::Number.precision=[8, ::Sass::Script::Value::Number.precision].max

Bootstrap requires the use ofAutoprefixer.Autoprefixer adds vendor prefixes to CSS rules using values fromCan I Use.

To matchupstream Bootstrap's level of browser compatibility, set Autoprefixer'sbrowsers option to:

["Android 2.3","Android >= 4","Chrome >= 20","Firefox >= 24","Explorer >= 8","iOS >= 6","Opera >= 12","Safari >= 6"]

assets/javascripts/bootstrap.js contains all of Bootstrap's JavaScript,concatenated in thecorrect order.

If you use Sprockets or Mincer, you can requirebootstrap-sprockets instead to load the individual modules:

// Load all Bootstrap JavaScript//= require bootstrap-sprockets

You can also load individual modules, provided you also require any dependencies.You can check dependencies in theBootstrap JS documentation.

//= require bootstrap/scrollspy//= require bootstrap/modal//= require bootstrap/dropdown

The fonts are referenced as:

"#{$icon-font-path}#{$icon-font-name}.eot"

$icon-font-path defaults tobootstrap/ if asset path helpers are used, and../fonts/bootstrap/ otherwise.

When using bootstrap-sass with Compass, Sprockets, or Mincer, youmust import the relevant path helpers before Bootstrap itself, for example:

@import"bootstrap-compass";@import"bootstrap";

Import Bootstrap into a Sass file (for example,application.scss) to get all of Bootstrap's styles, mixins and variables!

@import"bootstrap";

You can also include optional Bootstrap theme:

@import"bootstrap/theme";

The full list of Bootstrap variables can be foundhere. You can override these by simply redefining the variable before the@import directive, e.g.:

$navbar-default-bg:#312312;$light-orange:#ff8c00;$navbar-default-color:$light-orange;@import"bootstrap";

Bootstrap is available as anEyeglass module. After installing Bootstrap via NPM you can import the Bootstrap library via:

@import"bootstrap-sass/bootstrap"

or import only the parts of Bootstrap you need:

@import"bootstrap-sass/bootstrap/variables";@import"bootstrap-sass/bootstrap/mixins";@import"bootstrap-sass/bootstrap/carousel";

Bootstrap for Sass version may differ from the upstream version in the last number, known asPATCH. The patch version may be ahead of the corresponding upstream minor.This happens when we need to release Sass-specific changes.

Before v3.3.2, Bootstrap for Sass version used to reflect the upstream version, with an additional number forSass-specific changes. This was changed due to Bower and npm compatibility issues.

The upstream versions vs the Bootstrap for Sass versions are:

Always refer toCHANGELOG.md when upgrading.

If you'd like to help with the development of bootstrap-sass itself, read this section.

Keeping bootstrap-sass in sync with upstream changes from Bootstrap used to be an error prone and time consuming manual process. With Bootstrap 3 we have introduced a converter that automates this.

Note: if you're just looking touse Bootstrap 3, see theinstallation section above.

Upstream changes to the Bootstrap project can now be pulled in using theconvert rake task.

Here's an example run that would pull down the master branch from the maintwbs/bootstrap repo:

rake convert

This will convert the latest LESS to Sass and update to the latest JS.To convert a specific branch or version, pass the branch name or the commit hash as the first task argument:

rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]

The latest converter script is locatedhere and does the following:

• Converts upstream Bootstrap LESS files to its matching SCSS file.
• Copies all upstream JavaScript intoassets/javascripts/bootstrap, a Sprockets manifest atassets/javascripts/bootstrap-sprockets.js, and a concatenation atassets/javascripts/bootstrap.js.
• Copies all upstream font files intoassets/fonts/bootstrap.
• SetsBootstrap::BOOTSTRAP_SHA inversion.rb to the branch sha.

This converter fully converts original LESS to SCSS. Conversion is automatic but requires instructions for certain transformations (see converter output).Please submit GitHub issues tagged withconversion.

bootstrap-sass has a number of major contributors:

• Thomas McDonald
• Tristan Harward
• Peter Gumeson
• Gleb Mazovetskiy

and asignificant number of other contributors.

bootstrap-sass is used to build some awesome projects all over the web, includingDiaspora,rails_admin,Michael Hartl'sRails Tutorial,gitlabhq andkandan.