Card Background Variants

3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€93.70
List Price:  €131.19
You save:  €37.48
£80.17
List Price:  £112.24
You save:  £32.07
CA$137.56
List Price:  CA$192.60
You save:  CA$55.03
A$155.17
List Price:  A$217.25
You save:  A$62.07
S$135.98
List Price:  S$190.37
You save:  S$54.39
HK$783.01
List Price:  HK$1,096.25
You save:  HK$313.23
CHF 90.89
List Price:  CHF 127.26
You save:  CHF 36.36
NOK kr1,101.16
List Price:  NOK kr1,541.68
You save:  NOK kr440.51
DKK kr699.21
List Price:  DKK kr978.92
You save:  DKK kr279.71
NZ$168.70
List Price:  NZ$236.19
You save:  NZ$67.48
د.إ367.21
List Price:  د.إ514.11
You save:  د.إ146.90
৳10,942.52
List Price:  ৳15,319.96
You save:  ৳4,377.44
₹8,353.31
List Price:  ₹11,694.97
You save:  ₹3,341.66
RM478.30
List Price:  RM669.64
You save:  RM191.34
₦129,687.03
List Price:  ₦181,567.03
You save:  ₦51,880
₨27,754.24
List Price:  ₨38,857.05
You save:  ₨11,102.81
฿3,676.55
List Price:  ฿5,147.32
You save:  ฿1,470.77
₺3,250.48
List Price:  ₺4,550.80
You save:  ₺1,300.32
B$523.28
List Price:  B$732.62
You save:  B$209.33
R1,903.66
List Price:  R2,665.20
You save:  R761.54
Лв183.15
List Price:  Лв256.41
You save:  Лв73.26
₩137,464.20
List Price:  ₩192,455.38
You save:  ₩54,991.18
₪378.95
List Price:  ₪530.55
You save:  ₪151.59
₱5,720.89
List Price:  ₱8,009.48
You save:  ₱2,288.58
¥15,440.72
List Price:  ¥21,617.62
You save:  ¥6,176.90
MX$1,696.11
List Price:  MX$2,374.63
You save:  MX$678.51
QR363.78
List Price:  QR509.31
You save:  QR145.52
P1,378.02
List Price:  P1,929.29
You save:  P551.26
KSh13,298.67
List Price:  KSh18,618.67
You save:  KSh5,320
E£4,850.08
List Price:  E£6,790.31
You save:  E£1,940.22
ብር5,673.01
List Price:  ብር7,942.45
You save:  ብር2,269.43
Kz83,741.62
List Price:  Kz117,241.62
You save:  Kz33,500
CLP$97,883.21
List Price:  CLP$137,040.41
You save:  CLP$39,157.20
CN¥723.83
List Price:  CN¥1,013.40
You save:  CN¥289.56
RD$5,893.56
List Price:  RD$8,251.22
You save:  RD$2,357.66
DA13,447.21
List Price:  DA18,826.63
You save:  DA5,379.42
FJ$227.04
List Price:  FJ$317.87
You save:  FJ$90.82
Q775.43
List Price:  Q1,085.64
You save:  Q310.20
GY$20,874.74
List Price:  GY$29,225.48
You save:  GY$8,350.73
ISK kr14,084.59
List Price:  ISK kr19,718.99
You save:  ISK kr5,634.40
DH1,011.98
List Price:  DH1,416.82
You save:  DH404.83
L1,789.85
List Price:  L2,505.87
You save:  L716.01
ден5,767.34
List Price:  ден8,074.51
You save:  ден2,307.16
MOP$804.17
List Price:  MOP$1,125.87
You save:  MOP$321.70
N$1,897.84
List Price:  N$2,657.05
You save:  N$759.21
C$3,669.73
List Price:  C$5,137.77
You save:  C$1,468.04
रु13,346.58
List Price:  रु18,685.75
You save:  रु5,339.16
S/375.13
List Price:  S/525.19
You save:  S/150.06
K378.96
List Price:  K530.57
You save:  K151.60
SAR375.09
List Price:  SAR525.14
You save:  SAR150.05
ZK2,519.95
List Price:  ZK3,528.03
You save:  ZK1,008.08
L466.17
List Price:  L652.66
You save:  L186.48
Kč2,369.01
List Price:  Kč3,316.71
You save:  Kč947.70
Ft36,915.02
List Price:  Ft51,682.51
You save:  Ft14,767.48
SEK kr1,089.22
List Price:  SEK kr1,524.96
You save:  SEK kr435.73
ARS$86,913.85
List Price:  ARS$121,682.87
You save:  ARS$34,769.02
Bs690.45
List Price:  Bs966.66
You save:  Bs276.20
COP$391,130.80
List Price:  COP$547,598.77
You save:  COP$156,467.96
₡49,957.95
List Price:  ₡69,943.14
You save:  ₡19,985.18
L2,461.44
List Price:  L3,446.12
You save:  L984.67
₲737,867.79
List Price:  ₲1,033,044.43
You save:  ₲295,176.63
$U3,889.78
List Price:  $U5,445.86
You save:  $U1,556.07
zł405.87
List Price:  zł568.23
You save:  zł162.36
Already have an account? Log In

Transcript

Hello, in this bootstrap four video, we're going to cover background variants. And these are classes that allow you to change the color of the background and the border of your card really simple to use. So to show you how to actually use it, all you have to do is go to your div that is the outermost container for your card to another class of card and add an extra class. And we'll show you all of the different ones. So card dash primary first one, so these styles are very similar to what you will have used with buttons and other elements inside bootstrap. So if you're familiar with the different styles for bootstrap your flow writer Tom here, but let's I will show you all the different ones anyway.

Let's go back refresh and they go D vary, I mean, the background and the border color have changed for our code. I think that this black color doesn't look very good. So what you can do Just use the built in bootstrap, called dash inverse class, which just invert the color of the text and it just makes it look a little bit better. But if you don't want it like that, you can emit this and set your own color if you want to look so we want to show you all the different cards. So let's just copy and paste this diff. Next one we're going to show you is called success.

The third one is called dash info. Fourth one called dash warning. And the final one is called dash danger. So, let's just changed here. Now we're ready to refresh our browser, refresh. And there you go, we have four, five different cards.

And as you can see, the color is different for every single one and lock that they match the styles that you will have used for, say the bottom four examples cuz we got a button right here, we just go to one of the button got button dash success. If we go to the success card, it has a similar color, hence what you can't see. So that's the reason you would want a success button on a success card eugenic on sale, or you might want to that's your choice, but actually, I want you to as an extra task, just messing around with the different styles for the button and see what you can do. If you have any questions, feel free to post them on our education platform sonar learning Dakota, UK for slash question, PHP, there'll be a link in the description to the plus there'll be another link in the description to the source code from this video and All the source code from every single video in this series, please rate, comment and subscribe.

And as usual, thanks for watching and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.