はじめに

bootstrapがclass="bootstrap-scope"の内部にだけ適用されるようにするため、
postcss-prefixwrapを使って、全てのセレクタの前に.bootstrap-scopeを追加することで適用範囲を限定します

<div class="bootstrap-scope">
  <!-- Bootstrapのスタイルが適用される領域 -->
  <button class="btn btn-primary">Bootstrap Button</button>
</div>

既存環境にBootstrapを適用すると全体のレイアウトが変わってしまうような場合に、範囲を限定して適用することができます

1. 必要なライブラリをインストール

$ npm init -y
$ npm install bootstrap postcss postcss-cli postcss-prefixwrap

2. PostCSS設定ファイルを作成

bootstrapの全てのセレクタの前に.bootstrap-scopeを追加する設定を行う

postcss.config.js

const prefixWrap = require('postcss-prefixwrap');

module.exports = {
  plugins: [
    prefixWrap('.bootstrap-scope')
  ]
};

3. PostCSSで処理

$ npx postcss node_modules/bootstrap/dist/css/bootstrap.min.css -o scoped-bootstrap.css

4. 動作確認

動作確認用htmlを作成します

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="scoped-bootstrap.css">
  <title>範囲限定Bootstrapテスト</title>
</head>
<body>
  <div class="bootstrap-scope">
    <!-- bootstrap適用領域 -->
    <button class="btn btn-primary">Bootstrap Button</button>
  </div>
  <!-- bootstrap適用範囲外 -->
  <button class="btn btn-primary">Default Button</button>
</body>
</html>

動作確認のため簡易webサーバーを起動します

$ npx http-server .

<div class="bootstrap-scope">配下のみBootstrapが適用されることが確認できました