My homepage and React-Bootstrap Cards..

 

Now that we have the simple Navbar that can route our users to various pages or components in our react app. It was now time to start pulling together some sort of simple feel for our users to work with. (If you haven't already seen the post to implement the header and routing it might be best to go take a look at that first).

So, I have always been a fan of the card structure. There is something about it for me that screams simplicity and is easy to read. You can tell from a glance what that card is about and the call to action (anything that you want the user to do or complete)  for that card. 

We have already got the setup for our dependencies, so head straight over to the react-bootstrap documentation to see if there are any components that have the feel/ look of the card structure we want. 

After some tinkering and messing about I decided to go with the Header and Footer option this gave me enough space for a small description, a style that looked finished and you could clearly see where one card finished and the next began. 

There are plenty of options for you to have a go with and it really doesn't matter what combination you go for as long as you are happy with the feel and look of it. But for this example, I will be using the Header and footer option.

As the documentation suggests I copied and pasted their code snippet and change the content to what I wanted and had a look at what I had achieved.

Not quite what I had in mind but it was a card nonetheless. I was a step closer to the dream. So let's get into spacing/grids/layouts and all that jazz. 

I know from my experience that this card has been given the freedom to roam over my whole webpage and frankly I don't want it to. It needs to be confined so that it looks right and it fits the style I'm going for. Here is the react-bootstrap documentation for layout. This is where <Container>, <Col> (Columns) and <Rows> come into play. 

Containers <Container></Container>:

"Containers provide a means to center and horizontally pad your site’s contents." what does this mean? it basically means it gives your content a location on your site that has its set width or can have a fluid width (the whole of the view basically). You're giving your content a window in which it can be shown.

Row <Row></Row>:

As you can now guess this is a way to split your Container into rows. Here is my example: 

We are starting to get somewhere. However, I wanted more of a square tile-like setup. So these need to be next to each other. 

Col <Col></Col> (Columns):

This is a way to split your container. So how many columns would you like in your Container? For my example, I wanted at least three. This may change. If you leave the Col component to default it would spread out equally which is exactly what I wanted, simple and uniform. Here is an example: 

Now that I had the tile structure I wanted. I could now rinse and repeat, copy the cards and change the content. For my specific collections. Here is the full code example: 

Scott