PHPackages                             entreprise7pro/bootstrap-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. entreprise7pro/bootstrap-sass

ActiveLibrary

entreprise7pro/bootstrap-sass
=============================

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

v3.4.5(1y ago)11562[1 PRs](https://github.com/entreprise7pro/bootstrap-sass/pulls)MITSCSS

Since Nov 13Pushed 10mo agoCompare

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

READMEChangelog (1)DependenciesVersions (4)Used By (0)

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

[](#bootstrap-3-for-sass)

[![Gem Version](https://camo.githubusercontent.com/e11c58fff559322d13b8ee9165ecc0396e9926a3c4be18bc60f8d1656674a927/68747470733a2f2f62616467652e667572792e696f2f72622f656e74726570726973653770726f2d626f6f7473747261702d736173732e737667)](http://badge.fury.io/rb/entreprise7pro-bootstrap-sass) Ready! [![npm version](https://camo.githubusercontent.com/a9040156e8991b4fa33d9eeb234dc0d1d753aad3db5d9f809b22086c2da92ff2/68747470733a2f2f696d672e736869656c64732e696f2f6e706d2f762f656e74726570726973653770726f2d626f6f7473747261702d736173732e7376673f7374796c653d666c6174)](https://www.npmjs.com/package/entreprise7pro-bootstrap-sass) Ready! [![Build Status](https://camo.githubusercontent.com/46ca4cd997f44bfe84e5aae3f0bdde8ece4f4bc9a1be051f2c117edf9644e64f/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f656e74726570726973653770726f2f626f6f7473747261702d736173732e737667)](https://travis-ci.org/entreprise7pro/bootstrap-sass) TDB

### Bower instructions

[](#bower-instructions)

- `bower install entreprise7pro/bootstrap-sass --save`

### Composer instructions

[](#composer-instructions)

- `composer require entreprise7pro/bootstrap-sass`
-
-

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

This is Bootstrap **3**. For Bootstrap **4 or 5** see [main repo](https://github.com/twbs/bootstrap).

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

[](#installation)

Please see the appropriate guide for your environment of choice:

- [Ruby on Rails](#a-ruby-on-rails).
- [Bower](#b-bower).
- [npm / Node.js](#c-npm--nodejs).

Building for gem
----------------

[](#building-for-gem)

- `gem build entreprise7pro-bootstrap-sass.gemspec`
- `gem push entreprise7pro-bootstrap-sass.3.[0-9].[0-9]`

### a. Ruby on Rails

[](#a-ruby-on-rails)

`entreprise7pro-bootstrap-sass` is easy to drop into Rails with the asset pipeline.

In your Gemfile you need to add the `entreprise7pro-bootstrap-sass` gem, and ensure that the `sass-rails` gem is present - it is added to new Rails applications by default.

```
gem 'entreprise7pro-bootstrap-sass', '~> 3.4.7'
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 "entreprise7pro-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/entreprise7pro/bootstrap-sass/issues/79#issuecomment-4428595) 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](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 (TBD!) `entreprise7pro-bootstrap` provides a concatenated file containing all Bootstrap Javascripts.

#### Bower with Rails

[](#bower-with-rails)

When using [entreprise7pro-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