Before getting too far along with Spring MVC and Thymeleaf in my GitHub NixMash Spring app I wanted to make sure the foundation was set for pretty pages. I happen to like the United Bootswatch theme for development sites. It’s the Bootstrap theme I used at NixMashupLinks.com. The front end of that site is Wicket, so adding Bootswatch in Thymeleaf and Spring using Webjars was a bit different.
Here’s the NixMash Spring Home Page at the moment with the Bootswatch United Theme loaded from a Webjar.
Add the Webjar Dependencies
First I grabbed the Bootswatch Webjar from Maven Central, along with the Bootstrap and jQuery Webjars, and added them as dependencies in Gradle.
Adding the Webjar Static Resource Path
The only coding we have to do in Spring is add the Webjar static resource in our Spring Configuration. We don’t have to physically place Webjars in our classpath or store them in special location, as Spring will find them.
Referencing Webjar Resources in Thymeleaf
Here is a Thymeleaf fragment that loads the Bootstrap and jQuery JS scripts. Notice the path for the Bootstrap JS script is /webjars/bootstrap/[version]/JS/bootstrap.min.js. Don’t forget the “js” subdirectory. We’ll talk more about paths in a moment when we link to the Bootswatch CSS.
Linking to Your Bootswatch CSS Stylesheet
Linking to the Bootswatch stylesheet is probably why you’re here so I’ll get to it. As you know I like United, so here’s my path to the United Bootstrap CSS Stylesheet. Same principle as when we loaded the Bootstrap and jQuery Webjars. Here the key path elements for Bootswatch are /united/bootstrap.min.css. (And yes, “3.3.4+1” was the Bootswatch Webjar version number.)
Cracking Open the Webjar
Whenever you don’t know what path to use for certain webjar resources you can always crack open the Jar, located in the web app’s War file, /WEB-INF/lib directory. We now can see what resources are available to us in the Webjar and how to write the static path as shown below in the Nautilus Explorer “Location” field.