How to Modify Default Appearance using Bootstrap 4 Gem in a Rails 5 App

Question

I am using Bootstrap 4 in a Rails 5 app. I'm new to web development and am trying to experiment with overriding the default visual attributes, first background color and background image.

I know there are several similar questions on StackOverflow, etc., but I have looked at them and not found a solution to my particular problem.

From what I've read, Bootstrap has a defaults file that can be edited, but because I'm using the Ruby bootstrap gem that contains the Bootstrap code, and that gem could be updated at any time, it would not be a good idea to modify that file directly.

Can anyone suggest how I might accomplish this? The source code is at https://github.com/keithrbennett/our_airports . If you answer, please assume I know little about CSS, Rails, etc.

Answer 1

I guess I can help you with that. So, there's no need to override default bootstrap code. This won't be feasible. Let's take a more generalized path.

For each layout file there's a similar name file which generated in assets for stylesheets and javascripts. In your case, you're using application.html.erb as a layout file. So, rails generated 2 files application.css (which you later renamed to .scss to make it compatible with bootstrap gem) and application.js .

Hence, you might write different css files or js files for your custom designs. To use those css files you must tell the layout file to use which css files or js files.

you can do tell the layout by mentioning them in your layout's css and js files.

Here's the process you can follow:

Step 1: create a file as style.css in app/assets/stylesheets

Step 2: import this file in application.scss after @import 'bootstrap'

@import 'style'

Step 3: Let's pick this file: app/views/airports/index.html.erb

Here you have defined

<th style="width:8em;"><%= sort_link "iata_code" %></th>

paste this code in your style.css

.iata-code{
  color: #999;
  width: 8em;
}

now modify your code to this:

<th class="iata-code"><%= sort_link "iata_code" %></th>

refresh the page and see if you can see any change.

for Background image or color add this code in style.css

#for image
body { 
  background-image: image-url('pictureTitle.png'); 
}

#for color
body { 
  background: #eee; 
}

you can see different ways of adding background here.