Navbar Color Schemes

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.69
List Price:  €131.17
You save:  €37.48
£77.60
List Price:  £108.65
You save:  £31.04
CA$139.29
List Price:  CA$195.02
You save:  CA$55.72
A$151.87
List Price:  A$212.63
You save:  A$60.75
S$133.13
List Price:  S$186.38
You save:  S$53.25
HK$777.29
List Price:  HK$1,088.24
You save:  HK$310.95
CHF 87.93
List Price:  CHF 123.11
You save:  CHF 35.17
NOK kr1,104.77
List Price:  NOK kr1,546.73
You save:  NOK kr441.95
DKK kr698.68
List Price:  DKK kr978.18
You save:  DKK kr279.50
NZ$167.57
List Price:  NZ$234.61
You save:  NZ$67.03
د.إ367.26
List Price:  د.إ514.18
You save:  د.إ146.92
৳12,019.14
List Price:  ৳16,827.28
You save:  ৳4,808.14
₹8,437.49
List Price:  ₹11,812.83
You save:  ₹3,375.33
RM440.95
List Price:  RM617.35
You save:  RM176.40
₦168,038.19
List Price:  ₦235,260.19
You save:  ₦67,222
₨27,930.87
List Price:  ₨39,104.34
You save:  ₨11,173.46
฿3,435.35
List Price:  ฿4,809.63
You save:  ฿1,374.28
₺3,432.75
List Price:  ₺4,805.99
You save:  ₺1,373.23
B$578.39
List Price:  B$809.77
You save:  B$231.38
R1,775.91
List Price:  R2,486.34
You save:  R710.43
Лв183.06
List Price:  Лв256.30
You save:  Лв73.23
₩139,696.36
List Price:  ₩195,580.49
You save:  ₩55,884.13
₪373.04
List Price:  ₪522.27
You save:  ₪149.23
₱5,864.11
List Price:  ₱8,209.99
You save:  ₱2,345.87
¥15,367.99
List Price:  ¥21,515.80
You save:  ¥6,147.81
MX$2,036.44
List Price:  MX$2,851.10
You save:  MX$814.65
QR365.08
List Price:  QR511.13
You save:  QR146.04
P1,334.01
List Price:  P1,867.67
You save:  P533.65
KSh12,898.71
List Price:  KSh18,058.71
You save:  KSh5,160
E£4,921.85
List Price:  E£6,890.79
You save:  E£1,968.94
ብር12,453.44
List Price:  ብር17,435.32
You save:  ብር4,981.87
Kz91,125.91
List Price:  Kz127,579.93
You save:  Kz36,454.01
CLP$97,077.66
List Price:  CLP$135,912.62
You save:  CLP$38,834.95
CN¥719.49
List Price:  CN¥1,007.32
You save:  CN¥287.82
RD$6,057.20
List Price:  RD$8,480.32
You save:  RD$2,423.12
DA13,406.48
List Price:  DA18,769.61
You save:  DA5,363.12
FJ$225.25
List Price:  FJ$315.36
You save:  FJ$90.11
Q777.28
List Price:  Q1,088.22
You save:  Q310.94
GY$21,042.91
List Price:  GY$29,460.92
You save:  GY$8,418
ISK kr13,914.60
List Price:  ISK kr19,481
You save:  ISK kr5,566.40
DH993.26
List Price:  DH1,390.60
You save:  DH397.34
L1,803.93
List Price:  L2,525.57
You save:  L721.64
ден5,764.94
List Price:  ден8,071.14
You save:  ден2,306.20
MOP$805.37
List Price:  MOP$1,127.55
You save:  MOP$322.18
N$1,760.19
List Price:  N$2,464.34
You save:  N$704.14
C$3,701.17
List Price:  C$5,181.79
You save:  C$1,480.61
रु13,577.81
List Price:  रु19,009.47
You save:  रु5,431.66
S/377.27
List Price:  S/528.20
You save:  S/150.92
K403.78
List Price:  K565.32
You save:  K161.53
SAR375.56
List Price:  SAR525.80
You save:  SAR150.24
ZK2,738.35
List Price:  ZK3,833.81
You save:  ZK1,095.45
L466.14
List Price:  L652.62
You save:  L186.47
Kč2,371.47
List Price:  Kč3,320.16
You save:  Kč948.68
Ft38,315.49
List Price:  Ft53,643.23
You save:  Ft15,327.73
SEK kr1,086.64
List Price:  SEK kr1,521.34
You save:  SEK kr434.70
ARS$99,364.60
List Price:  ARS$139,114.41
You save:  ARS$39,749.81
Bs696.54
List Price:  Bs975.19
You save:  Bs278.64
COP$434,893.49
List Price:  COP$608,868.29
You save:  COP$173,974.79
₡51,449.82
List Price:  ₡72,031.81
You save:  ₡20,581.98
L2,537.81
List Price:  L3,553.04
You save:  L1,015.22
₲786,505.60
List Price:  ₲1,101,139.31
You save:  ₲314,633.70
$U4,173.81
List Price:  $U5,843.51
You save:  $U1,669.69
zł406.70
List Price:  zł569.40
You save:  zł162.69
Already have an account? Log In

Transcript

Hello, in this bootstrap four video, we're just going to quickly cover color schemes for your navbar. Because by default, the one that we use by default was navbar dash light. There are a few other color schemes, one of the other ones, or the corresponding one to nav bar dashboard, nav bar dash da. You know what, I'm gonna copy and paste this. So you can see the difference between the different color schemes instead of just replacing it saw, like a limit on how much code we can have. So let's save that.

Refresh. Okay, doo doo doo doo. And you might be thinking, why can't I see like the button and the thing is, you actually can see the buttons. It's just, they are now light color. Obviously, if this is dark, that's going to show The light text will be light but to actually make this dark, what you need to do is BG dash inverse work and let's go back onto it up, I've got to get rid of the faded. There we go.

So with the navbar dark and the BG inverse, we have a black background and white text without adding any other custom CSS and they look very good. What we can also do, again copy and paste this. We can do draw and I'm going to put BG dash primary. So there we go. We have a nice blue nav bar. And what we can also easily do is set a custom color for the background.

So I'm going to get rid of faded and put style. I'm doing inline style here. But I just want to iterate again, recommended that you generally don't do inline styling. Make sure that you have a separate CSS file with the CSS in there. It's just for the sake of this video is easy for do in lines, I'm going to put background color. And for the background color, I'm going to put hash free you know, ie free F to save that refresh, and now we have a light style navbar so the text is black, and we have a different background color and that looks very good as well.

So changing the color schemes for your navbar is really simple. If you have any questions, feel free to post them on our education platform. So no learning Dakota UK for slash question dot php. There'll be a link in the description plus w another link in the description to the source code from this video. Please rate, comment and subscribe as it does really help us and unusual. Thank you 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.