【CSS】 Bootstrapで両サイドを固定して広告を表示させる方法

  <div class="row">
    <!-- 左サイドの広告 -->
    <div class="col-lg-2 col-md-3 d-none d-md-block">
      <div class="ad-left">
        <!-- ここに左側の広告コードを追加 -->
      </div>
    </div>

    <!-- メインコンテンツ -->
    <div class="col-lg-8 col-md-6">
      <div class="main-content">
        <!-- ここにWebサイトのメインコンテンツを追加 -->
      </div>
    </div>

    <!-- 右サイドの広告 -->
    <div class="col-lg-2 col-md-3 d-none d-md-block">
      <div class="ad-right">
        <!-- ここに右側の広告コードを追加 -->
      </div>
    </div>
  </div>
</div>

<style>
  .ad-left, .ad-right {
    position: fixed; /* 広告を固定する */
    padding-top: 10px;
    padding-bottom: 10px;
    top: 50%; /* 画面の縦方向の真ん中に広告を配置 */
    transform: translateY(-50%); /* 広告自体の縦方向の真ん中を基準にする */
  }

  .ad-left {
    left: 0; /* 画面の左側に広告を配置 */
  }

  .ad-right {
    right: 0; /* 画面の右側に広告を配置 */
  }

  .main-content {
    padding: 20px;
  }
</style>