[00:00:00] Hey welcome back to the reac that we're building. So we want to add in this content here the very first newsletter on our response. So happy holidays in this case. But before we do this let's kind of add some quick styles to our app just so we can kind of differentiate where things are and have a better view of our layout without adding in a ton of styles so we're going to do this with bootstrap and then this is only going to take a few minutes and then we'll hop right into this component right after in the next guy. So let's go ahead and in this render function we want to add the parent did with a class name of row and if you want to see if you want to see where I'm getting these if you just search bootstrap and then you go to Well if you go to get bootstrap dot com slash docs this will be in the guidance below if if it doesn't bring you here for you reason if this link is outdated. Just go ahead and google bootstrap docs and it's going to look something like this. So basically we've done a little bit of this before but using React Straut. So we need a row and we need some columns. So let's get out of that and I'll just have to follow along with me. So back in the cold we're going to make this parody of a Rohner newsletter component and then we all these both to be rows here so the first one we need to be less so what's the call medium 3. [00:01:31][90.6]
[00:01:32] And then we want this one to be to fill out the remaining 9 so call and the 9 and if you remember how this shop works the grid system. There's an there's 12 as the fill up to 12 sites a row is equal to 12. So we're saying 3 plus 9 is 12 that makes up for our grid there. Now if you say this to the app you'll see that we have we have our main content Sooke and where it needs to be and then we have our archive. Now we have our data here but let's make this gate thing a little bit bigger. So it kind of resembles what we see here so let's go to our code and we can do this pretty simply just by adding some style into our div here. With this let's just say some inline styles for now we'll be getting rid of these later on. The only reason we're doing this right now is so we can have a better view of what we're doing. So we don't get thrown off too much. Well if you want to react functionality so let's say style is equal to double curly braces Amotz just say with is 12 pixels and make sure you type this right. So with 200 pixels and then height. I'll leave that out for now and just get background color for background color of sky blue. Now we say that Galactik Yaffe you'll notice we have our box here but it's a little too wide and it actually looks like it's not wide so let's say what's made this a hole and what's actually give this. Let's give them some bootstrap straps as well. [00:03:12][99.7]
[00:03:12] So it's a class name has evil to call him will say to them for our newsletter archive. We can just throw this in here and say classily is equal to call him the ten I'm going to back to this that and that now we can go back to our top here as you can OK. So you'll notice that with bootstrap it's going to do something like this it's going to give us a space here which we don't want. So let's actually get rid of these straps I was just for this part what we just typed out and let's let's just stick with the styles here. Give us a hide and pixels wall. This should give us a solid solid view for us we love it and you'll notice we have a box here we have our content and we have her archive component so that's basically exactly what we want just a nice guy so we can view our items in the way they kind of look on the design here without taking 20 hours to implement the design. So let's go ahead and hop into the next guy now and throw in the content the newsletter content component and let's push our Khodro quick or not push it and just commit it so that is good at good commit. I must say added some basic temp styles temp for temporary and we'll talk into that next to you now. [00:03:12][0.0]
[190.3]