your recipe card header background

    Bootstrap cards

    0

    11

    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>
    Codiga Logo
    Codiga Hub
    • Rulesets
    • Explore
    • Cookbooks
    • Playground
    soc-2 icon

    We are SOC-2 Compliance Certified

    G2 high performer medal

    Codiga – All rights reserved 2022.