Scribd
Upload
59 views

06 Thymeleaf Bootstrap Css

The document discusses how to make a webpage more beautiful using Thymeleaf and Bootstrap. It describes a 3 step process: 1) Get links for remote Bootstrap files from their website, 2) Add the links to the Thymeleaf template, 3) Apply Bootstrap CSS styles to webpage elements like tables and headings. This allows templates created with Thymeleaf to take advantage of Bootstrap's pre-built, mobile responsive CSS styles.

Uploaded by

Misael Pereira
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
59 views

06 Thymeleaf Bootstrap Css

The document discusses how to make a webpage more beautiful using Thymeleaf and Bootstrap. It describes a 3 step process: 1) Get links for remote Bootstrap files from their website, 2) Add the links to the Thymeleaf template, 3) Apply Bootstrap CSS styles to webpage elements like tables and headings. This allows templates created with Thymeleaf to take advantage of Bootstrap's pre-built, mobile responsive CSS styles.

Uploaded by

Misael Pereira
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

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

You might also like