bootstrap-sass
Advanced tools
bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.
The bootstrap-sass npm package is a Sass-powered version of Bootstrap, a popular front-end framework for developing responsive and mobile-first web projects. It allows developers to use Bootstrap's components and utilities with the power of Sass for more flexible and maintainable styles.
Responsive Grid System
Bootstrap-sass provides a responsive grid system that allows you to create complex layouts using a series of rows and columns. The grid system is fully responsive and adjusts to different screen sizes.
/* Import Bootstrap's grid system */
@import 'bootstrap-sass/assets/stylesheets/bootstrap';
/* Example HTML */
<div class="container">
<div class="row">
<div class="col-md-4">Column 1</div>
<div class="col-md-4">Column 2</div>
<div class="col-md-4">Column 3</div>
</div>
</div>Customizable Variables
Bootstrap-sass allows you to customize Bootstrap's default variables to fit your project's design requirements. You can change colors, fonts, and other styles by overriding the default variables before importing the rest of Bootstrap.
/* Import Bootstrap's variables and mixins */
@import 'bootstrap-sass/assets/stylesheets/bootstrap/variables';
@import 'bootstrap-sass/assets/stylesheets/bootstrap/mixins';
/* Customize variables */
$brand-primary: #5cb85c;
$font-size-base: 16px;
/* Import the rest of Bootstrap */
@import 'bootstrap-sass/assets/stylesheets/bootstrap';Pre-styled Components
Bootstrap-sass includes a variety of pre-styled components such as buttons, navigation bars, forms, and modals. These components are ready to use and can be easily customized using Sass.
/* Import Bootstrap's components */
@import 'bootstrap-sass/assets/stylesheets/bootstrap';
/* Example HTML */
<button class="btn btn-primary">Primary Button</button>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Brand</a>
</div>
</div>
</nav>The 'bootstrap' package is the official Bootstrap library that includes both CSS and JavaScript components. Unlike bootstrap-sass, it does not use Sass for customization but provides a similar set of features and components.
The 'foundation-sites' package is a responsive front-end framework similar to Bootstrap. It offers a flexible grid system, pre-styled components, and extensive customization options. Foundation is known for its mobile-first approach and accessibility features.
The 'bulma' package is a modern CSS framework based on Flexbox. It provides a responsive grid system, pre-styled components, and easy customization. Bulma is known for its simplicity and lightweight design compared to Bootstrap.
bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.
This is Bootstrap 3. For Bootstrap 4 use the Bootstrap rubygem if you use Ruby, and the main repo otherwise.
Please see the appropriate guide for your environment of choice:
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.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 in app/assets/stylesheets/application.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 .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 be able to access the Bootstrap mixins or variables.
Bootstrap JavaScript depends on jQuery.
If you're using Rails 5.1+, add the jquery-rails gem to your Gemfile:
gem 'jquery-rails'
$ bundle install
Require Bootstrap Javascripts in app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets
bootstrap-sprockets and bootstrap should not both be included in application.js.
bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while
bootstrap provides a concatenated file containing all Bootstrap Javascripts.
When using bootstrap-sass Bower package 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
end
# Precompile Bootstrap fonts
config.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 in application.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
Please make sure sprockets-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 at 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.
If you use mincer with node-sass, import Bootstrap like so:
In application.css.ejs.scss (NB .css.ejs.scss):
// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";
In application.js:
//= require bootstrap-sprockets
See also this example 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-sass requires minimum Sass number precision of 8 (default is 5).
Precision is set for Ruby automatically when using the sassc-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 of Autoprefixer. Autoprefixer adds vendor prefixes to CSS rules using values from Can I Use.
To match upstream Bootstrap's level of browser compatibility, set Autoprefixer's browsers 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 the correct order.
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.
//= 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 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";
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 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";
Bootstrap is available as an Eyeglass 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 as PATCH. 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 for Sass-specific changes. This was changed due to Bower and npm compatibility issues.
The upstream versions vs the Bootstrap for Sass versions are:
| Upstream | Sass |
|---|---|
| 3.3.4+ | same |
| 3.3.2 | 3.3.3 |
| <= 3.3.1 | 3.3.1.x |
Always refer to CHANGELOG.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 to use Bootstrap 3, see the installation section above.
Upstream changes to the Bootstrap project can now be pulled in using the convert rake task.
Here's an example run that would pull down the master branch from the main twbs/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 located here and does the following:
assets/javascripts/bootstrap, a Sprockets manifest at assets/javascripts/bootstrap-sprockets.js, and a concatenation at assets/javascripts/bootstrap.js.assets/fonts/bootstrap.Bootstrap::BOOTSTRAP_SHA in version.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 with conversion.
bootstrap-sass has a number of major contributors:
and a significant number of other contributors.
bootstrap-sass is used to build some awesome projects all over the web, including Diaspora, rails_admin, Michael Hartl's Rails Tutorial, gitlabhq and kandan.
3.4.2 (non-ruby only)
FAQs
bootstrap-sass is a Sass-powered version of Bootstrap 3, ready to drop right into your Sass powered applications.
The npm package bootstrap-sass receives a total of 200,219 weekly downloads. As such, bootstrap-sass popularity was classified as popular.
We found that bootstrap-sass demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.
Security News
The npm package for the LottieFiles Player web component was hit with a supply chain attack after a software engineer's npmjs credentials were compromised.