Bootstrap 4 Card Images – NodeJS/Express RestAPIs

In the tutorial, we will show you how to use new feature Bootstrap 4 Card Images to create cards with images from NodeJS/Express RestAPIs.

Related posts:
NodeJS/Express – Bootstrap Image example


We create a NodeJS/Express project as below structure:

Run above project then makes a request http://localhost:8081

-> Bootstrap view:


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:


Setting up NodeJS/Express project

Create a folder ‘NodeJS-Express-Bootstrap4-Card-Image’:

Then init NodeJS project:

-> Install Express, Body-Parser:

-> see package.json file:

Create Bootstrap views

./views/index.html file:

./views/404.html file:

Implement Server.js


To run below sourcecode, follow the guides:

step 0: download & extract zip file -> we have a folder ‘NodeJS-Express-Bootstrap4-Card-Image’
step 1: cd NodeJS-Express-Bootstrap4-Card-Image
step 2: npm install express body-parser –save
step 3: node server.js
step 4: makes a request: http://localhost:8081

-> Sourcecode:


By grokonez | May 14, 2018.

Related Posts

Got Something To Say:

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