PHPackages                             thatsus/bs-sass - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. thatsus/bs-sass

ActiveLibrary

thatsus/bs-sass
===============

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

v3.4.5(10y ago)017MITRuby

Since Feb 6Pushed 10y ago3 watchersCompare

[ Source](https://github.com/thatsus/bs-sass)[ Packagist](https://packagist.org/packages/thatsus/bs-sass)[ Docs](http://github.com/thatsus/bootstrap-sass)[ RSS](/packages/thatsus-bs-sass/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (9)DependenciesVersions (25)Used By (0)

Bootstrap for Sass
==================

[](#bootstrap-for-sass)

[![Gem Version](https://camo.githubusercontent.com/1884c79a3bc47a6b7e6214d500e510993645657093b95405358e4ea37015bbb4/68747470733a2f2f62616467652e667572792e696f2f72622f626f6f7473747261702d736173732e737667)](http://badge.fury.io/rb/bootstrap-sass)[![npm version](https://camo.githubusercontent.com/f71975cf98b1e1cb971dd558257e75e26e4bed291df2614c346f031b6c029f87/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f626f6f7473747261702d736173732e7376673f7374796c653d666c6174)](https://www.npmjs.com/package/bootstrap-sass)[![Bower Version](https://camo.githubusercontent.com/4469f6835c8ab714543f3b3b9b290a01c7637c29af199ea13d5d6e186e7632de/68747470733a2f2f62616467652e667572792e696f2f626f2f626f6f7473747261702d736173732e737667)](http://badge.fury.io/bo/bootstrap-sass)[![Build Status](https://camo.githubusercontent.com/2fafb706fdb2ee8e1429a6e332e0e7036f5eeab8ece257f5f7c10879ffea23c0/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f747762732f626f6f7473747261702d736173732e737667)](https://travis-ci.org/twbs/bootstrap-sass)

`bootstrap-sass` is a Sass-powered version of [Bootstrap](https://github.com/twbs/bootstrap) 3, ready to drop right into your Sass powered applications.

This is Bootstrap 3. For Bootstrap 4 use the [Bootstrap Ruby gem](http://github.com/twbs/bootstrap-rubygem) if you use Ruby, and the [main repo](http://github.com/twbs/bootstrap) otherwise.

Installation
------------

[](#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).
- [npm / Node.js](#d-npm--nodejs).

### a. Ruby on Rails

[](#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.6'
gem 'sass-rails', '>= 3.2'
```

`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](https://github.com/twbs/bootstrap-sass/issues/79#issuecomment-4428595) the Bootstrap mixins or variables.

Require Bootstrap Javascripts in `app/assets/javascripts/application.js`:

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

`bootstrap-sprockets` and `bootstrap` [should not both be included](https://github.com/twbs/bootstrap-sass/issues/829#issuecomment-75153827) 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.

#### Bower with Rails

[](#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