● BootstrapのCSSスタイルを＜div＞タグの中にだけ適用する

既存の 非bootstrap 環境で作成されたwebサイトに対し、後から Bootstrapの部品を入れたい場合があります。
この時＜head＞タグでbootstrapを読み込んでしまうと＜body＞タグ全体に Bootstrapのcssスタイルが適用され 、
グローバルナビゲーションなどのレイアウトが崩れる可能性があります。

そこで任意のクラス内だけbootstrapのcssstyleを適用できれば既存のナビゲーションが崩れることはありません

こちらにとても簡単な方法で クラス内だけ Bootstrap を適用する方法を採用されている方がいます
特定のdiv要素の中だけBootstrapを適用する - Qiita

考え方としてはとてもシンプルで scss で任意のクラスを作成してその中に bootstrap.css を全部取り込んでしまうというやり方です。
（賢いですね。やり方はこちら ↓ ）

● BootstrapのCSSスタイルを＜div＞タグの中にだけ適用する方法（手っ取り早くする場合）

1. mybootstrap.css をダウンロードする。

https://pgmemo.tokyo/data/filedir/1178_1.css?975

2. mybootstrap.css を htmlから読み込んで適用する

これで bootstrapクラス内だけ Bootstrapのcssが適用されます。

<div class="bootstrap">
・・・・・・・・・・
</div>

● BootstrapのCSSスタイルを＜div＞タグの中にだけ適用する方法（自分でコンパイルする場合）

1. bootstrap.css をダウンロードする。

2. bootstrap.css を bootstrap.scss にリネームする

mv  bootstrap.css  bootstrap.scss

3. mybootstrap.scss を作成する。

下記の内容で mybootstrap.scss を作成します。

.bootstrap {
  @import "bootstrap"
}

4. mybootstrap.scss をコンパイルする。

・scssファイルをコンパイルする「node-sass」 をインストールします。

npm install -g node-sass

・mybootstrap.scss をコンパイルします。

node-sass my_bootstrap.scss my_bootstrap.css 

5. mybootstrap.css を htmlから読み込んで適用する

これで bootstrapクラス内だけ Bootstrapのcssが適用されます。

<div class="bootstrap">
・・・・・・・・・・
</div>