Styling Cards Possible?

Wappler General
1

In Bootstrap 3 Panels which are now cards in bootstrap 4 you were able to add a style such primary, warning, danger, etc. Can this be done with cards? I can’t seem to find a way to do it or any documentation on doing it on the bootstrap site.

2 
<div class="card bg-primary">
  <div class="card-body">Basic card</div>
</div>

Just change bg-primary to warning or info etc. https://www.w3schools.com/bootstrap4/bootstrap_cards.asp

3

That changes the entire card though. I only need to change header and borders. At least the header.

4 
<div class="card">
  <div class="card-header bg-primary">Header</div>
  <div class="card-body">Content</div> 
  <div class="card-footer bg-danger">Footer</div>
</div>
5

Thanks @psweb, it’s not quite ideal like the old panels but it will have to do. All the best in the new year! :slight_smile:

1 Like
6

Just out of interest if you want more control you can also use things like text-success border-success bg-warning. As well as add padding and margins so I am generally able to get what I want by using a combination of those.
I even use nav stuff in a card in one of my stranger projects and that worked surprisingly well.

If there is something particular you are trying to achieve just give an idea and I will try assist where possible.

2 Likes
7

Thanks again, Paul! That extra bit of info helped a lot to achieve the look I needed.

1 Like