Commit 84c3e99c authored by Liam's avatar Liam Committed by Rebecca Blundell

Bug #1765276: Changin the variables for bootstrap 4


Change-Id: I4aabf5449ac059012a224578164c81756619d131
parent c7843457
# Changelog
* Variables override template at templates/project/_bootstrap-variables.sass
* Readme: Bower + Rails configuration
* Fix loading issue with the ruby gem version
## 3.3.0
* Improve libsass compatibility
* Support using Bower package with Rails
Main bootstrap file is now a partial (_bootstrap.scss), for compatibility with Compass 1+.
Fixed a number of bugs. [Issues closed in v3.2.0.2](
Fixed a number of bugs: [Issues closed in v3.2.0.1](
- Assets (Sass, JS, fonts) moved from `vendor/assets` to `assets`. `bootstrap.js` now contains concatenated JS.
- Compass generator now copies JS and fonts, and provides a better default `styles.sass`.
- Compass, Sprockets, and Mincer asset path helpers are now provided in pure Sass: `bootstrap-compass`, `bootstrap-sprockets`, and `bootstrap-mincer`.
Asset path helpers must be imported before `bootstrap`, more in Readme.
- Sprockets / Mincer JS manifest has been moved to `bootstrap-sprockets.js`.
It can be required without adding Bootstrap JS directory to load path, as it now uses relative paths.
- Sprockets: `depend_on_asset` (`glyphicons.scss`) has been changed to `depend_on` to work around an issue with `depend_on_asset`.
[More information](
- Updated Bower docs
- #523: Rails 3.2 compatibility
- Bugfixes from upstream up to 7eb532262fbd1112215b5a547b9285794b5360ab.
- #518: `scale` mixin Sass compatibility issue
* compiles with libsass master
* fix vendor paths for compass
* Fully automated (lots of string juggling) LESS -> Sass conversion. - *Gleb Mazovetskiy*
* Ported rake task from vwall/compass-twitter-bootstrap to convert Bootstrap upstream - *Peter Gumeson*
* Moved javascripts to us `bootstrap-component.js` to `bootstrap/component.js` - *Peter Gumeson*
* Allow sass-rails `>= 3.2` - *Thomas McDonald*
* Update to Bootstrap 2.3.2 - *Dan Allen*
* Find the correct Sprockets context for the `image_path` function - *Tristan Harward, Gleb Mazovetskiy*
* Fix changes to image url - *Gleb Mazovetskiy*
* Copy _variables into project on Compass install - *Phil Thompson*
* Add `bootstrap-affix` to the Compass template file - *brief*
## (yanked)
* Change how image_url is handled internally - *Tristan Harward*
* Fix some font variables not having `!default` - *Thomas McDonald*
* [#290] Update to Bootstrap 2.3.0 - *Tristan Harward*
* Fix `rake:debug` with new file locations - *Thomas McDonald*
* Add draft contributing document - *Thomas McDonald*
* [#260] Add our load path to the global Sass load path - *Tristan Harward*
* [#275] Use GitHub notation in Sass head testing gemfile - *Timo Schilling*
* [#279, #283] Readme improvements - *theverything, Philip Arndt*
* [#270] Update to Bootstrap 2.2.2 - *Tristan Harward*
* [#266] Add license to gemspec - *Peter Marsh*
* [#258] Use `bootstrap` prefix for `@import`ing files in `bootstrap/bootstrap.scss` - *Umair Siddique*
* [#246] Update to Bootstrap 2.2.1 - *Tristan Harward*
* [#246] Pull Bootstrap updates from jlong/sass-twitter-bootstrap - *Tristan Harward*
* Update to Bootstrap 2.1.1
* [#222] Remove 100% multiplier in vertical-three-colours
* [#227] Fix IE component animation collapse
* [#228] Fix variables documentation link
* [#231] Made .input-block-level a class as well as mixin
* [#219] Fix expected a color. Got: transparent.
* [#207] Add missing warning style for table row highlighting
* [#208] Use grid-input-span for input spans
* Updated to Bootstrap 2.1
* Changed some mixin names to be more consistent. Nested mixins in Less are separated by a `-` when they are flattened in Sass.
* Fix `.row-fluid > spanX` nesting
* Small Javascript fixes for those staying on the 2.0.4 release
* Add `!default` to z-index variables.
* Updated to Bootstrap 2.0.4
* Switched to Bootstrap 2.0.3+'s method of separating responsive files
* [#149, #150] Fix off by one error introduced with manual revert of media query breakpoints
* `rake debug` and `rake test` both compile bootstrap & bootstrap-responsive
* [#145, #146] Fix button alignment in collapsing navbar as a result of an incorrect variable
## 2.0.3
* Updated to Bootstrap 2.0.3
* [#106] Support for Rails < 3.1 through Compass
* [#132] Add CI testing
* [#106] Support Rails w/Compass
* [#134] Fix support for Rails w/Compass
## 2.0.2
* [#86] Updated to Bootstrap 2.0.2
Things of note: static navbars now have full width. (to be fixed in 2.0.3) `.navbar-inner > .container { width:940px; }` seems to work in the meanwhile
* [#62] Fixed asset compilation taking a *very* long time.
* [#69, #79, #80] \(Hopefully) clarified README. Now with less cat humour.
* [#91] Removed doubled up Sass extensions for Rails.
* [#63, #73] Allow for overriding of image-path
* [[SO](] Added makeFluidColumn mixin for defining fluid columns. Fluid rows must use `@extend .row-fluid`, and any column inside it can use `@include makeFluidColumn(num)`, where `num` is the number of columns. Unfortunately, there is a rather major limitation to this: margins on first-child elements must be overriden. See the attached Stack Overflow answer for more information.
## 2.0.1
* Updated to Bootstrap 2.0.1
* Modified `@mixin opacity()` to take an argument `0...1` rather than `0...100` to be consistent with Compass.
## 2.0.0
* Updated to Bootstrap 2.0.0
# Contributing to bootstrap-sass
## Asset Changes
Any changes to `bootstrap-sass` assets (scss, javascripts, fonts) should be checked against the `convert` rake task.
For usage instructions, see the [README](/
If something is broken in the converter, it's preferable to update the converter along with the asset itself.
## Bugs
A bug is a _demonstrable problem_ that is caused by the code in the
repository. Good bug reports are extremely helpful - thank you!
Guidelines for bug reports:
1. **Does it belong here?** &mdash; is this a problem with bootstrap-sass, or
it an issue with [twbs/bootstrap](
We only distribute a direct port and will not modify files if they're not
changed upstream.
2. **Use the GitHub issue search** &mdash; check if the issue has already been
3. **Isolate the problem** &mdash; ideally create a [reduced test
case]( and a live example.
A good bug report shouldn't leave others needing to chase you up for more
information. Please try to be as detailed as possible in your report. What is
your environment? What steps will reproduce the issue? What browser(s) and OS
experience the problem? What would you expect to be the outcome? All these
details will help people to fix any potential bugs.
> Short and descriptive example bug report title
> A summary of the issue and the browser/OS environment in which it occurs. If
> suitable, include the steps required to reproduce the bug.
> 1. This is the first step
> 2. This is the second step
> 3. Further steps, etc.
> `<url>` (a link to the reduced test case)
> Any other information you want to share that is relevant to the issue being
> reported. This might include the lines of code that you have identified as
> causing the bug, and potential solutions (and your opinions on their
> merits).
**[File a bug report](**
## Pull requests
**We will not accept pull requests that modify the SCSS beyond fixing bugs caused by *our* code!**
Most pull requests should go to [twbs/bootstrap]( or [jlong/sass-twitter-bootstrap](
Good pull requests - patches, improvements, new features - are a fantastic
help. They should remain focused in scope and avoid containing unrelated
commits. If your contribution involves a significant amount of work or substantial
changes to any part of the project, please open an issue to discuss it first.
Make sure to adhere to the coding conventions used throughout a project
(indentation, accurate comments, etc.). Please update any documentation that is
relevant to the change you're making.
## Do not…
Please **do not** use the issue tracker for personal support requests (use
[Stack Overflow](
Please **do not** derail or troll issues. Keep the
discussion on topic and respect the opinions of others.
*props [html5-boilerplate](*
The MIT License (MIT)
Copyright (c) 2013 Twitter, Inc
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
Bootstrap for Sass
Version: 3.3.1
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
- Only kept the 'assets/' directory
- used the information from 'scss/' directory in the 'theme/raw/sass/' directory but highly customised
# Bootstrap for Sass [![Gem Version](]( [![Bower Version](]( [![Build Status](](
`bootstrap-sass` is a Sass-powered version of [Bootstrap](, ready to drop right into your Sass powered applications.
## Installation
Please see the appropriate guide for your environment of choice:
* [Ruby on Rails](#a-ruby-on-rails).
* [Compass](#b-compass-without-rails) not on Rails.
* [Bower](#c-bower).
### a. Ruby on Rails
`bootstrap-sass` is easy to drop into Rails with the asset pipeline.
In your Gemfile you need to add the `bootstrap-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.
gem 'bootstrap-sass', '~> 3.3.1'
gem 'sass-rails', '>= 3.2'
It is also recommended to use [Autoprefixer]( with Bootstrap
to add browser vendor prefixes automatically. Simply add the gem:
gem 'autoprefixer-rails'
`bundle install` and restart your server to make the files available through the pipeline.
Import Bootstrap styles in `app/assets/stylesheets/application.css.scss`:
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
`bootstrap-sprockets` must be imported before `bootstrap` for the icon fonts to work.
Make sure the file has `.css.scss` extension (or `.css.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 remove it:
$ rm app/assets/stylesheets/application.css
Do not use `//= require` in Sass or your other stylesheets will not be [able to access][antirequire] the Bootstrap mixins or variables.
Require Bootstrap Javascripts in `app/assets/javascripts/application.js`:
//= require jquery
//= require bootstrap-sprockets
#### Bower with Rails
When using [bootstrap-sass Bower package](#c-bower) instead of the gem in Rails, configure assets in `config/application.rb`:
# Bower asset paths
root.join('vendor', 'assets', 'bower_components').to_s.tap do |bower_path|
config.sass.load_paths << bower_path
config.assets.paths << bower_path
# Precompile Bootstrap fonts
config.assets.precompile << %r(bootstrap-sass/assets/fonts/bootstrap/[\w-]+\.(?:eot|svg|ttf|woff)$)
# Minimum Sass number precision required by bootstrap-sass
::Sass::Script::Number.precision = [10, ::Sass::Script::Number.precision].max
Replace Bootstrap `@import` statements in `application.css.scss` with:
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";
Replace Bootstrap `require` directive in `application.js` with:
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
#### Rails 4.x
Please make sure `sprockets-rails` is at least v2.1.4.
#### Rails 3.2.x
Rails 3.2 is [no longer maintained for bugfixes](, and you should upgrade as soon as possible.
Starting with bootstrap-sass v3.1.1.1, due to the structural changes from upstream you will need these
backported asset pipeline gems on Rails 3.2. There is more on why this is necessary in and
gem 'sprockets-rails', '=2.0.0.backport1'
gem 'sprockets', '=2.2.2.backport2'
gem 'sass-rails', github: 'guilleiguaran/sass-rails', branch: 'backport'
### b. Compass without Rails
Install the gem
gem install bootstrap-sass
If you have an existing Compass project:
# config.rb:
require 'bootstrap-sass'
$ bundle exec compass install bootstrap
If you are creating a new Compass project, you can generate it with bootstrap-sass support:
$ bundle exec compass create my-new-project -r bootstrap-sass --using bootstrap
or, alternatively, if you're not using a Gemfile for your dependencies:
$ compass create my-new-project -r bootstrap-sass --using bootstrap
This will create a new Compass project with the following files in it:
* [styles.sass](/templates/project/styles.sass) - main project Sass file, imports Bootstrap and variables.
* [_bootstrap-variables.sass](/templates/project/_bootstrap-variables.sass) - all of Bootstrap variables, override them here.
Some bootstrap-sass mixins may conflict with the Compass ones.
If this happens, change the import order so that Compass mixins are loaded later.
### c. Bower
Using bootstrap-sass as a Bower package is still being tested. It is compatible with node-sass 0.8.3+. You can install it with:
$ bower install bootstrap-sass-official
`bootstrap-sass` is taken so make sure you use the command above.
Sass, JS, and all other assets are located at [assets](/assets).
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 as [wiredep](
#### Node.js Mincer
If you use [mincer][mincer] with node-sass, import bootstrap into like so:
In `application.css.ejs.scss` (NB **.css.ejs.css**):
// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";
In `application.js`:
//= require bootstrap-sprockets
See also this [example manifest.js](/test/dummy_node_mincer/manifest.js) for mincer.
### Configuration
#### 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`](assets/stylesheets/_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';
#### Sass: Number Precision
bootstrap-sass [requires]( minimum [Sass number precision][sass-precision] of 10 (default is 5).
Precision is set for Rails and Compass automatically.
When using ruby Sass compiler standalone or with the Bower version you can set it with:
::Sass::Script::Number.precision = [10, ::Sass::Script::Number.precision].max
Note that libsass and node-sass do not currently support the precision option, due to an open bug ([bug #364]( in libsass.
#### Sass: Autoprefixer
Using [Autoprefixer][autoprefixer] with Bootstrap is recommended.
[Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from [Can I Use](
#### JavaScript
[`assets/javascripts/bootstrap.js`](/assets/javascripts/bootstrap.js) contains all of Bootstrap JavaScript,
concatenated in the [correct order](/assets/javascripts/bootstrap-sprockets.js).
#### JavaScript with Sprockets or Mincer
If you use Sprockets or Mincer, you can require `bootstrap-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 the [Bootstrap JS documentation][jsdocs].
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
#### Fonts
The fonts are referenced as:
`$icon-font-path` defaults to `bootstrap/` if asset path helpers are used, and `../fonts/bootstrap/` otherwise.
When using bootstrap-sass with Compass, Sprockets, or Mincer, you **must** import the relevant path helpers before Bootstrap itself, for example:
@import "bootstrap-compass";
@import "bootstrap";
## Usage
### Sass
Import Bootstrap into a Sass file (for example, application.css.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 found [here]( 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";
## Version
`bootstrap-sass` version reflects the upstream version, with an additional number for Sass-specific changes.
Always refer to [](/ when upgrading.
## Development and Contributing
If you'd like to help with the development of bootstrap-sass itself, read this section.
### Upstream Converter
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.