How to add a card-header like the bootstrap's sytle?

BrightSun2021

Here is the card example in https://bootswatch.com/cerulean/.

Thanks.

gobiyau

Sorry for late reply.

<ons-card modifier="bootstrap">
  <div class="header">Header</div>
  <div class="content">
    <div class="title">Title</div>
    <p>Some quick example text to build on the card title and make up the bulk of the card's content.</p>       
  </div>
  <div class="footer"><small>
    Last updated 3 mins ago</small>
  </div>  
</ons-card>

.card--bootstrap .header {
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    margin-bottom: 0;
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

.card--bootstrap {
    padding: 0px;
    border-radius: 0px;
}

.card--bootstrap__content {
    padding-left: 15px;
    padding-right: 15px;
}

.card--bootstrap__content .title {
    /*  same as onsen .card__title  */
    font-family: -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', 'Lucida Grande', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    font-size: 20px;
    margin: 4px 0px 8px 0;
    padding: 0;
    display: block;
    box-sizing: border-box;
}

.card--bootstrap .footer {
    padding: 0.75rem 1.25rem;
    background-color: rgba(0, 0, 0, 0.03);
    border-top: 1px solid rgba(0, 0, 0, 0.125);
}

You can write your css.

Best Regards,
Gobi