こんばんは！
BootStrapだとなんだかBootStrap感が出てしまう(?)と悩んでいる方、もしよかったらこちらの記事を参考にしていただけると幸いです。
最近ECサイトを作っていて、その際にBootStrapとCSSを多用してレイアウトやデザインを修正しているので、個人的に今後も使えるなと思ったデザインの実装方法をお伝えしようと思います！
Railsを使っていますが、紹介ではRails以外で使える書き方にしています。

環境

AWS Cloud9
Ruby on Rails 6系
Bootstrap Ver.4（実装方法はこちら）
CSS
Font Awesome導入済み

ホバー時に色が変わるボタン

完成後はこちら。ホバー時に背景色と文字色が反転します！BootStrapを使うので、難しいCSSの記述はありません。ちなみにアイコンはFont Awesomeを使用していますが、これは導入後コピペですぐできるものなので、実装は割愛します。
通常時

ホバー時

使用するBootStrapのクラス

aタグやlink_toなどのページ遷移のタグなどにこのクラスを追加してください。
class="btn btn-outline-light rounded-pill"
btn-outlineで背景が透過され、文字と外枠のみのボタンができます。ホバー時には色が反転します。rounded-pillでBootStrapでありがちな形から脱却し、角が丸みを帯びたお洒落なボタンができます。

CSSの指定

今回の実装の場合、background-colorが重要です。通常時は白い文字と枠線がはっきり見えるようなbackground-colorが好ましいです。(一応文字と枠線は白以外にもできますが、BootStrapにありがちな色になってしまいます。アウトラインボタンと調べると公式で出てきます。カスタマイズすればいけるかもしれませんが、今回はやりません。)

ボタンの親要素など{
  background-color: #5a4d43;
  font-family: 'Sawarabi Mincho', sans-serif;
}
.btn{
  margin-right: 5px;
}

ボタンの背景部分にあたる色の指定をしてください。今回はお手本の色で指定しました。
また、ボタンをいくつか横並びに配置している場合は、間隔をあけるためにmargin-rightを使用してください。ボタン1つの場合はお好きな場所に配置を指定してください。一応フォントも載せておきます。

文字の下に下線をひく

完成後はこちら。Item Listの文字の下にある下線の実装方法です。これに関してはCSSのみでできます。ただ、線の長さは要素の長さになるため、BootStrapでcol-md-数字などで区切っておくか、要素にwidthを指定しておくとよいです。今回は前者で長さが指定されています。

css

下線を付けたい文字のクラス・タグなど{
  padding-bottom: 5px;
  border-bottom: solid 4px #cdbca4;
}

padding-bottomを指定して、文字の真下ではなく少し間隔をあけた場所に線がくるようにしています。border-bottomで左からsolidで実線、線の太さ、線の色を指定しています。

BootStrap

一応ですが、下線を引いている文字を囲っているタグにclass="text-center"という要素の中での中央寄せになるようなクラス指定をしています。ですが、別に左寄せでも問題ないので好みに任せます。

カードで画像付き一覧を作る

実装例です。なるべく無駄なものは省いてシンプルにしてみました。

<div class="card-deck"> 　
  <div class="card shadow-sm text-center" style="min-width: 230px; max-width: 250px;">
    <div class="card-img-top" >
      <img src="", style: 'width: 100%; height: 180px' %>
    </div>
    <h5 class="card-title pt-2">
       カードのタイトル
    </h5>
    <div class="card-text">
       カードの文章
    </div>
  </div>
</div>

各クラス指定の説明
card-deck　要素の中でカードを横並びにする
card カードにしたい部分を囲むとカードとして認識する
shadow-sm カードに影をつける
card-img-top カードの上の部分にくるイメージ。imgタグなどで画像を指定してください。
card-title カードのタイトル部分を指定
card-text　カードのテキスト部分を指定

何個もカードを並べたい場合はコピペして作るか、railsのerbファイルであればeach文を使って繰り返し表示してください。画像、カードのタイトル、文章は自由に変更してください。

【初心者必見】簡単！BootStrapとCSSで垢抜けたサイトを作る方法！

環境