SpringBoot ThymeleafにBootstrapを追加

Spring BootにBootstrapを追加するサンプルです。

確認環境
・Spring Boot 2.3.3
・Bootstrap v4.5.0
・JDK 11.0.2
・STS 4.7.2

サンプル	pom.xmlの設定
	Bootstrapからコードを追加

pom.xmlの設定

pom.xmlのdependenciesの箇所に以下を追記します。

<!-- https://mvnrepository.com/artifact/org.webjars/bootstrap -->
<dependency>
    <groupId>org.webjars</groupId>
    <artifactId>bootstrap</artifactId>
    <version>4.5.2</version>
</dependency>

Bootstrapのライブラリです。

Bootstrapからコードを追加

Bootstrapからコードを追加します。

１．公式のBootstrapのページを表示し、「ドキュメント」をクリックします。
https://getbootstrap.jp/

２．例としてBadgeを使用します。
Components→Badgeをクリックし、表示されたコードをコピーします。

３．上記でコピーしたコードをビューに貼り付けます。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.5.2/css/bootstrap.min.css}">
<title>check</title>
</head>
<body >
<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>
</body>
</html>

9～16行目がコピペしたコードです。
5行目は、BootstrapのCSSへのリンクの設定です。

４．ブラウザで画面を表示すると、デザインされたBadgeが表示されます。

Bootstrapのページには、様々なデザインされたものがあります。
Javascriptが必要なものもあります。その場合はベージに記載があります。
また有料のデザインもあります。