How To Make Carousel and Navbar using Bootstrap

in this video I'm going to show you how you can make a Carousel and a number using bootstrap so here you can see this is the Carousel and if you press this one it slider button it slides and also after three seconds it automatically changes so let's begin so I have taken index.html and install.css let's take the boilerplate and name it to c a r u c l link it with CSS okay now as we are going to use bootstrap we are also going to use the CDN link or bootstrap search bootstrap 5 go to home include via CDN copy this paste it on top of our CSS file and then copy this and put it at the bottom of the body section now see if it is working H1 this is boots strap five font open it with the live server now it's working so we are now going to use the carousel go to Docs go to components and then carousel here you have different types of Carousel but we are going to choose this one so copy this to the clipboard we are going to take a header tag comment uh CaRu start Carousel end then paste okay we have copied copy this again and paste it so let's see how it looks there is no photo so we are going to link the photos I have already taken the photos images background one background background to three let's see how it looks okay now we have our carousel if it is moving yes it is moving and we also um we want five photos so we are going to um change something here we have three buttons here these buttons are these buttons okay these buttons so we need five buttons here so copy them paste copy paste now we have to change something here Carousel integrated database slide 2 this is going to take our slide to number three slide four and here it is going to be 5. it is starting from zero that's why we are taking five but writing four and then let's see how many buttons we have we have five buttons here now we are going to take Carousel item and add two more photos one two name it four and name it five okay one two three four 5. we have our five carousel and we want to add interval so we are going to copy this one and paste it here interval we are going to give three seconds let's see if it is working change it to Carousel item interval because of example interval interval interval okay now it's working it is moving uh three seconds so we had to change some IDs and classes to get it working and then you can change the interval by this is in milliseconds so 3000 millisecond is equal to three seconds if I put it one then you are going to see it is changing very fast so we want it at three milliseconds so and as you can see the photos are very big here so we want to do something we want the class to be um see our Carousel image size we have taken another class and we are going to do height set the height to 100 view height okay let me give it to here okay now each and every photo is was getting it uh okay now it is working properly we have our working carousel we have our Carousel now we are going to make the map bar to do that let's go here and we are going to put our Napper here and we're going to choose it from bootstrap search any vbar now we are going to choose which number we are going to use and then change it accordingly let's take this snap bar copy paste see how it looks okay now we are going to background color we don't want any background color right now let's see how it looks okay and we are going to write fixed down so the nav nav items are here we are going to put text White so that we can see them okay nature lover text white we're going to copy paste them text White we are going to remove the disable button and paste it twice services contact us okay we are going to increase the size of it so we are going to write not the font size not our brand okay so so here you go guys uh that's how you have you can make Carousel with numbers by customizing bootstrap

Channel: The Coder Next Door

Views: 7,843

Keywords: Bootstrap 5, react, js, javascript, css, webdevelopment, web development, html, carousel, navbar, fast, website, mobile responsive

Id: yhiQCQITyq0

Length: 12min 6sec (726 seconds)

Published: Sun Oct 02 2022