bootostrapを導入するとCSSで指定したfont-sizeなどの情報が失われる

前提・実現したいこと

HTML,CSSであるホームページを真似して作った．
bootstrapのグリッドシステムを使ってレスポンシブ化しようとしたがbootstrap導入後，CSSが適応されなくなった．

当方，HTML,CSSは3ヶ月ほど学習しておりますがbootstrapに関しては初心者です．

実際に存在しているホムペをパクってコードを書いているので，著作権的にbody内は見せられません．ごめんないさい！！

該当のソースコード

HTML
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="uft-8">
5        <!-- viewport meta -->
6        <meta name="viewport" content="width=device-width, initial-scale=1.0">
7        <!--title-->
8        <title>○○○</title>
9        <!-- CSS -->
10        <link rel="stylesheet" href="stylesheet.css">
11        <!-- FontAwesome -->
12        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
13        <!-- jQuery -->
14        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
15        <!--bootstrap-->
16<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
17    </head>
18    <body>
19    ......
20    <script src="script.js"></script>
21        <!-- jQuery、Popper.js、Bootstrap JS -->
22        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
23        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
24        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
25    </body>
26</html>
27

試したこと

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

index.html/stylesheet.css/script.js　（こいつらでまずホームページの枠組みを作成しました）

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

回答2件

ベストアンサー

解決済みになっていますが…。

コードは基本的に後から書いたものが優先されます。

HTML
1        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
2        <link rel="stylesheet" href="stylesheet.css">

の順にして表示に変更があるか確認してみてください。

投稿2019/03/27 07:20

dit.

総合スコア3235

atusibba1014

2019/03/27 07:36

コメントありがとうございます．上記の順にした所，ところどころフレームの改善が見られました．しかし全部が元通りではありませんでしたクロームのデベロッパーツールで見てみたところreboot.scssによって自分がかいたstylesheet.cssが書き換えられている感じがします． bootstrapの導入理由としましてはグリッドシステム導入によりレスポンシブ化の簡略を狙っております．この機能だけを付与することなどはできますでしょうか

atusibba1014

2019/03/27 07:44

、、、  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 、、、こいつを追加するかしないかでフレームが変わります。

dit.

2019/03/27 07:49

bootstrap内で!importantがあるとそちらが優先されるとは思いますが、他の方もご指摘の通り実際のコードがないと何とも言えません（提示できない事情は分かっていますが）レイアウト関係以外の所でbootstrapで使われているのと同じクラスを使わないようにする…程度の対処しか私には考え付かなかったです（bootstrapに苦手意識を持っているので）

atusibba1014

2019/03/28 02:16

ご回答ありがとうございます．同じクラスを使わない方向で考えてみたいと思います．おかげでモヤモヤしていた部分がスッキリしました．今回はありがとうございます

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