bootstrapの条件が反映されてしまいます。

Question

bootstrapのグリッドを使ってサイトを作ってます。
検証モードで見ると、h4のサイズが15remと勝手に指定されてしまっています。
style.cssで
.クラス名 h4{
font-size:32px;
}
などとしても大きさが変わりません。
bootstrapを使ったら大きさなどの上書きは出来ないのでしょうか？
ちなみにcssのリセットはしております。
よろしくお願いします。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  font-family: 'Roboto', sans-serif;
}

Answer 1

cssは同じ優先度なら後から書かれたものが有効になりますのでbootstrapの後から上書きするCSSを読み込んでください。

Comments

[takawork]

head内の話ですよね？head内はこんな感じになっていて、bootstrapの後に読み込みするようにしてます。
```
<!-- Vendor -->
<!-- jQuery -->
<script type="text/javascript" src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!-- ブートストラップjs -->
<script type="text/javascript" src="vendor/bootstrap/bootstrap.min.js"></script>
<!-- ブートストラップcss -->
<link rel="stylesheet" href="vendor/bootstrap/bootstrap.min.css" />
<!-- フォントオウサム -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<!-- Vendor -->

<!--Main Menu File-->
<link id="effect" rel="stylesheet" type="text/css" media="all" href="webslidemenu/dropdown-effects/fade-down.css" />
<link rel="stylesheet" type="text/css" media="all" href="webslidemenu/webslidemenu.css" />
<link id="theme" rel="stylesheet" type="text/css" media="all" href="webslidemenu/color-skins/white-gry.css" />

<!-- Include Below JS After Your jQuery.min File -->
<script type="text/javascript" src="webslidemenu/webslidemenu.js"></script>
<!--Main Menu File-->
<link rel="stylesheet" type="text/css" href="./css/style.css">
```

[gogoweb_ikeda]

上のHTMLとCSSの画像が文面と一致していませんがh4タグですよね？
bootstrapのh4は特に設定を変えていないなら
h4, .h4 {font-size: 1.5rem;}
となっており、後から書けば上書きできるはずです。
もう一度検証ツールで確認して、32pxのフォントが打ち消されてbootstrapが有効になっているか確認してみてください。
もしかしたらクラス名が間違えている等であとから追加したクラスが適用されていないのかもしれません。