Using bulma makes it easy to position text – usually. I was not able to place the card-header attribute centered.
My Try:
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/1.0.1/css/bulma.min.css" rel="stylesheet"/>
<div class="columns mt-3">
<div class="column is-3 ml-3" style="display: flex;">
<div class="card has-background-warning-light">
<div class="card-header">
<p class="has-text-right is-size-5 is-uppercase has-text-centered">
regular price
</p>
</div>
<div class="card-image">
<div class="has-background-warning">
<div class="has-text-centered">
<span class="is-size-1 has-text-weight-bold">
$ 999
</span>
</div>
</div>
<!-- <figure class="image is-3by1">
<img src="https://bulma.io/assets/images/placeholders/1280x960.png" alt="Placeholder"/>
</figure> -->
</div>
<div class="card-content">
<div class="media">
<!-- <div class="media-left">
<figure class="image is-64x64">
{{ teacher.country.show_flag }}
</figure>
</div> -->
<div class="media-content">
<p class="title is-3" style="display: flex;">
standard price available for everyone
</p>
<p class="subtitle is-6 mt-1">
regular price
</p>
</div>
</div>
<div class="content has-text-centered">
<button class="button is-dark">
BUY
</button>
</div>
</div>
</div>
</div>Why is my has-text-centered not applied – only in the `card-header?