7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 19Length: 1.8 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

1.4 Adding Bootstrap

So yes, it is true that we do have a basic React app up and running. But it's a little plain, it's a little ugly, and, as I've said many, many times before, for many, many years, I am not a very big designer. But what I can do, is use Bootstrap. So that's what I'm going to use in this course to give a little bit of flair to our application, and honestly, it's going to help us give it a little bit of organization and structure as we go, to kind of make it at least look reasonable. So the way that we're going to integrate that into our application is actually quite simple. We're gonna go to getbootstrap.com. We're going to head down to the Get Started link here, so let's go ahead and click that. And this will take you through the introduction of a lot of the basic stuff that you can do with Bootstrap and how to use it. But all we're really gonna do is two steps. We need to include the CSS, as well as the JavaScript. So I'm gonna come over here to my CSS and I'm simply gonna click Copy and put that into my clipboard. Then we'll come back over here to Visual Studio Code, and we're gonna come back into our index.html file that was in your public folder if you followed along and created this the same way that I did. And I'm simply going to come into my head section here, and you can pretty much put this anywhere you want. I like to kinda put it [SOUND] semi towards the top. So we'll go ahead and paste that in there. So as you can see, now I have a link to a style sheet, we'll go ahead and save that. We'll hop back to Chrome. And then we'll grab the JavaScript here. So go ahead and copy that to the clipboard, head back over to Visual Studio Code. And I'll come back into my body now. And down at the very bottom here we'll go ahead and paste those three script references into the bottom section of our body. So now we can go ahead and save those changes, we'll save that. And if we save those and come back to our React app you're gonna see, maybe you'll see a little bit of how this has changed a little bit, hello guestbook, but we can play with that a little bit more if we want. So actually if we come into Visual Studio Code, and we'll go into our app JS here, and in this div here we'llsimply give it a class. Now, If you are creating React apps, when you are creating these components which app is, you can't just say that this is class equal to container, which is a class defined within Bootstrap. In order to define elements that have classes, or in many times actually attributes, you are going to use the specialized ones that are kind of defined by React. So in our case we're gonna need to say className equal to container. And then within here we'll maybe say that this is going to be an H1. Just to give it a little bit of flair we'll say, Hello GuestBook. Now, we'll save that and over here you're gonna see that it reloaded. And because it's in a container, and because it's an H1, it kind of moved it into the right a little bit, gave us a little bit of spacing there. And you can see that we're starting to get these styles that are defined by Bootstrap, which is actually pretty nice. And we're gonna to take advantage of that quite a bit, we'll be using rows, and columns, and spacers, and buttons, and all sorts of cool stuff like that throughout this application. And as we need those I'll go ahead and mention them and what they're doing. But this is gonna give us a little bit of a head start as far as the design of our application. All right, so now that we have our Bootstrap library ready to go inside of our React app, let's go ahead and get into the world of React Hooks.

Back to the top