Use Bootstrap Modal as UI Alert Popup Dialog In Rails

I found a cool new gem to easily let you somewhat customize the alert dialog boxes in your rails app.  I started out using the jQuery UI dialog and attempting to customize it myself, but ran into a bit of complications.  I found the data-confirm-modal gem to be a great solution.

As the documentation says, add the gem to your gemfile and run bundle.  Then don’t forget to add it to your application.js file:

//= require data-confirm-modal

Basically it just makes all alert popup dialogs become Bootstrap modals in your rails app, such as when you delete stuff or anytime you want a confirm dialog.

Props to ifad for a simple and useful gem!

Screen Shot 2014-09-28 at 4.42.19 PM

How to Center Bootstrap Columns

Sometimes you want to center the columns when using Bootstrap.  I was using only like 3 columns of varying sizes, but I wanted to get them centered. So here’s how I did it, with all credit going to minimit and this article.

Add the .row-centered class to your rows and the .col-centered class to the columns in your html.

And here’s the css for those classes:

/* centered columns styles */
.row-centered {
.col-centered {
    /* reset the text-align */
    /* inline-block space fix */

Form Horizontal with Bootstrap 3 and Simple Form 2 on Rails 4

I don’t know why this was so difficult, but I had lots of trouble getting the `form-horizontal` class to work in my rails app was quite a chore when I upgraded to bootstrap 3.  After lots of searching and hours of agony, this finally worked for me.  Credit goes to this blog post.

After you have bootstrap 3 (I use the bootstrap-sass gem) and simple_form 2, run the simple_form generator:

rails generate simple_form:install --bootstrap

So the way I understand it, this hack basically overrides the div classes in simple_form to match them up with bootstrap. So first edit the config/initializers/simple_form.rb

config.label_class = 'col-lg-2 control-label'
config.form_class = "simple_form form-horizontal"

In the config/initializers/simple_form_bootstrap.rb replace the classes “control-group” with “form-group” and replace “control” with “col-lg-10”

Now create a new initializer file, for example config/initializers/remove-this-sf_bs3_inputs.rb

inputs = %w[

inputs.each do |input_type|
superclass = “SimpleForm::Inputs::#{input_type}”.constantize

new_class = do
def input_html_classes

Object.const_set(input_type, new_class)

Hopefully there will be some official support in the near future that won’t require this workaround. Let me know if you know of an easier way to get form-horizontal to work.

Here’s the Stack Overflow question that I asked regarding this problem.

Making text and its parent item with different opacity using bootstrap

I’m using the ‘well’ class from bootstrap.  Since in this case I have a background image behind the well, I wanted to make it somewhat transparent.  But the text in the well becomes really hard to see:

Screen Shot 2014-02-14 at 5.46.50 AM

So I wanted to keep the text and buttons inside the well with opacity at 1.0.  How can I do this? Well first, instead of using the opacity value in the css file, us the background-color with its rgba values (a meaning the alpha value, or transparency), like this:

.well {
background-color: rgba(39, 174, 96, 0.6);

Then, I put everything inside the well in another class. I called it field

.field {
opacity: 1.0;

And now the well stays transparent, but everything else inside is not transparent.

Screen Shot 2014-02-14 at 5.54.37 AM

Also, if your changes to the css don’t seem to be showing up in your rails app, don’t forget to precompile your assets:

rake assets:precompile


rake assets:precompile RAILS_ENV=production for heroku or your production environment.

Some credit goes to this site.

Add a background image to a Ruby on Rails app using Bootstrap CSS

Seems like something very simple to do, and it is.  Although it took me half an hour of searching Stack Overflow and playing with the code to get it to work.  Several sites showed what code to write, but very few showed where to put the code.  Here’s what I did, using Rails 4 and Bootstrap 3.

UPDATE: Thanks to Rene Paulokat and Roberto Trevisan for their help and comments, I’ve improved several things here.

Go to /stylesheets/scaffolds.css.scss 

in the body block, add this code for the image

background: url('/assets/fire_breathing.jpg');
background-image: image-url('fire_breathing2.jpeg');
background-repeat: no-repeat;
background-size: 100%;

Then put the image you want to be your background into "app/assets/images/backgroundimage.jpeg" in whatever format you want.

Edit: Two things to note here. 1) As per Roberto’s comments, I used the tag “image-url” instead of just “url”.  I believe this now allows the image to be loaded in the rails asset pipeline.  2) you don’t need the ‘/assets/’ in front of the image path.  Rails and the asset pipeline will automatically check in the ‘app/assets/images’ folder, so you don’t need any leading path, unless you make a folder within that folder.

The background-size line makes the image fit exactly to its parent attribute, which in this case is the body of the html document.

Note that for production, for example if deployed on heroku, you will need to change the location of the image to the /public folder because thats where it will look for images in production.  Put your image in that folder, than update the image url to:

background: url('/fire_breathing.jpg');

Edit: The above turns out was incorrect.  Per Roberto’s comments, the development and production code should usually be identical. By making the edit above using the “image-url” tag, the app will look in the ‘app/assets/images’ folder, so we don’t need anything in the public folder.  However, I still needed to run:

RAILS_ENV=production bundle exec rake assets:precompile

to precompile the assets in production.

Also note, simply having the slash “/” in front of the image file name can make this not work.

Hope this is helpful to you!

Screen Shot 2014-01-24 at 5.55.05 AM

Fixing Bootstrap Navbar Covering Content

If you use Twitter Bootstrap for your rails app, you may have come across the issue where the navbar covers part of the content of your page.

Screen Shot 2013-12-21 at 10.37.41 AM


There is an easy fix.  Add some padding to your the body in CSS.


Screen Shot 2013-12-21 at 10.39.07 AM

Overriding Bootstrap and Bootstrap Sass in Rails

So many of you who use rails know that bootstrap is an extremely popular CSS and Javascript add-on used by many rails developers.  I use the Bootstrap-Sass gem by Thomas McDonald.

Today I wanted to override the bootstrap css in my app to make the ‘container’ class 100% width with no margin.  I want to save you some time that I spent searching around.

I found these two posts on the ever useful Stack Overflow, but since I used a gem instead of the ‘require’ to add bootstrap to my app, this didn’t work for me.  So here is what worked.  

Basically you just need to make sure that whatever custom css or overriding css you are using is loaded after bootstrap.  So I simply moved my custom “.container” class after the “@import bootstrap” lines in my styles.css.scss file:

Screen Shot 2013-12-14 at 7.00.16 PM

I guess it might not be the most efficient way to load one css file then load a second to override it, but I don’t know how to do it any other way…..yet 🙂

Let me know if this helped you!