Introduction To Cards

5 minutes
Share the link to this page
You need to have access to the item to view this lesson.
One-time Fee
List Price:  $139.99
You save:  $40
List Price:  €131.73
You save:  €37.64
List Price:  £112.47
You save:  £32.13
List Price:  CA$193.14
You save:  CA$55.18
List Price:  A$218.27
You save:  A$62.36
List Price:  S$191.03
You save:  S$54.58
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
List Price:  NZ$237.92
You save:  NZ$67.98
List Price:  د.إ514.10
You save:  د.إ146.89
List Price:  ৳15,356.49
You save:  ৳4,387.88
List Price:  ₹11,705.89
You save:  ₹3,344.78
List Price:  RM670.83
You save:  RM191.68
List Price:  ₦168,151.32
You save:  ₦48,046.66
List Price:  ₨38,919.49
You save:  ₨11,120.65
List Price:  ฿5,133.99
You save:  ฿1,466.96
List Price:  ₺4,548.41
You save:  ₺1,299.64
List Price:  B$725.86
You save:  B$207.40
List Price:  R2,668.37
You save:  R762.44
List Price:  Лв257.70
You save:  Лв73.63
List Price:  ₩194,966.22
You save:  ₩55,708.61
List Price:  ₪528.13
You save:  ₪150.90
List Price:  ₱7,973.62
You save:  ₱2,278.34
List Price:  ¥21,641.98
You save:  ¥6,183.86
List Price:  MX$2,353.45
You save:  MX$672.46
List Price:  QR512.38
You save:  QR146.40
List Price:  P1,938
You save:  P553.75
List Price:  KSh18,408.68
You save:  KSh5,260
List Price:  E£6,792.74
You save:  E£1,940.92
List Price:  ብር7,993.99
You save:  ብር2,284.16
List Price:  Kz116,758.56
You save:  Kz33,361.97
List Price:  CLP$136,180.87
You save:  CLP$38,911.60
List Price:  CN¥1,013.33
You save:  CN¥289.54
List Price:  RD$8,302.55
You save:  RD$2,372.32
List Price:  DA18,879.17
You save:  DA5,394.43
List Price:  FJ$318.96
You save:  FJ$91.14
List Price:  Q1,089.53
You save:  Q311.31
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
List Price:  DH1,422.27
You save:  DH406.39
List Price:  L2,491.82
You save:  L712
List Price:  ден8,108.89
You save:  ден2,316.99
List Price:  MOP$1,128.31
You save:  MOP$322.39
List Price:  N$2,664.06
You save:  N$761.21
List Price:  C$5,171.92
You save:  C$1,477.79
List Price:  रु18,678.28
You save:  रु5,337.03
List Price:  S/520.72
You save:  S/148.78
List Price:  K531.82
You save:  K151.96
List Price:  SAR525.11
You save:  SAR150.04
List Price:  ZK3,523.21
You save:  ZK1,006.70
List Price:  L655.55
You save:  L187.31
List Price:  Kč3,325.75
You save:  Kč950.28
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
List Price:  ARS$121,552.04
You save:  ARS$34,731.63
List Price:  Bs970.99
You save:  Bs277.44
List Price:  COP$541,816
You save:  COP$154,815.63
List Price:  ₡70,374.06
You save:  ₡20,108.31
List Price:  L3,468.86
You save:  L991.17
List Price:  ₲1,036,507.98
You save:  ₲296,166.29
List Price:  $U5,445.86
You save:  $U1,556.07
List Price:  zł571.20
You save:  zł163.21
Already have an account? Log In


Hello everyone in this bootstrap four video, we're going to look at chords within bootstrap. So chords are flexible and extensible content container allows you to put headers, footers, and a variety of other content. They're great for showcasing something off. Maybe you have an image, Target or a description, maybe a link to a product, for example. So if you're a game developer or an application developer on your website, you want to just showcase a few different products that you've done. You can use cards cards are a great way of displaying some content very nicely in a minimalistic way.

So in this video, we're just gonna cover the basics of chords, because there's a lot to do because we separate videos covering only other features. So to get started, just create a div tag. This has a class of card and inside here, we're just gonna put an image tag For the actual image itself, Korean link editing from the bootstrap website, this is what they use. And this is just a free hundred 18 by 180 pixel gray image that has text on it doesn't look kind of special, but it basically get the job done and illustrates what we're trying to do. So it's grateful that this added class, I'm going to add called IMG top and now just add an alt attribute and for this outcome called image. Now we're gonna add a div tag.

And this div tag is gonna have a class of called block. Inside here, we're gonna have a H tag. Again, you can do whatever you want. You don't have to have a hateful You don't even have to have a hashtag The beauty of these components are they are customizable. So if you don't want to image don't print images, when a h1 tag per h1 tag in there if you want to, if you want styling, like styling, it's what you want. class called title.

And then silence on put. This is a total, like the best title ever. I'm going to put the p tag for this one called dash Tex, oh, sorry, I should be the class. Class equals called dash text. And in here, we're just gonna put some random text actually misspelled that. And for that, what I'm going to do is go to Google and type in random paragraph.

It's like going to this website, generating random paragraph or tutorial. Yeah. In a Okay, so let's copy that. paste it in between these p tags. Now we have our random paragraph and we're gonna add a button as well. Obviously, you can add different types of buttons.

But we're just gonna keep it simple can add a class as well. btn and btn dash access. Yeah, I'm for this I'm gonna play HTTP four slash four slash so nos Save it. Go to our web browser. Refresh.

Okay, that hasn't quite worked out. Something about to have oopsy Daisy in here, sorry. have gotten There you go that fixes that was just a mistake on my part. So here we go, we've got our container, I mean, our cord, got our image title, our text, and our budget, we really think it's Spanish to the entire width of the browser or the web page or the parent container. And it has. And to overcome that, you have to apply a max width to this card limit, aka the most root element for the card is going to be some inline styling.

And Max dash wave. Obviously, this would generally depend on like the type of imagery you got how wide you want it. I know with the content, I've got 319 pixels, looks good. So if you just go back refresh, there you go. We've got a nice looking card that we can showcase and image, let's say again, again, total, some description about our game, and then a button which could take us to the web page. To download or play our game or check out what we're highlighting and showcasing using cards.

There will be more videos showcasing all the different features of cards because like I said, There's quite a bit to cover. It's more than really what one video should be. If you have any questions about this or anything else in bootstrap or programming in general, feel free to post them at sonar learning code at UK for slash question dot php. There'll be a link in the description to that there'll be another link in the description as well to the source code from this video and source code from every other video in this series. Please rate, comment and subscribe, as it does really help keep the content free Plus, it helps us grow and provide more content to you on a regular basis which is good for everyone. And as usual, thanks for watching and I hope you have a great day.

Sign Up


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.