1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
|
# Bootstrap Ruby Gem [](https://travis-ci.org/twbs/bootstrap-rubygem) [](https://rubygems.org/gems/bootstrap)
[Bootstrap 4][bootstrap-home] ruby gem for Ruby on Rails (Sprockets) and Compass.
For Sass versions of Bootstrap 3 and 2 see [bootstrap-sass](https://github.com/twbs/bootstrap-sass) instead.
## Installation
Please see the appropriate guide for your environment of choice:
* [Ruby on Rails 4+](#a-ruby-on-rails) or other Sprockets environment.
* [Compass](#b-compass-without-rails) not on Rails.
### a. Ruby on Rails
Add `bootstrap` to your Gemfile:
```ruby
gem 'bootstrap', git: 'https://github.com/twbs/bootstrap-rubygem'
```
Ensure that `sprockets-rails` is at least v2.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`:
```scss
// Custom bootstrap variables must be set or imported *before* bootstrap.
@import "bootstrap";
```
The available variables can be found [here][bootstrap-variables.scss].
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:
```console
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
```
Then, remove all the `*= require` 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 the Bootstrap mixins and variables.
Bootstrap JavaScript depends on jQuery.
If you're using Rails 5.1+, add the `jquery-rails` gem to your Gemfile:
```ruby
gem 'jquery-rails'
```
Bootstrap tooltips and popovers depend on [popper.js] for positioning.
The `bootstrap` gem already depends on the
[popper_js](https://github.com/glebm/popper_js-rubygem) gem.
Add Bootstrap dependencies and Bootstrap to your `application.js`:
```js
//= require jquery3
//= require popper
//= require bootstrap-sprockets
```
While `bootstrap-sprockets` provides individual Bootstrap components
for ease of debugging, you may alternatively require
the concatenated `bootstrap` for faster compilation:
```js
//= require jquery3
//= require popper
//= require bootstrap
```
### b. Compass without Rails
Install the gem:
```console
$ gem install bootstrap -v 4.0.0.alpha6
```
**If you have an existing Compass project:**
1. Require `bootstrap` in `config.rb`:
```ruby
require 'bootstrap'
```
2. Install Bootstrap with:
```console
$ bundle exec compass install bootstrap
```
**If you are creating a new Compass project, you can generate it with bootstrap support:**
```console
$ bundle exec compass create my-new-project -r bootstrap --using bootstrap
```
or, alternatively, if you're not using a Gemfile for your dependencies:
```console
$ compass create my-new-project -r bootstrap --using bootstrap
```
This will create a new Compass project with the following files in it:
* [styles.scss](/templates/project/styles.scss) - main project Sass file, imports Bootstrap and variables.
* [_bootstrap-variables.scss](/templates/project/_bootstrap-variables.scss) - all of Bootstrap variables, override them here.
Some bootstrap mixins may conflict with the Compass ones.
If this happens, change the import order so that Compass mixins are loaded later.
## Configuration
### Sass: Autoprefixer
Bootstrap requires the use of [Autoprefixer][autoprefixer].
[Autoprefixer][autoprefixer] adds vendor prefixes to CSS rules using values from [Can I Use](http://caniuse.com/).
If you are using bootstrap with Rails, autoprefixer is set up for you automatically.
Otherwise, please consult the [Autoprefixer documentation][autoprefixer].
### Sass: Individual components
By default all of Bootstrap is imported.
You can also import components explicitly. To start with a full list of modules copy
[`_bootstrap.scss`](assets/stylesheets/_bootstrap.scss) file into your assets as `_bootstrap-custom.scss`.
Then comment out components you do not want from `_bootstrap-custom`.
In the application Sass file, replace `@import 'bootstrap'` with:
```scss
@import 'bootstrap-custom';
```
[bootstrap-home]: http://v4-alpha.getbootstrap.com/
[bootstrap-variables.scss]: https://github.com/twbs/bootstrap-rubygem/blob/master/templates/project/_bootstrap-variables.scss
[autoprefixer]: https://github.com/ai/autoprefixer
[popper.js]: https://popper.js.org
|
