Bootstrap Image with SpringBoot RestAPI

In the tutorial, JavaSampleApproach will introduce BootStrap Image with SpringBoot RestAPI.

Related posts:
JQuery loads Image from SpringBoot RestAPI
Bootstrap Carousel with SpringBoot RestAPI
Bootstrap Image + MongoDB GridFsTemplate + SpringBoot RestAPI
Bootstrap 4 Card Images – SpringBoot RestAPIs

I. Technologies

– Java 1.8
– Maven 3.6.1
– Spring Tool Suite – Version 3.9.0.RELEASE
– JQuery
– Bootstrap
– Spring Boot – 1.5.7.RELEASE

II. Goal

We create a SpringBoot project as below:

Bootstrap Image - SpringBoot RestApi - project structure

-> result:

Bootstrap Image - SpringBoot RestApi - full demo

Bootstrap provides useful classes to style with images.
.img-rounded class:

Bootstrap Image - SpringBoot RestApi - rounded corners

.img-circle class:

Bootstrap Image - SpringBoot RestApi

.img-thumbnail class:

Bootstrap Image - SpringBoot RestApi - thumbnails

– With Bootstrap .img-responsive class, images will be automatically responsive with every screen sizes. .img-responsive class applies : block, max-width: 100% and height: auto to the image display.
– We can use Bootstrap’s grid system and .thumbnail class to create Image Gallery:

Bootstrap Image - SpringBoot RestApi - image gallary

III. Practice

Step to do:
– Create SpringBoot project
– Create Web Controller
– Create RestAPI
– Create index.html
– Create Jquery to manipulate image

1. Create SpringBoot project

Using Spring Tool Suite to create a Spring Starter Project with needed dependencies:



2. Create Web Controller
package com.javasampleapproach.restapiimage.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
public class WebController {
    public String homepage(){
        return "index";
3. Create RestAPI
package com.javasampleapproach.bootstrapimage.controller;


import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

public class RestWebController {
    @GetMapping(value = "/api/image")
    public ResponseEntity getImage() throws IOException {

        ClassPathResource imgFile = new ClassPathResource("image/jsa_about_img.jpg");

        return ResponseEntity
                .body(new InputStreamResource(imgFile.getInputStream()));
4. Create index.html


	  JQuery Load Image from SpringBoot RestAPI


1. Bootstrap Image - SpringBoot ResAPI

2. Bootstrap Image Gallery

5. Create Jquery to manipulate image
$( document ).ready(function() {
	$("#roundedCornersBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-rounded img-responsive');
	$("#circleBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-circle img-responsive');
	$("#thumbnailBtn").on( "click", function() {
		  $("#jsaAboutImageId").removeClass().addClass('img-thumbnail img-responsive');

IV. Sourcecode


By grokonez | November 19, 2017.

Related Posts

Got Something To Say:

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