From the course: Building Production-Ready React Apps: Setup to Deployment with Firebase

Add Bootstrap 5 to your single-page application

From the course: Building Production-Ready React Apps: Setup to Deployment with Firebase

Start my 1-month free trial Buy for my team

Add Bootstrap 5 to your single-page application

“

- [Instructor] In this class, we start from scratch. Not completely though. We use the same project we just created with the React CLI, and now we're going to add Bootstrap into our project. Bootstrap is a popular HTML and CSS library, that allows to quickly and easily create responsive layouts. Now we're going to see how to add this to our projects. There are different options to get started with Bootstrap, we're going to head to the Docs, the documentation section, under getting started. And here, in the download section, you're going to find different options in order to add Bootstrap to your projects. And the easiest way to get started with Bootstrap is to use the CDN. CDN is short for Content Delivery Network, meaning that we don't need to download all the physical files to use the resources of Bootstrap, we're just going to use one link. So we're going to copy those two, this link and this script. We're going to copy to clipboard, and go back to our projects. So here you're going to find within inside the public folder, the index.html, and this is right within the head tag that you're going to place first the link, which is a style sheet. I'm going to change this settings, the display to word wrap, so we can read everything. So here we just added this link, and we're going to place this script, which is also from Bootstrap, I'm going to cut and place this one right before the closing body tag right here. And this will allow us to use all the resources, HTML and CSS of Bootstraps, including the utilities plus the JavaScript plugins. So we're going to make one test. We're going to see how we can use Bootstrap now, so we're going to go to SRC, find the root component, which is App.js. And we're going to start by running this app. We're going to see how this look in the browser. And this is going to be the starting template that always comes available, provided with every new application created with the React CLI. So we're going to remove a few things, because we don't need this logo, this rotating logo. I'm going to remove also the paragraph, and actually everything from line seven to 18, like this. We're just going to keep this, and instead we're going to create a responsive layout with a grid, because the goal here is to create an image gallery. So we're going to go back to the documentation of Bootstrap and find the section under layout and grid. And right here you're going to find an example as to how to create a responsive grid. We're going to use the same example here. We're going to add this built-in CSS class. I'm going to replace right here, so now we have container and text center, right below I'm going to add a title with the heading, and I'm going to add the text gallery. That's going to be the beginning of our layout, let's see how this looks. I'm not going to need this logo, so I'm going to remove this to silence this warning. And now we've got this starting templates, and there is another, some other utilities that you can use with Bootstrap, in order to add some space between the edge and this title. You can always use this built-in CSS utilities, so here mt, which is short for margin top. And add one value that can be from one to five, so I'm going to add five to add much space, enough space between the edge of my screen and the title. Here we go. And this is just the beginning of the layout that we're going to use to display our image gallery. There are a few things that we're going to use, I'm going to show you right now like the section that includes a large collection of components, responsive components, that we're going to use, for the development of our web application. So you'll see Bootstrap is a powerful front end library, and an excellent choice to build user interfaces fast, with a prebuilt, extensible grid system. It comes with a large collection of ready to use, responsive components, and easy to customize, and also a powerful JavaScript plugins to bring your projects to life. So as you can understand, we're not building everything from scratch. We'll use a lot of Bootstrap to build the UI of the project, because the goal is neither to write HTML code from scratch, nor to spend time with the CSS. As we go along, we're going to continue to build the UI with the help of Bootstrap. By the way, I suggest that you add this one to the bookmark, because we are going to use a lot of Bootstrap in the upcoming demonstration. So that's going to come handy for future reference. And if you have no, or little experience with Bootstrap, this is no big deal. You'll see that the documentation is very simple also, and the process quick and effortless.

Contents