Bootstrap 4 Card Images – SpringBoot RestAPIs

In the tutorial, JavaSampleApproach will guide you how to use new feature Bootstrap 4 Card Images to create cards with images from SpringBoot RestAPIs.

Related posts:
Bootstrap Image with SpringBoot RestAPI

I. Technologies

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

II. Goal – Bootstrap 4 Card Images

In the tutorial, we create a SpringBoot project as below structure:

bootstrap 4 card image - springboot restapi - project structure

-> results:

bootstrap 4 card image - springboot restapi - results

To achieve above result, We use a new feature Card Images of Bootstrap 4:

  • .card-img-top is used to place an image at top inside the card
  • .card-img-bottom is used to place an image at bottom inside the card
  • .card-img-overlay is used to turn an image into a card background and add text on top of the image

Details implementation:

– Setup Bootstrap 4:

– Card image on top:

– Card image at bottom:

– Card image overlay:

III. Practice

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

1. Create SpringBoot project

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

2. Create Web Controller

3. Create RestAPI

4. Create index.html

IV. Sourcecode


By grokonez | November 27, 2017.

Last updated on May 14, 2018.

Related Posts

Got Something To Say:

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