Thymeleaf and Bootstrap
Let’s Make our Page Beautiful
www.luv2code.com
Let’s Make our Page Beautiful
Before
www.luv2code.com
Let’s Make our Page Beautiful
Before After
www.luv2code.com
Let’s Make our Page Beautiful
Before After
Bootstrap
www.luv2code.com
Development Process Step-
B y -S
tep
www.luv2code.com
Development Process Step-
B y -S
tep
1. Get links for remote Bootstrap files
www.luv2code.com
Development Process Step-
B y -S
tep
1. Get links for remote Bootstrap files
2. Add links in Thymeleaf template
www.luv2code.com
Development Process Step-
B y -S
tep
1. Get links for remote Bootstrap files
2. Add links in Thymeleaf template
3. Apply Bootstrap CSS styles
www.luv2code.com
Step 1: Get links for remote Bootstrap files
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
• Website has instructions on how to Get Started
www.luv2code.com
Step 1: Get links for remote Bootstrap files
• Visit Bootstrap website: www.getbootstrap.com
• Website has instructions on how to Get Started
www.luv2code.com
Step 2: Add links in Thymeleaf template
www.luv2code.com
Step 2: Add links in Thymeleaf template
<head>
…
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/x.y.z/css/bootstrap.min.css" …>
…
</head>
www.luv2code.com
Step 2: Add links in Thymeleaf template
<head>
…
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/x.y.z/css/bootstrap.min.css" …>
…
</head>
Version number
www.luv2code.com
Step 3: Apply CSS
www.luv2code.com
Step 3: Apply CSS
<body>
<div class="container">
<h3>Employee Directory</h3>
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3>
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3> Bootstrap CSS styles
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
Step 3: Apply CSS
Bootstrap CSS style
<body>
<div class="container">
<h3>Employee Directory</h3> Bootstrap CSS styles
<hr>
<table class="table table-bordered table-striped">
<thead class="thead-dark">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
… …
</table>
</div>
</body>
www.luv2code.com
