BootstrapのCSSスタイルを<div>タグの中にだけ適用したい

Bootstrapを部分的に適用したい

Bootstrapを部分的に適用したいと考えています。
ご教授いただければ幸いです。
どうぞよろしくお願いいたします。
(SCSSのスキルがありません)

前提

こちらを参考にしてみましたが、うまくいきませんでした。
https://www.fullmarks.co.jp/wp-content/uploads/2021/01/6faa020ce4d2b562cb16074009711ad1-20210128161434.pdf

● BootstrapのCSSスタイルを<div>タグの中にだけ適用する方法(手っ取り早くする場合)
https://pgmemo.tokyo/data/archives/1178.html

発生している問題・エラーメッセージ

<div class="bootstrap">~</div>にスタイルが適用されません。

該当のソースコード(html)

<!DOCTYPE html> <html lang="ja-jp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="/assets/css/bootstrap.css"> </head> <div class="normal"> <h1>特定のdiv要素の中だけBootstrapを適用しようとした</h1> <p>ここはふつうのHTML</p> </div> <hr /> <!-- ここだけ Bootstrap --> <div class="bootstrap"> <div class="container-fluid"> <div class="col-sm-6"> <p> Partial bootstrap </p> <a href="#" class="btn btn-success">ここだけ Bootstrap</a> </div> <div class="col-sm-6"> <p> グリッド </p> </div> </div> </div> </body> </html>

該当のソースコード(css)

https://pgmemo.tokyo/data/filedir/1178_1.css?975 をダウンロードし、 bootstrap.cssとリネーム。 内容の記述は変更なしでそのまま利用。

試したこと

index.html に
head内で<link rel="stylesheet" href="/assets/css/bootstrap.css">を読み込み、

で囲んだところにだけ Bootstrapのcssが適用されるようにしてみましたがうまくいきませんでした。

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

ここにより詳細な情報を記載してください。

コメントを投稿

0 コメント