Bootstrap cards

Khalid Khan

React Application to Fetch Data using Github API

The card has three sections, each containing an HTML element and a number. The sections are ordered from the top down, with the most significant number first.

The card's class name is "card p-3", and it is a part of the .card class.

The card has a .d-flex class which aligns items in the center.

The card has a .ml-3 w-100 class which sets the width and height to 100%.

The card has a .h3 class and a .span class.

The .h3 class has a mt-0 class which means it is not mapped to a keyboard key.

The .span class has a class name of "mb-0 mt-0" which means it will be styled using the "font-size" property.

The .span class also has a class name of "mt-2 bg-primary" which means it will be styled using the "background-color" property.

The .h3 class has a class name of "entry".

The .span class has a class name of "article".

The .span class has a class name of "number1" which means

Library: react

Shortcut: bootstrap.cards.1

<div className="card p-3">
  <div className="d-flex align-items-center">
    <div className="image"> 
    <img src= EnterImage URl className="rounded" width="155"/> 
    </div>
    <div className="ml-3 w-100">
      <h3 className="mb-0 mt-0">Enter Heading</h3><span>Enter Disc</span>
      <div className="p-2 mt-2 bg-primary d-flex justify-content-between rounded text-white stats">
        <br />
        <div className="d-flex flex-column"> <span className="articles">Item 1</span> <span className="number1"> Item 1</span> </div>
        <div className="d-flex flex-column"> <span className="followers">Item 2</span> <span className="number2">Item 2</span> </div>
        <div className="d-flex flex-column"> <span className="rating">Item 3</span> <span className="number3"> Item 3</span> </div>
      </div>
    </div>
  </div>
</div>