Ruby on rails6でBootstrapをカスタマイズする方法

前提・実現したいこと

現在ショッピングシステムを作成していて、システム自体は完成したのですが、最後のレイアウトの部分で躓いています。

発生している問題・エラーメッセージ

この形にまでもっていったのですが、Note#index,Home,チェックボックス,Delete,2,Next,Last,*Shopping#categoryで商品を追加する
の部分が水色になっていると思うのですが、この色を変更する方法を教えていただきたいです。
参考書をベースにシステムを構築しているのですが参考書はCDNでBootstrapを使用しているのですが、これをgemを使用してインストールする必要があるのかなと思っています。
私が使用しているrailsのバージョンは6.0.3.5を使用しているのですが、このバージョンでBootstrapをインストールして該当する部分をカスタマイズする方法をご教授いただきたいです。

該当のソースコード

ruby
1#Gemfile
2source 'https://rubygems.org'
3git_source(:github) { |repo| "https://github.com/#{repo}.git" }
4
5ruby '2.7.2'
6
7# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
8gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
9# Use sqlite3 as the database for Active Record
10gem 'sqlite3', '~> 1.4'
11# Use Puma as the app server
12gem 'puma', '~> 4.1'
13# Use SCSS for stylesheets
14gem 'sass-rails', '>= 6'
15# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
16gem 'webpacker', '~> 4.0'
17# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
18gem 'turbolinks', '~> 5'
19# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
20gem 'jbuilder', '~> 2.7'
21# Use Redis adapter to run Action Cable in production
22# gem 'redis', '~> 4.0'
23# Use Active Model has_secure_password
24# gem 'bcrypt', '~> 3.1.7'
25
26# Use Active Storage variant
27# gem 'image_processing', '~> 1.2'
28
29# Reduces boot times through caching; required in config/boot.rb
30gem 'bootsnap', '>= 1.4.2', require: false
31
32group :development, :test do
33  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
34  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
35end
36
37group :development do
38  # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
39  gem 'web-console', '>= 3.3.0'
40end
41
42group :test do
43  # Adds support for Capybara system testing and selenium driver
44  gem 'capybara', '>= 2.15'
45  gem 'selenium-webdriver'
46  # Easy installation and use of web drivers to run system tests with browsers
47  gem 'webdrivers'
48end
49
50# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
51gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
52
53gem 'kaminari'
54
55gem 'devise'
56

ruby
1#notes.html.erb
2<!DOCTYPE html>
3<html>
4  <head>
5    <title>shopping#Notes</title>
6    <%= csrf_meta_tags %>
7    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.css">
8      <%= stylesheet_link_tag 'notes', 'data-turbolinks-track':'reload' %>
9  </head>
10
11  <body class="container">
12      <%= yield %>
13  </body>
14</html>
15

ruby
1#index.html.erb
2<h1 class="display-4 text-primary">Note#index</h1>
3<p>商品<%= @msg %>点、おおよその合計金額は<%= converting_to_jpy(@msg2) %>です。</p>
4<p><a href="/hello/login_check/">Home</a>&gt;Note#index</p>
5<table class="table">
6    <tr>
7      <th>Id</th><th >product</th><th>number</th><th>price</th><th colspan="2"></th>
8    </tr>
9    <% @data.each.with_index(@start) do |obj,id| %>
10    <tr>
11      <td><%= id %></td>
12      <td><%= obj.product %></td>
13      <td><%= obj.number %></td>
14      <td><%= obj.price %>円</td>
15      <td><%= check_box_tag "notelist","product" %></td>
16      <td><a href="javascript:delData(<%= obj.id %>);">Delete</a></td>
17    </tr>
18    <% end %>
19</table>
20
21<br>
22<div><%= paginate @data %></div>
23<br>
24
25<p><a href="/hello/category/">※Shopping#categoryで商品を追加する</a></p>
26<p><a href="/hello/login_check/">※&lt;&lt Shopping#homeに戻る</a></p>
27<p><a href="javascript:delData2(<% @data %>);">※&lt;&lt;商品を全て削除してShopping#homeに戻る</a></p>
28
29
30
31<script>
32function delData(num){
33    if (confirm('この商品を削除しますか?')){
34        document.location = "/notes/delete/" + num;
35    }
36    return false;
37}
38
39function delData2(num){
40    if (confirm('全ての商品を削除しますか?')){
41        document.location = "/notes/all_delete/";
42    }
43    return false;
44}
45</script>

試したこと

インターネットで調べたが方法が分からなった。

補足情報（FW/ツールのバージョンなど）

windows10 rails6.0.3.5

行動規範の内容に同意します

回答1件

ベストアンサー

まずはその「色」が何（どのクラス）によって振られているか確かめてください。
ブラウザのデベロッパツールで要素検証すれば分かります。

そして、ドキュメントを確認しましょう。
4.5/5.0

Bootstrapの主要な機能であればほとんどこれを確認すれば分かります。
色に関する項目はColor
Bootstrapは主となる色が数種類に決まっており、名前がついています。
文字色ならtext-{color name}でつきます。

もしそれ以外の色が欲しいのであれば、自身でクラスを用意して振るか、All colorsから持ってきます。

投稿2021/03/12 22:42

編集2021/03/12 22:43

m.ts10806

総合スコア80875

m.ts10806

2021/03/12 23:11

というか、一般的には色も含めたデザインが先では。

Angelica.87

2021/03/12 23:26

m.ts10806さん回答ありがとうございます。例えばNote#indexの部分は検証したところ<h1 class="display-4 text-primary">となことは確認出来ました。 Colorを確認したところピンクを使用したいので決まったものを使用出来そうです。最後にドキュメントを確認したのですが、これはCDNでも使用可能ということでよろしいでしょうか？本当初歩的なことを聞いて申し訳ありません。

m.ts10806

2021/03/12 23:28 編集

バージョンがマイナーバージョンまで同じなら内容は同じです。

Angelica.87

2021/03/12 23:33

/bootstrap/4.3.1を使用しています。これはCDNでも色を変更出来るということですか？

m.ts10806

2021/03/12 23:59

その「色を変更する」というのがどういうレベルを欲しているのか分かりません。 CDNは他者ネットワーク上のファイルを直接読み込むのでファイル自体に直接変更はくわえられませんが、CSSは基本あと勝ちなので、自身で同じ名称のclassを用意すれば指定を上書きすることはできます。

m.ts10806

2021/03/13 00:04

もう１つ補足として、ダウンロード版を使っていたとしても、全体の整合性からしても直接編集は避けた方が良く、「変更したいところだけ、自前で定義して適宜上書きする」ほうが良いです。バージョンアップするときに毎回差分取らなきゃいけなくなりますしね。