Using Bootstrap template inside my application and is it possible if I want to use separate CSS file for different page?

Hi Alex, I already completed your courses. It was very good and really help me to develop my product which more or less like Etsy. However, I want to ask your help, (this is not an issue, so I think I just post it here instead of inside the video if I'm not mistaken) My first question is how can I integrate Bootstrap template like Wrapbootstrap or Themeforest? Since I'm not really good in designing. I know how to do css and sass. The main reason is to cut my development time where there are tons of beautiful bootstrap template out there which it will take me forever if I want to do it myself. I want to focus more on backend instead of frontend. My second question is how can I write css and sass that only impact that particular page alone without affecting other pages? So far, I created the homepage where people wont directly go to my Listing page (in your video, you make the root path is Listing page, I changed that to Home. I created new route path to Home which works fine right now). Is it possible to do it? If not, do you have any suggestion? Thank you very much. I' willing to pay extra for these 2 extra features which I believe will benefit other students as well. Anyway, I will definitely recommend Baserails to my friends. Cheers from Malaysia!

Posted almost 4 years ago by Amrul
Posted almost 4 years ago by Alex Yang

Hey Amrul,

I'm glad that you've found our courses helpful! No need to pay extra - I'm generally happy to answer quick questions from students as long as they aren't terribly time-intensive or designed to avoid paying a contract developer.

I haven't used Wrapbootstrap or Themeforest before, but from what I understand, I believe the quality of each theme can vary. I'd recommend choosing a theme that is well-documented and at least somewhat popular if you want to reduce time spent on debugging. Here's an article I found with some good tips on integrating third-party themes:
http://joanswork.com/wrapbootstrap-theme-to-rails/

The way I write page-specific CSS is by going to my application layout file (app/views/layouts/application.html.erb) and changing the <body> tag to <body class="<%= controller_name %>-<%= action_name %>">. What this does is give your <body> tag a custom class depending on its controller/action. For example, your Listings Index page would have <body class="listings-index">. Then in your stylesheet, you can add styles directly to this class. Hope that helps!

Alex

1