Bootstrap Sass

https://github.com/twbs/bootstrap-sass
Admin
Bootstrap Sass is a Sass port of the Bootstrap front-end framework, packaged as the bootstrap-sass...
Tokens:2,966
Snippets:26
Trust Score:9.4
License:MIT
Update:4 months ago
Show doc for...
Tokens:
Raw
### Install bootstrap-sass with Bower

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Command to install the `bootstrap-sass` package using Bower, a package manager for the web. This makes Bootstrap's Sass, JS, and other assets available for use in front-end projects.

```console
$ bower install bootstrap-sass
```

--------------------------------

### Install bootstrap-sass via npm

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

The command to install the bootstrap-sass package from npm into your Node.js project. This is the primary method for obtaining the library.

```console
$ npm install bootstrap-sass
```

--------------------------------

### Mincer SCSS Import

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Demonstrates how to import Bootstrap assets using Mincer within an SCSS file. This setup integrates with Mincer's asset path helpers for proper asset resolution.

```scss
// Import mincer asset paths helper integration
@import "bootstrap-mincer";
@import "bootstrap";
```

--------------------------------

### Eyeglass Bootstrap Import

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Imports the entire Bootstrap library as an Eyeglass module. This method is used when Bootstrap is installed via NPM and managed through Eyeglass.

```scss
@import "bootstrap-sass/bootstrap"
```

--------------------------------

### Import Bootstrap Sass from Bower in Rails

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Replaces default Bootstrap `@import` statements with paths pointing to the `bootstrap-sass` Bower package. This ensures styles are correctly loaded from the installed Bower components.

```scss
$icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
@import "bootstrap-sass/assets/stylesheets/bootstrap-sprockets";
@import "bootstrap-sass/assets/stylesheets/bootstrap";
```

--------------------------------

### Autoprefixer Browser Compatibility

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Specifies the browser compatibility settings for Autoprefixer, matching upstream Bootstrap's support levels. This ensures vendor prefixes are applied correctly across target browsers.

```json
[
  "Android 2.3",
  "Android >= 4",
  "Chrome >= 20",
  "Firefox >= 24",
  "Explorer >= 8",
  "iOS >= 6",
  "Opera >= 12",
  "Safari >= 6"
]
```

--------------------------------

### Import All Bootstrap Styles

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

The standard method to import all of Bootstrap's styles, mixins, and variables into an application's Sass file. This provides the complete Bootstrap styling.

```scss
@import "bootstrap";
```

--------------------------------

### Run Upstream Bootstrap Conversion (Rake Task)

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Executes the `convert` rake task to synchronize bootstrap-sass with upstream Bootstrap changes. This task automatically converts LESS files to SCSS and updates JavaScript and font assets from the main Bootstrap repository.

```Ruby
rake convert
```

--------------------------------

### Compass Integration with Bootstrap Sass

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Illustrates the correct import order for integrating Bootstrap-Sass with Compass. Path helpers must be imported before Bootstrap itself for proper asset resolution.

```scss
@import "bootstrap-compass";
@import "bootstrap";
```

--------------------------------

### Custom Sass Import

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Illustrates how to create a custom Sass file to import specific Bootstrap components. This allows for a more tailored stylesheet by commenting out unwanted modules.

```scss
@import 'bootstrap-custom';
```

--------------------------------

### Run Upstream Bootstrap Conversion with Specific Commit (Rake Task)

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Executes the `convert` rake task with a specific commit hash or branch name to synchronize bootstrap-sass with a particular version of the upstream Bootstrap project. This allows for controlled updates to LESS, JavaScript, and font files.

```Ruby
rake convert[e8a1df5f060bf7e6631554648e0abde150aedbe4]
```

--------------------------------

### Configure Bower Assets in Rails

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Configures Rails asset pipeline to include assets from the `bootstrap-sass` Bower package. It sets Sass load paths, asset paths, and specifies fonts to be precompiled.

```ruby
# 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
```

--------------------------------

### Require Individual Bootstrap JavaScript Modules

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Demonstrates how to load specific Bootstrap JavaScript modules using Sprockets directives. This requires manually including any necessary dependencies for each module.

