Kotlin SpringBoot RestAPI – Bootstrap 4 Image – Jquery

In the tutorial, JavaSampleApproach will show how to show images on web-view from Kotlin SpringBoot RestAPI with Bootstrap 4 Image and Jquery.

I. Technologies

– Java 1.9
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– JQuery
– Bootstrap 4
– Kotlin 1.1.61
– Spring Boot – 1.5.9.RELEASE

II. Goal

We create a SpringBoot project as below structure:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - project structure

We create a Kotlin RestAPI:

We use Bootstrap 4 Image to style data on web-view, with results:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - results

Bootstrap 4 Image provides useful classes to style with images:
.rounded class adds rounded corners to an image

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - rounded shape

.rounded-circle shapes the image to a circle

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - circle shape

.img-thumbnail shapes the image to a thumbnail (bordered)

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - thumnail shape

We can use Bootstrap’s grid system and .thumbnail class to create Image Gallery:

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - image gallary

Bootstrap 4 Aligning Images with 2 classes: {.float-right, .float-left}

Kotlin SpringBoot - Bootstrap 4 Image - Jquery - Aligning Images

Bootstrap 4 Responsive Images with .img-fluid class that applies max-width: 100% and height: auto.

III. Practice

Step to do:
– Create Kotlin SpringBoot project
– Create index controller
– Implement Kotlin RestAPI
– Create index.html view
– Create JQuery script

1. Create Kotlin SpringBoot project

Use SpringToolSuite to create a Kotlin SpringBoot project with dependencies:

2. Create Index controller

3. Implement Kotlin RestAPI

4. Create index.html view

5. Create JQuery script

IV. Sourcecode

KotlinSpringBootstrap4Image

By JavaSampleApproach | December 9, 2017.


Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*