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

Goal

We create a NodeJS/Express project as below structure:

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

-> Bootstrap view:

NodeJS-Express-Bootstrap-4-Card-Image-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:

Practice

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

Sourcecode

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:

NodeJS-Express-Bootstrap4-Card-Image

By JavaSampleApproach | May 14, 2018.

Related Posts


Got Something To Say:

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

*