Cards

About

A card is a flexible and extensible Bootstrap content container. Nova has taken the advantage of Bootstrap's Cards and created more classes to make easier to control them on various circumstances.

Example

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. They have no margin by default, so you can use spacing utilities as needed.

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they’ll naturally fill the full width of its parent element. This is easily customized with our various sizing options.

<div class="card" style="width: 300px;">
  <div class="card-header">
    <h5 class="h6 font-weight-semi-bold text-uppercase mb-0">Card title</h5>
  </div>
  <div class="card-body pt-0">
    This is for a text within a card body.
  </div>
</div>