2. Layouts with Bootstrap

August 2015 · 2 minute read

Keep watching to see how I build my app!

For quick and easy layout designs I have integrated Bootstrap. It means you don’t need to waste a whole lot of time learning/designing how your application is going to look. It gives you enough, though to present a professional looking front end.

1. First up, you’ll need to install bootstrap and sass, you can follow the simple instructions at http://getbootstrap.com/getting-started/

Once your downloads are complete, you will need to ensure that you require the correct gems in your application’s app/Gemfile

2. Under app/assets/stylesheets you should find a file names application.css

Rename this file application.scss and input the following code into the file. This will allow me to utilize the components of bootstrap that I’m going to want to use.

3. Under app/assets/javascripts there is a file called application.js

Line 16 below will allow my app to read the javascript components of the bootstrap used in my rails app

Now you’re ready to start Bootstrapping!

4. Under app/views/layouts you should see a file called application.html.erb

By editing this file, you can alter the layout of your entire application. The text inside the

tagsabove is the text that will appear in your applications tab

5. The first thing I want to have across the top of my application is a nav-bar to make it easy for users to navigate the site. Here is how I’m going to build it.

First, we need in put in an empty nav-bar inside the ‘body’ tags

A nav-bar will appear at the top of your page.

6. Inside the ‘nav’ tags is where drop-down menus, links and buttons might be places. The Collaboration Room will have a drop-down menu to select user login/logout in the nav-bar.

The following code will produce a drop-down menu on the right-hand side of the nav-bar:

The following the class=”dropdown-menu” will produce a drop-down with a link to login/out. Note that this “drop-down menu” needs to be inside the class=”dropdown” link for it to work.

7. The last thing I want to is ensure that my entire app is centered on the page. To do this is simple. Just include ‘centre’ tags around the <%= yield %>, which shows all of the content.

The Collaboration Room Application is already starting to take form.

*References

*Resources