Inverting Cards

2 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
€94.09
List Price:  €131.73
You save:  €37.64
£80.33
List Price:  £112.47
You save:  £32.13
CA$137.95
List Price:  CA$193.14
You save:  CA$55.18
A$155.90
List Price:  A$218.27
You save:  A$62.36
S$136.45
List Price:  S$191.03
You save:  S$54.58
HK$783.08
List Price:  HK$1,096.34
You save:  HK$313.26
CHF 91.31
List Price:  CHF 127.84
You save:  CHF 36.52
NOK kr1,099.13
List Price:  NOK kr1,538.83
You save:  NOK kr439.69
DKK kr702.04
List Price:  DKK kr982.89
You save:  DKK kr280.84
NZ$169.94
List Price:  NZ$237.92
You save:  NZ$67.98
د.إ367.20
List Price:  د.إ514.10
You save:  د.إ146.89
৳10,968.60
List Price:  ৳15,356.49
You save:  ৳4,387.88
₹8,361.11
List Price:  ₹11,705.89
You save:  ₹3,344.78
RM479.15
List Price:  RM670.83
You save:  RM191.68
₦120,104.65
List Price:  ₦168,151.32
You save:  ₦48,046.66
₨27,798.84
List Price:  ₨38,919.49
You save:  ₨11,120.65
฿3,667.03
List Price:  ฿5,133.99
You save:  ฿1,466.96
₺3,248.77
List Price:  ₺4,548.41
You save:  ₺1,299.64
B$518.45
List Price:  B$725.86
You save:  B$207.40
R1,905.92
List Price:  R2,668.37
You save:  R762.44
Лв184.07
List Price:  Лв257.70
You save:  Лв73.63
₩139,257.60
List Price:  ₩194,966.22
You save:  ₩55,708.61
₪377.23
List Price:  ₪528.13
You save:  ₪150.90
₱5,695.28
List Price:  ₱7,973.62
You save:  ₱2,278.34
¥15,458.12
List Price:  ¥21,641.98
You save:  ¥6,183.86
MX$1,680.99
List Price:  MX$2,353.45
You save:  MX$672.46
QR365.97
List Price:  QR512.38
You save:  QR146.40
P1,384.25
List Price:  P1,938
You save:  P553.75
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,851.82
List Price:  E£6,792.74
You save:  E£1,940.92
ብር5,709.83
List Price:  ብር7,993.99
You save:  ብር2,284.16
Kz83,396.59
List Price:  Kz116,758.56
You save:  Kz33,361.97
CLP$97,269.27
List Price:  CLP$136,180.87
You save:  CLP$38,911.60
CN¥723.78
List Price:  CN¥1,013.33
You save:  CN¥289.54
RD$5,930.22
List Price:  RD$8,302.55
You save:  RD$2,372.32
DA13,484.73
List Price:  DA18,879.17
You save:  DA5,394.43
FJ$227.82
List Price:  FJ$318.96
You save:  FJ$91.14
Q778.21
List Price:  Q1,089.53
You save:  Q311.31
GY$20,908.09
List Price:  GY$29,272.17
You save:  GY$8,364.07
ISK kr14,179.58
List Price:  ISK kr19,851.98
You save:  ISK kr5,672.40
DH1,015.88
List Price:  DH1,422.27
You save:  DH406.39
L1,779.82
List Price:  L2,491.82
You save:  L712
ден5,791.90
List Price:  ден8,108.89
You save:  ден2,316.99
MOP$805.91
List Price:  MOP$1,128.31
You save:  MOP$322.39
N$1,902.84
List Price:  N$2,664.06
You save:  N$761.21
C$3,694.12
List Price:  C$5,171.92
You save:  C$1,477.79
रु13,341.25
List Price:  रु18,678.28
You save:  रु5,337.03
S/371.93
List Price:  S/520.72
You save:  S/148.78
K379.86
List Price:  K531.82
You save:  K151.96
SAR375.07
List Price:  SAR525.11
You save:  SAR150.04
ZK2,516.51
List Price:  ZK3,523.21
You save:  ZK1,006.70
L468.24
List Price:  L655.55
You save:  L187.31
Kč2,375.47
List Price:  Kč3,325.75
You save:  Kč950.28
Ft37,163.97
List Price:  Ft52,031.05
You save:  Ft14,867.07
SEK kr1,095.61
List Price:  SEK kr1,533.90
You save:  SEK kr438.29
ARS$86,820.40
List Price:  ARS$121,552.04
You save:  ARS$34,731.63
Bs693.54
List Price:  Bs970.99
You save:  Bs277.44
COP$387,000.37
List Price:  COP$541,816
You save:  COP$154,815.63
₡50,265.75
List Price:  ₡70,374.06
You save:  ₡20,108.31
L2,477.69
List Price:  L3,468.86
You save:  L991.17
₲740,341.68
List Price:  ₲1,036,507.98
You save:  ₲296,166.29
$U3,889.78
List Price:  $U5,445.86
You save:  $U1,556.07
zł407.99
List Price:  zł571.20
You save:  zł163.21
Already have an account? Log In

Transcript

Hello, in this bootstrap four video, we're going to show you how you can invert the color of your card. Because if you have a look at the moment, just ignore the image, we're not going to be inverted any of that, because that's an image, we have a white background inside the card body, you might think it's just the default thing. And generally, it's still white. We have some text, which is black, and I believe is black as well or really, really dark gray. Either way, we've got dark text and a light background, but you might want it reversed. You might want a dark background and white text.

The obvious way to do that is apply CSS for the background. Apply CSS for this for CSS, CSS for this and any other items that become quite tedious to invert it. There are literally two things that you really need to do. Add a class to the entire called div container and the Classes card dash inverse, save it. And now if we go to our browser refresh, this text hasn't disappeared. It's still here.

It's just white now. And what we're going to do is just manually change the background color of the card. I'm using inline styling just so it's easier for this video. Generally, you'll want to use a CSS file. So I'm going to put back ground dash color and set it to black, something that's dark works well. Go back refresh.

And there you go. We have a black background, which we applied one line of CSS, and using the cord that inverse, these two pieces of text, have no change color. This is white, and that this is gray. And what's great about this is the title is something that needs to really stand out. So if it's a post on a blog, you want it to attract the user. So they is brighter than the main text, the main text is still more than readable.

It's not like you can't read it, it's just not as prominent as the total. That's all handled within bootstrap. So that's called inversions for you, in bootstrap, if you have any questions, feel free to post them on our education platform. So now learning Dakota, UK forward slash question dot php, there'll be a link in the description to that website. Plus, there's also thousands of videos for free on our education platform. So check them out, as well.

There'll be another link in the description to the source code from this video, and the source code from every other video in this series. Please rate, comment and subscribe and it doesn't really help us provide more content to you on a regular basis. And as usual, I'm Georgia 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.