/

Bootstrap 5 Demo Using Cards


Text

Source: Immanuel Kant - What is Enlightenment?

Enlightenment is the departure of the human being from its self-incurred minority.

Minority is the inability to make use of one's understanding without direction of another.


This minority is self-incurred when the cause of it lies not in the lack of understanding but of resolution and of courage to make use of it without direction of another.

Have courage to make use of your own understanding! is thus the motto of enlightenment.

BS5Card(["w-50"], 
  BS5CardBody(
    BS5CardText("..."),
    BS5CardText("...")
  )),
BS5Card( 
  BS5CardBody(
    BS5CardText("..."),
    BS5CardText("...")
  ))
<div class="card w-50">
  <div class="card-body">
    <p class="card-text">...</p>
    <p class="card-text">...</p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <p class="card-text">...</p>
    <p class="card-text">...</p>
  </div>
</div>

Title

This is a Card title


This is a long Card title

BS5Card(["w-50"], 
  BS5CardBody(
    BS5CardTitle("..."))),
BS5Card( 
  BS5CardBody(
    BS5CardTitle("...")))
<div class="card w-50">
  <div class="card-body">
    <h4 class="card-title">...</h4>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h4 class="card-title">...</h4>
  </div>
</div>

Subtitle

Card subtitle

Longer card subtitle
BS5Card(["w-50"], 
  BS5CardBody(
    BS5CardSubtitle("Card subtitle"))),
BS5Card( 
  BS5CardBody(
    BS5CardSubtitle("Longer card subtitle")))

Button

BS5Card(["w-50"], 
  BS5CardBody(
    BS5ButtonLink(["btn-primary"], "Button"))),
BS5Card( 
  BS5CardBody(
    BS5ButtonLink(["btn-primary"], "Long Button")))
<div class="card w-50">
  <div class="card-body">
    <a class="btn btn-primary" type="button">Button</a>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <a class="btn btn-primary" type="button">Long Button</a>
  </div>
</div>

Links

List Group

  • List group item 1
  • List group item 2
  • List group item 3

  • List group item 1
  • List group item 2
  • List group item 3
BS5Card(["w-50"], 
  BS5List(["list-group-flush"],
    BS5ListItem("List group item 1"),
    BS5ListItem("List group item 2"),
    BS5ListItem("List group item 3"))),
BS5Card( 
  BS5List(["list-group-flush"],
    BS5ListItem("List group item 1"),
    BS5ListItem("List group item 2"),
    BS5ListItem("List group item 3")))

Header

Card header

Card header
BS5Card(["w-50"], 
  BS5CardHeader("Card header")),
BS5Card(
  BS5CardHeader("Long card header"))

Footer


BS5Card(["w-50"], 
  BS5CardFooter("Created DD-MM-YYYY")),
BS5Card(["w-50"], 
  BS5CardFooter("Long Footer"))