I'm trying to learn how to use Bootstrap with a rails application and don't understand a difference between the Bootstrap Starter Template and what I see when I load my rails app.
I copy-paste the source code of the Starter Template directly into my root view of my application. But when I run rails s, and go to localhost, the div with h1 "Bootstrap Starter Template" is displayed to the left and underneath navbar.
I've googled reasons for this, and I've seen that there's a solution to add padding to the body class.
What I don't understand:
why do I need to add the padding solution to my copy-pasted view when the same source code displays perfectly fine on the bootstrap examples page
I'm not sure if this matters, but I'm using gem bootstrap-sass version 3.3.5
I'm unfamiliar with how Bootstrap is implemented on a web app built on Ruby on Rails. I've been asked to create the front-end ,HTML/CSS for new pages. I strictly have been working with small, static sites so I don't know the way to go about this. I've seen that the CSS files only include the specific code that your page requires?
Does that mean that I will have to copy each component's Boostrap CSS to a separate CSS file for my page?
You can choose one of the following gems to get all the required components of bootstrap in your rails application:
Twitter Bootstrap Rails
Less Rails Bootstrap
Furthermore detailed info to implement it on pages can be get # http://www.gotealeaf.com/blog/integrating-rails-and-bootstrap-part-1
I'm learning Rails and was trying out the Devise gem. I have the bootstrap-sass gem installed and have imported the bootstrap css and javascript files successfully. Bootstrap works fine with forms and buttons for resources that I create.
However, the forms and buttons generated by Devise don't inherit the Bootstrap styling and they retain their plain looks. In many tutorials I've read/watched, the Bootstrap style is automatically applied to Devise views. Wondering what I'm doing wrong here.
I'm using Rails 3.2, Bootstrap 3 and Devise 3.2.2. Thanks in advance!
Here's the screenshot http://i.imgur.com/9AW2T3H.png
I was following an outdated tutorial video. From what I have learned so far, Devise have to be stylized for Bootstrap just like we do other forms.
I have installed the twitter bootstrap rails gem and ran all the commands.
I have seen some basic style changes which leads me to some confidence. However with I use the following class
<div class="jumbotron masthead">
<h1>Test Heading</h1>
<p>Find me in app/views/pages/home.html.erb</p>
</div>
It does not do anything. According to the twitter bootstrap homepage and inspecting, this should work.
Am I missing something?
Are you sure the bootstrap gem uses the latest version of Bootstrap? I always include the CSS and JS files manually, so that I can always have the latest version. I haven't used the masthead, but it is included in the Bootstrap CSS files. https://github.com/twitter/bootstrap/blob/master/docs/assets/css/docs.css#L58
The jumbotron masthead was an extra addition on the Bootstrap GitHub doc pages that isn't included in the "proper" release of Bootstrap.
There's nothing to stop you pinching the code from here and adding it to your Rails project yourself though!
The website https://wrapbootstrap.com/ has themes which were made using Twitter Bootstrap. Each of these themes include different versions of Twitter Bootstrap along with other various libraries and versions (jquery, fontawesome, etc...)
How do I add these themes to my existing Rails app? What are the steps?
I'm especially curious about the conflicts that may arrise if I'm already using a different version of jquery, twitter bootstrap, fontawesome, and others (as declared in the Gemfile).
Thank you
You can add the css from the theme you purchased from wrapbootstrap to your assets > application.css.scss file. And use the html tags that came with the theme in your rails app views so that the css styling is applied.
Also, I would recommend using gem 'sass-rails' to import the standard bootstrap styling.
Here's a tutorial to get you started with adding bootstrap to a rails app. Adding the theme css and html tags is up to you.
http://railscasts.com/episodes/328-twitter-bootstrap-basics?view=asciicast
I did this for few of the projects, I agree with majorly what Mike has answered above. Here are some of the gotchas I saw.
We started as a standard project on Rails all our views dynamic(Ember)/static were based on Bootstrap CSS. When major internal pages were up and functionality demonstrated we focused on landing pages. By this time we had the gems for bootstrap, fontawesome added to our Gemfile.
So one of the thing is to remove these gems "bootstrap", "fontawesome" from Gemfile. Include these as part of your wrapbootstrap dump.
Also as you progress with integration you may realize that a lot of common code is being repeated, its in your best interest to split the page components: headers, footers other things as partial Rails views. It severely saves the editing effort.
Another thing I found extremely useful to keep every thing up while you are still in integration stage, is to split your CSS/JS includes for pages imported from wrap bootstrap and pages you already have. So if you intend to migrate all existing pages into new theme scraping your CSS, then it can be merged in stages, otherwise you can let them co-exist.
You have to add new entries in routes.rb, controller calls to support the pages if you don't have them already. Likes of about, contactus, team etc. etc.
And if you use something like Ember/Backbone then you have to manage the co-existence of single pager app in some pages which may or may not be linked to the Wrapbootstrap pages.
This was all the things I had to take care off when I integrated the wrapbootstrap theme on top of Rails-EmberJS app.
Interesting timing as I just had to do this myself. I'm still fairly new to Rails so this might not be the best solution, but here's how I got it working ...
Note: every theme is different so this may not be a one size fits all approach.
1) My theme was built with Middleman and it was expecting to run stand alone or on a Sinatra instance.
2) In order to get the theme up on Rails, I had to add the compass gem, the sass gem, the sass-rails gem, and the compass-rails gem to work properly. I'm assuming you can install these (if required for your theme).
3) Assuming you have a Rails app ready to roll, go into your assets directory and backup your .js, .css, and all fonts and images. Place your theme asset files in the appropriate place.
4) Now do the same with your view layer. You may have a partials and/or pages folder which you can place in the views directory. You'll want to put application.erb.html and any navigation files in the layouts folder under the views directory. Again, make sure you back up your original files first.
5) If your theme was designed for Sinatra, you may have a Config.rb file. I moved the logic from this file into my config/environment.rb file. I was the least confident with this step. Other Rails devs can chime in if there is a better location.
6) Start your server up. You may encounter some exceptions but this is to be expected.
7) Take a look at your old app/assets/javascripts/application.js file and compare it to the new file. Ensure that the new file has the jquery ujs library included //= require jquery_ujs . Without this bit of magic your PUT and DELETE HTTP verbs won't work properly.
8) Path adjustments. My theme had the Font Awesome library included. In order to get it to work, I had to adjust the reference paths at the top of the font-awesome.scss file.
9) Finally, you'll need to debug the newly added code in the environment.rb file. The Sinatra developer was doing a lot of Route magic to adjust the navigation display. This wasn't porting over well to my environment. I removed many of these calls from my navigation template files. Once complete, my newly skinned app was up and running! Good luck.
make sure that while installing twitter bootstrap you should add following gem into your Gemfile under "group :assets"
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
then run bundle command.
Now, the theme "file_name.css" (file_name could be any) that u have downloaded just add it into "stylesheets" folder under app->assests->stylesheets
then open your application.css file in same folder there you will see
*= require_tree.
replace this line with
*= require "file_name.css"
NOTE: Don't forget to re-compile your assets or simply delete the content of your tmp/cache folder.
save it and reboot your server. it will apply youe new theme.
Watch this training course which guide you to do so in detail and from scratch.
http://pluralsight.com/training/courses/TableOfContents?courseName=getting-started-aspdotnet-mvcservice-stack-bootstrap