```js
//= require bootstrap/scrollspy
//= require bootstrap/modal
//= require bootstrap/dropdown
```

--------------------------------

### Sass Number Precision Configuration (Ruby)

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Configures the Sass number precision for Ruby environments, ensuring it meets the minimum requirement of 8 for bootstrap-sass. This is crucial for accurate Sass calculations.

```ruby
::Sass::Script::Value::Number.precision = [8, ::Sass::Script::Value::Number.precision].max
```

--------------------------------

### Import Bootstrap Theme Styles

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Imports optional Bootstrap theme styles, which can be used in conjunction with the main Bootstrap import for a themed appearance.

```scss
@import "bootstrap/theme";
```

--------------------------------

### Mincer JavaScript Require

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Shows the Sprockets-style directive to require Bootstrap's JavaScript assets when using Mincer. This ensures all necessary JavaScript components are loaded.

```js
//= require bootstrap-sprockets
```

--------------------------------

### Add bootstrap-sass Gem to Rails Gemfile

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Specifies the `bootstrap-sass` and `sassc-rails` gems required for Rails applications using the asset pipeline. Ensures compatibility with Sass processing and provides the latest Bootstrap 3 Sass version.

```ruby
gem 'bootstrap-sass', '~> 3.4.1'
gem 'sassc-rails', '>= 2.1.0'
```

--------------------------------

### Import Bootstrap Styles in Rails SCSS

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Imports Bootstrap styles into the main SCSS file (`application.scss`). `bootstrap-sprockets` must be imported before `bootstrap` for icon fonts to function correctly, ensuring all Bootstrap components are available.

```scss
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
@import "bootstrap-sprockets";
@import "bootstrap";
```

--------------------------------

### Rename CSS to SCSS in Rails

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Command to rename the main stylesheet from `application.css` to `application.scss` to enable Sass processing. This is necessary if a new Rails app defaults to CSS, allowing Sass directives like `@import` to be used.

```console
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```

--------------------------------

### Font Path Referencing

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Shows how Bootstrap's icon fonts are referenced within Sass. The `$icon-font-path` variable determines the location of the font files, defaulting to 'bootstrap/' or '../fonts/bootstrap/' based on asset path helpers.

```scss
"#{$icon-font-path}#{$icon-font-name}.eot"
```

--------------------------------

### Require All Bootstrap JavaScript

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

A Sprockets directive to load all of Bootstrap's JavaScript components. This is a convenient way to include all functionality at once.

```js
// Load all Bootstrap JavaScript
//= require bootstrap-sprockets
```

--------------------------------

### Eyeglass Specific Bootstrap Imports

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Shows how to import only specific parts of Bootstrap as Eyeglass modules, such as variables, mixins, or individual components like the carousel.

```scss
@import "bootstrap-sass/bootstrap/variables";
@import "bootstrap-sass/bootstrap/mixins";
@import "bootstrap-sass/bootstrap/carousel";
```

--------------------------------

### Require Bootstrap JS from Bower in Rails

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Replaces the default `require` directive in `application.js` to point to the `bootstrap-sprockets` file within the `bootstrap-sass` Bower package. This correctly includes Bootstrap's JavaScript assets.

```javascript
//= require bootstrap-sass/assets/javascripts/bootstrap-sprockets
```

--------------------------------

### Require Bootstrap JavaScripts in Rails

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Includes Bootstrap's JavaScript files in the `application.js` manifest. `bootstrap-sprockets` provides individual JS files, while `bootstrap` provides a concatenated file. Ensure only one is required.

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

--------------------------------

### Add jQuery Gem for Rails 5.1+

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Adds the `jquery-rails` gem to the Gemfile for Rails applications using version 5.1 or later. This is a dependency for Bootstrap's JavaScript components.

```ruby
gem 'jquery-rails'
```

--------------------------------

### Override Bootstrap Variables

Source: https://github.com/twbs/bootstrap-sass/blob/master/README.md

Demonstrates how to override Bootstrap's default Sass variables. Redefine variables before the `@import "bootstrap";` directive to customize styles.

```scss
$navbar-default-bg: #312312;
$light-orange: #ff8c00;
$navbar-default-color: $light-orange;

@import "bootstrap";
```
Tokens:
Raw