Projects section bootstrap 4 (4)

Step 5: Create the project sections:

Previous step Skills section Bootstrap 4 (3)

In this section we will use the bootstrap card (line 16). The cards are displayed as follow:

• 3 cards in one line in large screens (col-lg-4)  4*3 = 12 (line 15)
• 2 cards in one line in medium screens (col-sm-6) 6*2 = 12  (line 15)
• 1 card in one line in small screen.

The card title is displayed over the image using the bootstrap class "card-img-overlay" (line 18)

Some div are customized using css files as card-shadow (line 16), and heading hover (changing the opacity when the div is hovered).