Bootstrap 4 Card Images – NodeJS/Express RestAPIs

https://grokonez.com/node-js/bootstrap-4-card-images-nodejs-express-restapis

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:

Goal

We create a NodeJS/Express project as below structure:


/NodeJS-Express-Bootstrap4-Card-Image
    /node_modules
    /resources
        /static
            /images
                jsa_about.png
                jsa_about_overlay.png
    /views
        404.html
        index.html
    package.json
    package-lock.json
    server.js

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:

More at:
https://grokonez.com/node-js/bootstrap-4-card-images-nodejs-express-restapis

Bootstrap 4 Card Images – NodeJS/Express RestAPIs

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

545 bài viết.
97 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 11 tháng trước
1 0
Male avatar
1 0
https://loizenai.com/angular11nodejspostgresqlcrudexample/ Angular 11 Node.js PostgreSQL Crud Example (Ảnh) Tutorial: “Angular 11 Node.js Postg...
loveprogramming viết 9 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 9 tháng trước
1 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
545 bài viết.
97 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!