Scribd Logo
Upload

Welcome to Scribd!

  • Lecture 12

    Uploaded by

    Shivanshu Kumar Gupta
    4 views10 pages
    Cards in Bootstrap provide a bordered box with padding for content. They can include headers, footers, and contextual colors. A basic card is created with the .card class containing .card-body content. Header and footer sections are added with .card-header and .card-footer. Contextual colors are added with classes like .bg-primary. Images can be placed at the top or bottom of a card using .card-img-top or .card-img-bottom.

    Original Description:

    Copyright

    © © All Rights Reserved

    Available Formats

    PPTX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Cards in Bootstrap provide a bordered box with padding for content. They can include headers, footers, and contextual colors. A basic card is created with the .card class containing .card-body content. Header and footer sections are added with .card-header and .card-footer. Contextual colors are added with classes like .bg-primary. Images can be placed at the top or bottom of a card using .card-img-top or .card-img-bottom.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    4 views10 pages

    Lecture 12

    Uploaded by

    Shivanshu Kumar Gupta
    Cards in Bootstrap provide a bordered box with padding for content. They can include headers, footers, and contextual colors. A basic card is created with the .card class containing .card-body content. Header and footer sections are added with .card-header and .card-footer. Contextual colors are added with classes like .bg-primary. Images can be placed at the top or bottom of a card using .card-img-top or .card-img-bottom.

    Copyright:

    © All Rights Reserved
    Download as PPTX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 10

    Cards

    A card in Bootstrap is a
    bordered box with some
    padding around its content. It
    includes options for headers,
    footers, content, colors, etc.
    Basic Card

    A basic card is created with the .card class, and


    content inside the card has a .card-body class:

    <div class="card">
      <div class="card-body">Basic card</div>
    </div>
    <body>

    <div class="container">
    <h2>Basic Card</h2>
    <div class="card">
    <div class="card-body">Basic card</div>
    </div>
    </div>

    </body>
    Header and Footer
    The .card-header class adds a heading to the card and the .card-footer class adds a
    footer to the card:

    <div class="card">
      <div class="card-header">Header</div>
      <div class="card-body">Content</div>
      <div class="card-footer">Footer</div>
    </div>
    <body>

    <div class="container">
    <h2>Card Header and Footer</h2>
    <div class="card">
    <div class="card-header">Header</div>
    <div class="card-body">Content</div>
    <div class="card-footer">Footer</div>
    </div>
    </div>

    </body>
    Contextual Cards

    To add a background color the card, use contextual


    classes (.bg-primary, .bg-success, .bg-info, .bg-
    warning, .bg-danger, .bg-secondary, .bg-dark and .bg-
    light.
     <div class="container">
    <br>
    <h2>Cards with Contextual Classes</h2> <div class="card bg-warning text-white">
    <div class="card"> <div class="card-body">Warning card</div>
    </div>
    <div class="card-body">Basic card</div>
    <br>
    </div> <div class="card bg-danger text-white">
    <br> <div class="card-body">Danger card</div>
    <div class="card bg-primary text-white"> </div>
    <br>
    <div class="card-body">Primary card</div> <div class="card bg-secondary text-white">
    </div> <div class="card-body">Secondary card</div>
    <br> </div>
    <br>
    <div class="card bg-success text-white">
    <div class="card bg-dark text-white">
    <div class="card-body">Success card</div> <div class="card-body">Dark card</div>
    </div> </div>
    <br>
    <br>
    <div class="card bg-light text-dark">
    <div class="card bg-info text-white"> <div class="card-body">Light card</div>
    <div class="card-body">Info card</div> </div>
    </div> </div>

    </body>
    Titles, text, and links
    <div class="card">
    Use .card-title to add card   <div class="card-body">
    titles to any heading     <h4 class="card-
    element. The .card- title">Card title</h4>
    text class is used to     <p class="card-
    remove bottom margins text">Some example text.
    for a <p> element if it is Some example text.</p>
    the last child (or the only     <a href="#" class="card
    one) inside .card-body. -link">Card link</a>
    The .card-link class adds a     <a href="#" class="card
    blue color to any link, and -link">Another link</a>
    a hover effect.   </div>
    </div>
    Card Images
    Add .card-img-top or .card-
    img-bottom to an <img> to <div class="card" style="width:400px">

    place the image at the top or   <img class="card-img-

    at the bottom inside the top" src="img_avatar1.png" alt="Card image">


      <div class="card-body">
    card. Note that we have
        <h4 class="card-title">John Doe</h4>
    added the image outside of
        <p class="card-text">Some example text.</p>
    the .card-body to span the     <a href="#" class="btn btn-primary">See
    entire width: Profile</a>
      </div>
    </div>

    You might also like