Now that we have our NAV system pretty much set up the way that we want it I want to go into the bootstrap documentation and start building out the styles for the rest of the app. So I'm going to go to the documentation here and go down to components and there is a new item in Bootstrap 4 that I absolutely love. I think it has a really professional kind of look and feel and it's called a card. So a card component here gives you the ability to create something that looks kind of like this.

You can have it look however you want. It's completely based off of how you want to customize that but I think this is a really neat kind of look and feel. I want to start in our documents section and so I think this would be a perfect kind of thing for that so you can scroll down and pick out which one you want for your own needs.

I want to have something that has a picture in it, so I am going to scroll all the way down just so you can see all of it. But I'm going to go with this Image caps one toward the bottom and I'll eventually add a button for them to go download it and then I want to have a nice picture for them to go and grab here. So I'm going to come and grab this top div. And now if we go into Sublime Text and close out all of our tabs just so we don't make confusion. We are going to open up the document.component.html and inside of this we have our page title and then we also have this for block. So I'm going to use what we copied from bootstrap as an example but what I'm going to do is add a class of card

<div class="card" *ngFor="let doc of documents">

Then inside of that, we're going to be able to place all these other items so we have an image. And this is where our image URL is going to come from. And then right below that and actually looks like I may have skipped one step. I just wanted to make sure I didn't miss anything so I'm not going to cut I'm actually going to copy. So we have our image now

<img class="card-img-top" src="..." alt="Card image cap">

and now we need to have our card a block div. So I'm going to have a card BLOCK And let's see this is going to go all the way down to our tag we can actually get rid of our tag because we're not going to need that anymore.

And I want to nest everything else inside of our card block and we're going to have a card title which is going to be and . And this is going to be our doc title. And let me come over to Docs on our webpage just so we can see the difference because I think your go like this transformation. OK. So we have card title and then we have of this is where our doc title is going to come in. And then we can get rid of this H-3 under our card-title.

Next thing we have our description and that's where this card text is and it's just going to be a P class so instead of an emphasis it's going to be and it's going to be of class card text. And then let's see and then we have the last updated at. So this is going to be our updated at value and for this, we can grab our updated at.

Let's see what else, and then this image url this is going to be what we're going to use inside of the image. So here inside of source we're going to type in this image url.

src="{{ doc.image_url }}"

Then we have this download a file which is a div but I want to make it a button. So let's see the best way to do that would be to just have a class there's going to be a button class and I'm going to do button large. And button and I guess we could go primary.

<a class="btn btn-lg btn-primary" href="{{ doc.file_url }}">Download File</a>

OK. I think this is all we need now is look perfect because we don't have a real image you are also not sure if it's got there or an error or if it's just going to be blank. But let's save, and you can see that's starting to look better

and it just has this little empty spot.

So far so good. I'm liking this much more. Now we can fix this by just going grabbing some image urls. Eventually, these are going to be coming from our API. But for right now we can just google freelancer images make sure that when you do this in your search tools you want to make sure you get ones labeled for reuse or at least I have to because of the fact that this is a course and I can't tell you to go out and get something that is not labeled for reuse.

I can grab this url and none of this is really necessary in terms of the angular development side. But I want to show it to you just so you can kind of get a good feel for how it works. And so I'm going to go to documents.component.ts and now we can just give our image URL. So we could do that one for one of them do, copy another one. In fact, pretty much all of these images are going to make us download them. So let's just use the first three times. I wanted to kind of have three of them just so you could see something different about them but just notice the titles going to be different.

Now if I hit save this is going to go and it's going to fetch those images. But see how massive the images are? This is probably not what we want. You can go side to side and see all of this. So there's a couple of ways you could do it. First, you could have an image that's just a lot smaller but that's not really the way a true developer would do it.

Instead what you do is you come to the image tag and you can just set the width. So here lets say the width is going to be 300.

<img class="card-img-top" src="{{ doc.image_url }}" alt="Card image cap" width="100%">

And there you go and you have a much better-looking kind of something I should say that's a little bit more fitting.

And if you wanted to do something like five hundred. This would go across or you can do what I was planning on doing which is just 100 percent and you can see that now this goes from side to side.

And we have these cool cards. It's a little bit harder to see than you may like it but eventually, we're going to add a container for this. So let's just see kind of get a preview of what it will look like I'm not saying this is the end result this is just what I want to do right now. You can see that we have a container and that gives us our side to side styles.

So this is looking really good. Now we actually have a true component that looks more like a real component.

And in the next guide, I want to go in and start adding some custom styles. So far everything that we've done has been coming in from Bootstrap. But I want to override some of the styles and I want to do things like add some padding at the top and some different things like that. And in order to do that we're going to have to create our first style sheet that is going to be based on a component.

Resources

• Code at this stage