Introduction to React Bootstrap
Using Bootstrap with React is one of my favorite things to do because it's combining a library and a framework I really like using.
In this example, we'll be building out this using React Bootstrap, and we'll be building out some components in our React application that utilize Bootstrap.
If you haven't heard of me before, I'm Adrian from Australia. I do videos around design and development, so if you haven't already, hit like and subscribe and let's just jump straight into it.
Project Setup & Installation
Before we begin, we need a React application, and we can do this in a number of ways, but one of the easiest is just to use Create React App or CRA. What I'm going to do is open up a new terminal and type in npx create-react-app and the name of our application, in this case react-bootstrap-tutorial.
Once this is finished, we can browse directly into it in VS Code, and in here we're going to install a couple of extra things. The first thing I want to do is run yarn add bootstrap and also maybe react-bootstrap. These two will be added to our package.json and we'll be able to start using them immediately.
To start our React application, I'm going to type in yarn start. This will open it up in a Chrome window, and I'm going to just move it here side by side.
Importing Components and CSS
We're going to close off package.json and the console, and we're going to browse into src and to App.js. In here we can start importing React Bootstrap and using it and seeing the live changes apply in our browser.
What I'm going to do is I'm going to import a button. So in this case, I'm going to import Button from react-bootstrap/button, and we're going to place this straight here into our code, below maybe the logo. So I'm just going to place it in here like this and we'll select this as maybe "Test Button" for the text. Now when we save this, we'll see that we should get the button here appear, but it doesn't have any styling yet. If we right-click to inspect it however, we'll see that it does indeed have the Bootstrap classes in here.
So what we need to do now is import some of a Bootstrap CSS, and we can do this quite simply. We only need to import the CSS directly here into our component. And what I'll do is I'll import bootstrap/dist/css/bootstrap.min.css, and this will import all the styling we need to get us started. And we can see that our button has already updated and we can see that take effect. So what we're going to do now is have a look at how we can start customizing this and adding in some styling directly from Bootstrap into our React application.
Code Cleanup & Import Methods
Let's clean up some of the code we have here because we're not utilizing any of this, and we want to really start fresh. I'm just going to get rid of most of it here and we'll just have our test button here right in the center.
Now the first thing you'll notice is that our fonts have been updated to I think Roboto, as well as some of the margins and line height and everything you would expect you would get normally when you're importing the Bootstrap library.
But the other aspect to this is the way that we're importing our button. There's two different ways to do it. The very first is to import the button using the forward slash here where we're only importing this single component. But the other way we can do this is import the button here in curly braces, and we don't need the end of it. Unfortunately, this will import maybe the whole library here, but it's sometimes a little bit easier in terms of the syntax, and this works too.
Implementing Alerts & Breadcrumbs
What I want to be able to do is import a number of different components to give as an example. And the next one I'd like to import is an alert. So let's import alert here from Bootstrap and let's place it here just above the button. Let's pass it Alert and in this case, we're just going to say "This is a button." When we hit save on that we can see that we've got our alert here but it doesn't have any styling yet. We need to pass in a variation. So let's do variant. Here, let's type this in. The variant, and in this case we've got a few different types, but we're just going to start off with primary. When we do, we can see that the label has the blue styling here. We've got all the styling that we would normally get when we do Bootstrap. So secondary goes gray, success will go green, and so on and so forth. But it gives us an example of how we can place in the alert example here.
Another thing we can do is maybe breadcrumbs because normally we have this above a header. So let's actually import it now. For the breadcrumbs we will need a couple of items here. And the very first one will be the Breadcrumb class here. So let's pass in Breadcrumb. And in order to use this properly, it's got a parent here and then it's also got some children, but the children are a little bit different. They're actual items, so it'll be Breadcrumb.Item. Now in this case, I'm just going to pass in test and let's see what we get. So we've got our test in here, and I'm going to pass in maybe one or two more. So test two and test three. And we can see that they're applying automatically.
We can pass in other things as well, like props. So for example, the last item here could have an active prop, and this will automate to true, but in this case when we hit save on that we should see that it goes gray because it's the current one in active state. And we can apply different things using React for this, but it gives us an idea of how we can utilize breadcrumbs in our Bootstrap application here.
Building a Bootstrap Card
The next thing I'd like to do is maybe have a card. Now cards will require a few different components here. So let's place in a card. And what I want to be able to do is maybe have an image or something like that with a couple of bits of text and maybe a button as well. So we can do all of that.
Let's first create our card in here. Now the card has a couple of items we can pass in. So we can pass in Card.Image, and this is just a single component. We can also create a Card.Body, and for this we can place a couple of items in here. We can do a Card.Title and maybe also a Card.Text. Let's place that in here. So let's do Card Example, and then let's type in here for our text, "This is an example of React Bootstrap cards", and then we can also even have a button here, and we can use the same button we had before. But in this case I might add a variation to it. So let's pass in this variation of primary over here, and let's select maybe... uh, what else can we have? Maybe have some text here saying "Read more".
Great. So I'm gonna hit save on that. And I can see we've got a bit of an error here, and this error is because we're not closing off one of our items probably here so let's have a look at what this is. Ah, this was weirdly renamed, so I'll take that out and finally let's make sure that we're spelling Card properly up here.
So now that we've done this, we can see it's been imported. The only issue here is that the text is in the right color, and this is because we haven't actually set the color here and Bootstrap's actually being overwritten by the React application's color, which is white. So let's pass in color here to be black once more, and we can see that it's applied. So that's really cool.
We also haven't passed in an image URL, so in this case we might just use something generic or automatic from an online URL. In this case, I'm just going to use this site over here to grab a random URL and we're going to pass this into our card. And we'll just do this with src and paste it in here. So let's hit save on that and that should pop up. And it's a little big, maybe a little bit too big. Let's see if we can make it a little bit smaller. I think that's looking good. So there's our card and that's looking good.
Applying Utility Classes as Props
Uh, we do want a bit of a margin. So normally we could apply this as a manual class here... sorry, a manual style here, such as margin-bottom: 15, but sometimes this isn't the best way to go about it. So the other thing we could do here is pass in a className. And in this case, what I want the className to be is just mb-3, which is three units of margin on the bottom, and this will apply automatically based on the Bootstrap classes that are provided through Bootstrap, which makes life a little bit easier and means that we don't have to use as many styles in our code.
Now that we have this, let's have a look at maybe creating some forms. So what I'm going to do is I'm going to import Form here from Bootstrap, and let's actually create this here above our card.
Now, like cards and breadcrumbs, forms have a number of subcomponents here that we can utilize. So the very first thing I want to do is create a Form here with a FormGroup. And for this, we're going to have a few items in here. The very first will be a Form.Label, and this will be the item we want, so in this case maybe Email address. And this will be a simple one where we have maybe a form input. So let's do Form.Control. In this case, what we want to do is we'll do the type as email. We'll do a placeholder here such as [email protected] and let's close that off without any children there.
And finally, let's do a Form here with some Text. And in this case this text over here will be a little bit muted. It'll just be something that we want to essentially have as extra descriptors for people who are reading about what this is. So let's do, uh, "We'll never share your email address, trust us."
And let's hit save on that. Now I can see that something weird has gone here with the rename again but I'll hit save once more, and there is our form and it looks like it's applying okay. The placeholder doesn't seem to be showing up because I haven't labeled it properly so let's do placeholder here. And let's also maybe make the height for this image a little bit smaller so we've got a bit more room to look at it. So there's our placeholder, there's our text, and there's our email.
Of course, we can put in more items in here as well, such as maybe a password or a username or something. So let's actually copy out this entire group. And for the next group in here let's maybe just do a label of Password. We'll change the type here to password as well, and maybe the placeholder here to Password as well. And we won't have any text for this example in this case.
And finally, we'll want a button, and we've got a few examples of that. So I'm just going to copy this one over and we're going to place this here below our form group. And maybe we'll just have a secondary class for this and we'll have this as maybe Login. And finally we'll want to add a type to this. So in this case, what I'm going to do is I'm going to pass in type here as submit.
Now the other thing that is useful when we're doing forms in Bootstrap is to make sure that we're actually passing in an ID so that if we select the label, it auto focuses on the input. So we can do this quite simply. Let's jump here into our form group and add a controlId. In this case, I'm going to do formEmail as the control ID. And in this, we should be able to have a bit more control over this. So now when we select this, we can see it's auto focusing on the username.
And if we add another form control here and this will be formPassword, this should automatically focus in on the password now when I select it. So that's looking really good and I'm pretty happy with that.
Building a Responsive Grid Layout
There's also no such thing as a good Bootstrap website without lots of containers and rows and columns. So let's take a look at how we can utilize these in our example over here.
What I'm going to do is I'm going to import Container, maybe Row and Column here from Bootstrap. And we're going to utilize this here in our example. And what we're going to do is maybe add a container to our entire item here. So let's do container. We're going to wrap everything inside of our form here, as well as maybe even our button here at the bottom, inside this container. And this will make it fit just nicely and utilize all the room that we have.
The next thing I want to do is I want to create some rows here for our email and our password for our groups here. So I'm going to pass in Row. And what I'm going to do is maybe I'll do one Col here for the very first lot of items in our group for our first group, and I'll do another one here as another column for our password. So if we make sure that the indentation looks a little bit better, we can see that this is now in a single row with two columns here, and it's fitting in nicely and then it's moving on to the next lot of items here which are all nicely wrapped in a container and working really well. So we can see when we zoom out, they don't expand outside of that container.
And we could probably do a number of other things here too. So for this container, we could pass in a fluid class. Now if we apply this and resize, we can see that it's utilizing the maximum room we have here, but if we take that out, it's just a regular container utilizing just the container max width here, which is usually about 1140 pixels.
The next thing we can do is maybe also add some responsive elements to this. So what I'm thinking is maybe let's have a look at doing columns where they respond depending on the media query they need to respond to. So these columns here, let's pass in maybe md and md. Let's hit save on that. We can see they've already collapsed, but if we expand them out, we can see there they haven't on any viewport above md. So it just gives us an example of how we can do responsive designs for our columns and rows inside of our Bootstrap React application. It makes life a little bit easier, right? Rather than adding all these classes in, we can just pass them in as props, but it will take a little bit of time to learn which props we can pass in and which items we do have to import.
Conclusion
I hope you enjoyed this video on React Bootstrap. I've got lots of other videos on both React and Bootstrap in general, so check those out. Otherwise, if you like this video, hit like, hit subscribe, and I'll see you in the next one.
Thank you.
