デファクトスタンダードなCSSフレームワーク。 2021年5月5日に現在のBootstrap5がリリースされました:タグ「css」での検索

BootstrapのCSSスタイルを<div>タグの中にだけ適用する

● 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>
添付ファイル1
No.1178
09/05 13:52

edit

添付ファイル

css
sass