BlazorにBootstrapを導入する方法｜ASP.NET×Blazor入門 10.1

10.1 Bootstrapの導入

BlazorアプリケーションのUIを手軽に整えるには、CSSフレームワークの導入が効果的です。 中でも Bootstrap は、世界中で使われているスタイリングの定番であり、Blazorとの相性も抜群です。

Blazorでは、基本的に wwwroot/index.html（WASMの場合）または Pages/_Layout.cshtml（Serverの場合）に CSSやJavaScriptのライブラリを読み込む形でBootstrapを導入します。

Bootstrap CDNの読み込み

以下のようにCDNから読み込むのがもっとも簡単です：


  <!-- Blazor WebAssembly の場合 (wwwroot/index.html) -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

Server-side Blazorの場合は、_Layout.cshtml に同様に追加します。

Bootstrapクラスの活用

CSSクラスを使うことで、フォームやボタンのスタイルが整います。以下はBootstrapを使った簡単なボタンとアラートの例です：


  <button class="btn btn-primary">クリック</button>
  <div class="alert alert-success" role="alert">
    操作が成功しました！
  </div>

注意点とカスタマイズ

  • BootstrapのグリッドやフォームスタイルをBlazorコンポーネント内で使う場合も、通常のHTMLと同様にクラスを指定するだけでOKです。
  • カスタムCSSを加えたい場合は、自作の site.css を wwwroot に追加し、CDNの後に読み込ませましょう。

Bootstrapはデザインの即戦力ですが、より洗練されたコンポーネントが必要な場合は、次節で紹介する MudBlazor のようなBlazor専用ライブラリの導入も検討できます。

次は 10.2 MudBlazorの導入と使用例 へと進みましょう。

2025-05-13
Blazor
Bootstrap
CSS
UIフレームワーク
Webデザイン
コンポーネント
Blazor入門

下田 昌平

開発に関するインプットをアウトプットしています。

Categories

Tags

Search Logs