Building a Responsive Carousel using React and Bootstrap | Beginner

hi everyone so today we will be making a carousel with help of reactant bootstrap so for the people who are using bootstrap for the first time there is a documentation for react bootstrap there you can go and start with the installation of the react bootstrap package you can use this command over here and after that you will also need to import the CSS for that which you can import it in your index.js or app.js file as you can see I have already imported a CSS in my app.js also I have installed the bootstrap package here so to make a browser let's head over to a react app as you can see here I just have a navigation bar so this is a navigation bar that I made in the previous tutorial so you can head over there and see if you are new to it after that we will just uh want a carousel so for that I'll head over to bootstrap documentation and in there under components I will find browsers so you can see they have uh got few examples like this is uh the basic one they have got controlled and also uncontrolled and few other examples so we will just use the basic one so now I'll go to my visual studio and inside the source folder I'll make a grousel page.js component so I'll do rfca and now we have a component in there I'll import this from react bootstrap and then I'll just copy over this piece of code and paste it under the div tag yeah so now that we have a browser page let's add this component to our app.js in here just add Carousel page I'll also need to import it so now let's test it as you can see we are not able to see the corrousal and that is because in our Carousel page if you go on to the source you will not see the images because we don't have these images whichever uh Source uh like holders they have given so for that what I did was I created an images folder and I have certain images here you can choose your own images I'll just use them for example so I'll just import those images I'll import image one from I've got that MN images folder so image1.jp G and then let's copy this line paste it twice for three images in our browser you can obviously add more and in here Ctrl d and three after that we will be changing these holders image one two and three so now that we have saved it we can see our browser is coming we have got next and previous icons also in place and this is already responsive so if I do big screen as you can see so our image is kind of overflowing so we will add some height to it so we can see it all in one page you can add your own CSS and there I can see um these bar indicators so I'll just show you some basic stylings so you can make your own browser CSS stylings so let's go over to visual studio code and in here let's first add some height to our image for that I am using inline Styles here so I'll add a 90 viewport Ctrl C okay this won't work as you need to put these in strings copy this do this for other images you can do it in CSS file too so save it and you can see so it has come up to like this after that you can keep your page content so this is just uh to show you that they are all in the same height now let's change this indicators so I don't exactly know the bootstrap documentation or what they have given the class name so what I'll do I'll do inspect element and then my developer tools I'll just um go over to this icon and when I hover I can see that this is called as Carousel indicators and click on there and then I want to know what these pieces are called so I'll again of course inspect and there we go there I am getting the name so I'll copy this name and then go over to vs and in here first I'll be making a CSS file so let's make that CSS and now we'll paste that so this is the class name we'll be adding additional styles so I want uh something of circular so I'll add a border radius of 100 percent and add a width of 10 pixel height of 10 pixel I will save this I'll go over to our page okay so it is not working that is because I haven't imported it yet so I'll import our CSS page don't forget to import your CSS page and save it and as you can see we can see three little dots over here also you can play around as much as you like and make a use of your styling so to make this look attack a bit better I am thinking to give a navigation bar some opacity so I'll go to our navigation bar and add some styling like opacity of 0.6 so I am doing this basically to get a more transparent navigation bar so that this image would show up a carousel image I'll save this and there we go so this is just a basic react bootstrap Carousel you can have your own styling CSS you can add a play around this and make some cool carousels so this is just a basic tutorial thank you for watching this video I'll see you in the next one

Channel: TechGirl Talks

Views: 13,941

Keywords:

Id: z_Yv8LVckAk

Length: 9min 13sec (553 seconds)

Published: Fri Jun 16 2023