https://github.com/thanhluanuit/bootstrap-in-rails6
How to use Bootstrap in Rails 6 through Webpacker
https://github.com/thanhluanuit/bootstrap-in-rails6
bootstrap bootstrap4 rails6 ruby-on-rails
Last synced: 4 months ago
JSON representation
How to use Bootstrap in Rails 6 through Webpacker
- Host: GitHub
- URL: https://github.com/thanhluanuit/bootstrap-in-rails6
- Owner: thanhluanuit
- Created: 2020-03-25T04:19:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-19T18:06:04.000Z (over 3 years ago)
- Last Synced: 2025-09-30T13:38:55.405Z (9 months ago)
- Topics: bootstrap, bootstrap4, rails6, ruby-on-rails
- Language: Ruby
- Homepage: https://luanotes.com/blogs/using-bootstrap-with-webpacker-in-rails-6
- Size: 1.26 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## How to use Bootstrap in Rails 6
#### Step 1: Install Bootstrap
```
yarn add bootstrap
```
#### Step 2: Install Bootstrap dependencies: jQuery and popper.js
```
yarn add jquery popper.js
```
#### Step 3: Import JavaScript Bootstrap and dependencies
```
# app/javascript/packs/application.js
import "jquery";
import "popper.js";
import "bootstrap";
```
#### Step 4: Import CSS Bootstrap
Add a folder name stylesheets in app/javascript/
Add application.scss file in app/javascript/stylesheets
Add below code to import bootstrap css:
```
# In app/javascript/stylesheets/application.scss
@import "~bootstrap/scss/bootstrap";
```
Import CSS to application.js
```
# In app/javascript/packs/application.js
import "../stylesheets/application"
```
### DONE!
#### See folder structure
```cassandraql
app/javascript
├── channels
├── packs
│ └── application.js
└── stylesheets
└── application.scss
```
More details in Luanotes.com: https://luanotes.com/blogs/using-bootstrap-with-webpacker-in-rails-6