How to Use Bootstrap in React - Carousel Image Slider With React-Bootstrap

hey what's up you guys in today's video i'm going to be showing you how to build this little react application using react bootstrap so basically this is a tutorial on how to install react bootstrap and how to use bootstrap inside your react application this is just one component here it's the bootstrap carousel component basically it's just an image slider we're using as a hero image slider and i just imported several images that i pulled from pexels.com and i'll show you how to import everything and set it up how we like it so this particular one it switches slides every one to two seconds and has the arrows here that we can navigate through the slides manually and also down here at the bottom it tells us what slide we're on and we can also navigate by clicking on the links below so and here is our h1 here and some text i'm going to show you how to customize everything and of course it is fully responsive with bootstrap it's a great feature of bootstrap so if you're ready to get started i'm going to show you how to do it from the beginning it's going to be a quick video to follow along for complete beginners so if you're ready to get started let's jump in all right guys to get started i am in vs code i'm going to press the control back tick button to open up my terminal and i'm on my desktop here i'm going to press type in create mpx create dash react app and i'm going to name my application bootstrap slider okay press enter and this will only take a moment you guys all right looks like we're ready to go i'm going to pull over my file that we just created all right i'm going to close this and to get started i'm going to press the control back tick button and since we're using bootstrap let's go over to our browser here and i'm just going to search for react bootstrap this looks like it right here so let's click on the get started button there and what we want to do is install the bootstrap package so i'm going to copy that and come right over here and install that we'll check in our package.json file should be a really quick install bootstrap rack bootstrap okay there we go looks like we are all installed so what we'll do next is let's clean up some of these files that we won't be working with i'm just going to delete those once we delete those make sure we go in here we have to get rid of a few of these things otherwise we will get some errors when we try and start our server so we don't need all this this is just a boilerplate code that react starts you with and we'll leave the app.css we'll leave everything just like that let's go ahead and start our server with npm start to see how everything is looking yes well it should just be a y that i left in there we'll go ahead and type in the whoa hello and let's see what this there we go perfect seems to be working properly so let's go back into the react bootstrap website what we need to do is grab the minified css text here and here it is right here right under css so let's copy that go back to our code editor we won't be needing that and i'm going to put this in the index.js file right here like so and what that's going to do is going to grab all the styling for our components that we're going to use so back on the react bootstrap site i'm going to go back i'm going to click on the components tab here and what we're going to be using is the carousel component and they have several different options here i'm going to scroll down to this one here it's a interval changing after one second the slide changes so i'm going to copy this i'm going to cruise back over here to our terminal or to our code editor and i'm just going to paste it right in actually let's create a components folder just to keep the structure nice and easy i'm going to call this hero slider.js okay and i'm going to just generate a functional component here and then within here we will paste our carousel and save there we go looking good so right now it's not going to display properly if we look back over there it's not pulling over any images oh of course we forgot let's import this here and this was hero slider go ahead and press enter so it auto imports at the top and we're getting some errors as well so what we need to do is here we're going to import carousel from react bootstrap okay so that should take care of all those errors they're still going to be we don't have any images loaded here i'm not sure if these will be working or not so let's go have a look okay so the component seems to be working correctly correctly we're just not seeing any images so let's go pull some images i'm going to go to pixels.com to grab some images here uh let's see see if it pops up all right that looks good what i'm gonna do is just copy this image address i'm not gonna download them and um put them in my file or anything like that i'm just gonna make this easy so under this first source we're gonna change that right there and i'm gonna paste that in then let's grab another grab some more two more images okay that looks cool and i'm gonna paste this one in right here this is the second slide and let's go back what else we got cool ah these look cool all right and let's copy this one this will be number three so let's go to our react app and see how it's looking cool so there it is you guys it's taking up the whole screen here and we have our buttons here and these are our labels down here it says first slide label this is just going to be an h tag and then a p tag and that has our our slide links that we can also click on so if we want to edit this this is first first slide label we can change this to this is the first slide and if we look back over here there is our text changed okay so and what if you want to add another picture because these are only three so let's go grab another picture what if we want to add this one right here so let's copy this image address let's go down to vs code and this carousel.item is what the slide is so basically we can just highlight that and i'm going to copy that down and i'm just going to paste in here the image address for our fourth slide and of course this will be the same but we can actually change this to fourth slide label okay so let's go back here to our react app and notice now we have four slides that's our second one boom third and fourth slide label so that is how the react carousel works now what if you want to change some styling in here great question let's go back here and what we could do is so we have this d block just to make it easy right here let's go into our app.css i'm going to press the ctrl a and here to select everything i'm going to delete it since we already deleted everything out of our app.js and i'm going to grab on to the image here and say we want the let's say the height we want it to be 600 pixels so let's go back here and there you go so with react it already has i think has that stretch on there so it looks kind of funny so we can change the styling if we'd like if for some reason you you type in your your css over here and it's not showing up correctly on your screen sometimes you do need to add the important feature right there for css and basically it makes that line of css more important more so than the others and it'll actually disregard all their css rules so and it just goes to this one so let's go back here we didn't have to do it in this case but that was you know just in case it doesn't work on your machine so there you have it you guys and hey what if we want to add a little navbar and react for the bootstrap so that's cool let's go back here components where's our nav bar there's nav bar and we can grab any one of these um here yeah let's grab um grab one this one's kind of cool let's grab cool let's grab this one here so i'm going to copy that and in our components folder let's create a net whoops let's say nav component whoops component dot js okay i'm going to type rafce to generate my functional component and in here i'm going to paste this and let's bring it over there we go okay so navbar is not defined just like in this first one what we need to do import navbar from cloud component or sorry not solid components from react bootstrap used to doing style components it's likely going to give us a whole lot more errors here uh let's have a look so navbar is not defined let's see what else it's looking for here bar is not defined oh it didn't pull it in let's say import let's see nav nav bar from components okay so here are all the other errors it is telling us we are running into so what we can do here is put a comma and basically i'm just going to type in everything that's listed down here so container looks like off canvas nav nav drop down and we'll see what else we have here form form control button i believe that should be all of them cool that took care of all of our errors let's just refresh that boom there you have it you guys is our nav bar and everything is looking properly of course all the styling is all out of whack all the none of the colors match but that's not the point of this video in this video i just wanted to show you how to use react bootstrap and to import a carousel into your application so i hope you liked it guys it was a quick video i know it's very basic um this is just if you like using bootstrap personally i'm not a huge fan of it i like to customize everything myself so if you like to do things the hard way like i do then bootstrap may not be what you want to use but if you like you know just that basic look here just to put something to production really quickly then bootstrap maybe something that you want to look into hope you liked it you guys give it a like if you did down below and consider subscribing to my channel i'm going to be putting out some more content just like this in the near future i think the next video i'm going to show you how to do this uh completely from scratch from the beginning so without a library like bootstrap or tailwind so hope you liked you guys thanks for watching i'll see you on the next one

Channel: Code Commerce

Views: 17,828

Keywords:

Id: 2tUgOM8rjJI

Length: 12min 12sec (732 seconds)

Published: Mon Dec 06 2021