Starting a Rails 5 Application with SimpleForm and Bootstrap

Posted by

We will start a Rails 5 application with the Bootstrap responsive web design framework and a streamlined form framework. This will be accomplished with the implementation of the simple_form gem.

Start a new Rails application in the Terminal with rails new simple_app

Change directory in to the simple_app application root folder and open your application in your code editor.

Open your Gemfile and add the gem simple_form


Then bundle your application.

After you bundle, you will see a message popping up noting that you need to still add a Bootstrap Stylesheet to your Assets folder. A great place to get a Bootstrap stylesheet that allows you some differing themes is Bootswatch. You can select from varying color schemes.


Pick one that you like, click the Download button, and select the bootstrap.min.css link. This will open the file in your browser. Press control “a” (ctrl-a). That will select all of the CSS script. Follow up with ctrl-c.Β This will copy the text to your clipboard.

In your code editor open your assets folder, open your stylesheets, create a new file titled main.css and paste your bootstrap.min.css from your clipboard into the file. Save your file and then open the application.html.erb file inside your layouts folder. Add the stylesheet_link_tag ‘main’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ to your file.


Drop down to the <body> tag and add in a container tag to your application. This will provide the bootstrap container to your application providing a space between the edge of your screen and the text.


Go to assets.rb file in the config/initializers folder and add in the instructions for the Rails application to pre-compile the main.css file in your assets folder. Add this line Rails.application.config.assets.precompile += %w( main.css )


Now add in a scaffold. For instance, add in a Posts scaffold for your application. Head to the command line and run rails g scaffold Posts title body:text tags


Now it is time to set up your database. Run rake db:migrate

After you have set up your database. Let’s take a look at what the simple_form code looks like. Open your _form.html.erb file and notice how streamlined and easy it is to read your code. Add the autofocus: true text to your title form input. This is will draw the user’s attention to the title input field in the browser by highlighting it. Save your file.


Go to routes and make the Posts index your home page by adding root “posts#index” to your routes.rb file.

Save your file and head back to the terminal to start your rails server with the rails s command. Head to localhost:3000 in your browser. Click New in your application and see the layout of your rails form.simple_form_bootstrap_responsive_design_blog

Your mobile-friendly Ruby on Rails application is up and running.

code on





Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s