Integrating Rails and Bootstrap

bootstrap guide tips-and-tricks tutorial

Introduction

Integrating Rails and Bootstrap. Bootstrap rails step by step. I will show you how to integrating Rails and Bootstrap, Let's get started.

Get Started

First, create sample rails, like this

rails new bootstrap_rails

generate scaffold Product

rails g scaffold Product name:string price:decimal notes:text

Migrate change database

rake db:migrate

We need some data to our app, lets make seed data. Put the following lines in your db/seeds.rb file.
then run the following in your terminal/command prompt:

rake db:seed

Now, let's make simple route :

In your config/routes.rb file, add root 'products#index':

now run the server:

rails s

Now when you visit the app in your browser, at http://localhost:3000, you should see this:

How to Integrate with Bootstrap

Install the ruby gem for bootstrap


Autoprefixer (autoprefixer-rails) is optional, but recommended. It automatically adds the proper vendor prefixes to your CSS code when it is compiled.

Now run

bundle install

Import Bootstrap CSS assets

We will rename app/assets/stylesheets/application.css to app/assets/stylesheets/application.css.sass. Then we can import the Bootstrap assets in your newly-renamed application.css.sass file.




When you compile, imported assets render a compiled version of their contents where the @import statement was found.

Import Bootstrap Javascript assets

You need to add:


to your app/assets/javascripts/application.js file.

It is important that it comes after:
//= require jquery
Your file should look like this:


It is also important that:

//= require_tree .
is the last thing to be required.

The reason is, //= require_tree . compiles each of the other Javascript files in the javascripts directory and any subdirectories. If you require bootstrap-sprockets after everything else, your other scripts may not have access to the Bootstrap functions.


Let's make view beuty like bootstrap view.
Edit your layouts/application.html.erb

Your view will like this:


Oke, let's edit your products/index.html.erb

The result :


Congratulation

That's it, simple tutorial how to integrate Rails and Bootstrap. You can download source code in my github

Bagikan

Jangan lewatkan

Integrating Rails and Bootstrap

4/ 5

Oleh Admin BS

Admin BS 4:04:00 AM Komentar