Demo - Bootstrap 5

Levels

Areas

Sections

20.12.2020 / 22.02.2021

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

Long 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

Card link 1 Card link 2 Card link 3

BS5CardBody(
  BS5CardLink(["href":"#"], "Card link 1"),
  BS5CardLink(["href":"#"], "Card link 2"),
  BS5CardLink(["href":"#"], "Card link 3"))

<div class="card-body">
  <a class="card-link" href="#">Card link 1</a>
  <a class="card-link" href="#">Card link 2</a>
  <a class="card-link" href="#">Card link 3</a>
</div>

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

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

Footer

Created DD-MM-YYYY

Long Footer

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