How do I install bootstrap-sass in a Rails application?

Add the 'bootstrap-sass' and 'sassc-rails' gems to your Gemfile, run bundle install, then import Bootstrap in application.scss and require bootstrap-sprockets in application.js with jQuery. The README provides specific steps for Rails 4+.

Does bootstrap-sass work with Webpack?

It's primarily designed for Sprockets, Bower, or npm with asset pipelines; using it with Webpack requires manual SCSS imports and additional setup for fonts and JavaScript, which isn't documented in the README.

Bootstrap-sass or Bootstrap 4: which should I use for a new project?

For new projects, Bootstrap 4 or 5 is recommended due to modern features and better performance. Bootstrap-sass is only suitable for maintaining legacy Bootstrap 3 codebases in Sass environments.

How to customize Bootstrap variables with bootstrap-sass?

Define custom Sass variables like $navbar-default-bg in your SCSS file before importing Bootstrap, allowing seamless overrides of default styles as shown in the README examples.

Is bootstrap-sass compatible with Rails 6?

Yes, but it requires the sassc-rails gem and proper asset pipeline configuration. Note that Rails 6+ may have shifted towards Webpacker, so Sprockets setup might need extra attention.

What's the difference between requiring 'bootstrap' and 'bootstrap-sprockets' in JavaScript?

'bootstrap' loads a concatenated file with all plugins, while 'bootstrap-sprockets' allows individual module imports like dropdown.js, offering better control over dependencies and file size.

Open-Awesome

Bootstrap-sass

MITSCSSv3.4.1

Official Sass port of Bootstrap 3, providing all its styles, components, and JavaScript as Sass files for easy integration.

Visit Website GitHub

12.5k stars3.5k forks0 contributors

What is Bootstrap-sass?

Bootstrap 3 for Sass is the official Sass port of the Bootstrap 3 front-end framework. It converts Bootstrap's LESS source into SCSS, providing all the original styles, components, and JavaScript in a format ready for Sass-based projects. It solves the problem of integrating Bootstrap 3 into modern Sass workflows, allowing developers to leverage variables, mixins, and modular imports.

Target Audience

Frontend developers and teams using Sass (SCSS) in their stack, particularly those working with Ruby on Rails, Bower, or npm/Node.js environments who need Bootstrap 3's UI components with Sass customization capabilities.

Value Proposition

Developers choose this over manually converting Bootstrap because it's the official, maintained port that guarantees compatibility with Bootstrap 3 updates. It provides seamless integration with Sass tooling, modular component imports, and dedicated support for major asset pipelines.

Overview

Official Sass port of Bootstrap 2 and 3.

Use Cases

Best For

Integrating Bootstrap 3 into Ruby on Rails applications using the asset pipeline
Using Bootstrap 3 components in Sass (SCSS) projects with custom variable overrides
Managing Bootstrap 3 dependencies via Bower or npm in a Sass build process
Selectively importing only needed Bootstrap JavaScript modules via Sprockets
Maintaining Bootstrap 3 compatibility while leveraging Sass mixins and functions
Building responsive websites with Bootstrap 3's grid system within a Sass workflow

Not Ideal For

Projects requiring Bootstrap 4 or 5 features like improved grid systems or CSS custom properties
Teams not using Sass or compatible asset pipelines like Sprockets, Bower, or npm
Greenfield applications where modern CSS frameworks or utility-first approaches are preferred
Environments with strict no-jQuery policies, as Bootstrap JavaScript depends on it

Pros & Cons

Pros

Official Sass Port

Maintains strict parity with Bootstrap 3 updates by automatically converting LESS to SCSS, ensuring reliability and compatibility with the original framework.

Rails Asset Pipeline Integration

Provides dedicated Gemfile setup and Sprockets support, allowing drop-in integration for Ruby on Rails applications with minimal configuration.

Modular Component Imports

Enables selective import of Bootstrap components via SCSS files, optimizing bundle sizes by including only necessary styles and JavaScript.

Flexible JavaScript Packaging

Offers both concatenated and individual JS modules through Sprockets, giving fine-grained control over which Bootstrap plugins to load.

Cons

Locked to Bootstrap 3

Based on the outdated Bootstrap 3, which lacks modern features like CSS grid utilities, flexbox enhancements, and is no longer actively developed upstream.

Complex Non-Rails Setup

Requires additional configuration for Autoprefixer, Sass number precision adjustments, and manual asset path handling in Bower or npm environments.

Dependency on jQuery

All JavaScript plugins necessitate jQuery, adding bloat and compatibility issues in projects moving towards vanilla JS or modern frameworks.

Frequently Asked Questions

Related Projects

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Modern CSS framework based on Flexbox

Stars50,071

Forks3,905

Last commit1 month ago

Foundation for Sites

The most advanced responsive front-end framework in the world. Quickly create prototypes and production code for sites that work on any kind of device.

Stars29,769

Forks5,385

Last commit1 year ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub