Bootstrap for Sass
Bootstrap 3's CSS framework packaged as Sass for Rails, npm, and Bower projects.twbs/bootstrap-sass
- Stars
- 12.5k
- Forks
- 3.4k
- Licence
- MIT
- Language
- SCSS
- Last update
- 10 months ago
- Type
- Library
What it is
bootstrap-sass is an official port of Bootstrap 3, a popular front-end toolkit for styling websites, written in Sass so you can customize its variables and mixins. It is meant to be dropped into an existing project, mainly Ruby on Rails apps, or installed through npm or Bower. The README says it covers Bootstrap 3 only; Bootstrap 4 has its own repositories.
- Add Bootstrap 3 styles and JavaScript to a Rails app through the asset pipeline
- Import only selected Bootstrap components by copying _bootstrap.scss into a custom file and commenting out unused modules
- Override Bootstrap variables such as navbar colors before importing the framework
- Install Bootstrap 3 Sass into an npm project with npm install bootstrap-sass
Great for
- Rails developers who already use the asset pipeline and want Bootstrap 3
- Node.js projects that want Bootstrap 3 Sass via npm
- Teams that need to customize Bootstrap by overriding Sass variables before import
- Developers maintaining an existing Bootstrap 3 site
Not ideal for
- New projects that want Bootstrap 4 or later: the README directs you to the main Bootstrap repo or the Bootstrap rubygem instead
- Users who only need plain CSS with no build step: the README describes a Sass-based setup
- Rails 3 apps: the README says the gem is no longer compatible with Rails 3, with v3.1.1.0 as the last version supporting Rails 3.2
How to get it
- 1
Install with a package manager
You'll need: Ruby on Rails with the asset pipeline (for the gem route) · Node.js and npm (for the npm route) · Bower (for the Bower route)
npm install
npm install bootstrap-sassBower install
bower install bootstrap-sass - 2
Run it
- Add the bootstrap-sass gem and sassc-rails to your Gemfile, then run bundle install.
- Rename any application.css to application.scss so Sass is processed.
- In application.scss, import bootstrap-sprockets and then bootstrap.
- In application.js, require jquery and bootstrap-sprockets, then restart your server.
- 3
Get the most out of it
- Copy _bootstrap.scss to _bootstrap-custom.scss and comment out components you do not need to reduce CSS size
- Redefine variables such as $navbar-default-bg before @import "bootstrap" to match your brand
- Set Autoprefixer's browsers option to the list in the README to match upstream Bootstrap's browser support
- Use bootstrap-sprockets to load individual JavaScript modules instead of the full concatenated bootstrap.js
Downloads
Strengths
- Official port maintained under the Bootstrap organization
- Supports Rails, npm, and Bower setups documented in the README
- Lets you customize Bootstrap by overriding Sass variables and importing only needed components
Trade-offs
- Covers only Bootstrap 3, which is an older major version
- Requires setup details such as Sass number precision of 8 and Autoprefixer configuration
- Rails JavaScript setup needs jQuery and a choice between concatenated and individual JS files
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| bootstrap-sass (this) | 12.5k | Library | intermediate | 10 months ago | Rails developers who already use the asset pipeline and want Bootstrap 3 |
| bulma | 50k | Library | beginner | 2 months ago | Developers who want a quick, consistent styling baseline for a web page |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.