Carousel Slider Using Bootstrap 5 Alpha - Carousel Slider Tutorial

hi and welcome back to this channel in today's video i'm going to show you how to add a carousel slider with bootstrap version 5. in the previous video i showed you how to add this responsive navigation bar and now in this video particularly i'm going to show you how to add this slider as you can see here so with the images sliding and then this text on the images here so the first thing we need to do is to go to bootstrap version 5 website and we are going to copy and paste the carousel slider code already designed by bootstrap so click on docs click on component and scroll down here you have carousel and when you scroll down you have a list of all the codes that you would want to copy and paste on a particular project for example here we can have a slider with only slides or you can have a code where you'll be able to have a slider with controls or a slider with indicators but as for us we are going to have uh copy this code here with captions okay so all you have to do is to click on the button copy and then paste it inside your project so i'm going to close this come back here so now after you've copied and pasted this version of code that you we have taken from bootstrap version 5 website we can now customize this code in order for it to look like what we want it to look like so the first thing i'm going to do is to add an image okay so i'm going to say images so i need to know what image am i going to put here so let me go to my project uh directory in images folder i have all the images in my project so i'm gonna choose image eight so i'm gonna say image eight here just click on it so after doing that i am now going to add another div that will allow us to put the buttons on the slider so i will say div class and this particular class i'm going to call it a slider button like this and inside the div i'm gonna add a button tag so for this class i will say button and at the second class i will say button one and uh here i will say our services let me just copy this and paste it down here now this button two and let me remove this text and i will say get a quote for example so you can put any text that you want on these particular buttons as for me i'm choosing our services and get a quote so i'm going to do the same thing okay uh attaching the image and then add in the button to the other carousel items okay so i will copy this and scroll down to the second carousel item here then paste it like this the image i'll add another image i will say images which image let me say image 9 for example for the third carousel item i will do the same thing i will copy and paste the slider button and then add the image like this let me say this then save so that is it concerning the html part of my code so now if i refresh the page as you can see yeah i have the slider so now i'm going to add some css code in order to customize the slider so the first class that i'm going to style will be carousel item and i will say height or 100 vh minimum height 300 pixels background for no repeat scroll center scroll like this now say webkit background size let's say cover or i should simply add a background size like this and say cover so the second thing i'm going to say um let me say this and refresh the webpage okay now this is how my slider is looking like so um i want to add some um background overlay on the on these images so what i'm going to write as carousel item again now says colon and before like this content display block position absolute top zero left zero bottom zero as well and right zero so the color so i would say background this is actually going to be the color of this overlay i'll give you the color black and add some opacity let's say 0.7 so this is going to add some overlay to the images yeah as you can see here now we have like a dark overlay in order to make sure that the text is going to show properly so next class we're going to add is going to be the carousel caption so the caption here is the text showing on the slider so i wanted to bring it a little bit at the top so i would say button 180 pixels and pardon what pattern i'm going to say padding left and save yes so now as you can see the text has come a little bit at the top so i think i need to add some padding right as well and i'll say 100 okay so this next thing i'm going to say carousel caption h5 i need to give it a font size let me say 100 pixels then save okay this is how it's looking like uh what should i add i think i will add a font weight so i need it to be a little bit bigger and thicker so let me say 700 like this then refresh yeah now it's looking a little bit okay the second and the next element to customize will be the paragraph so i'll say carousel caption still and the type p i will increase the font size of the writing as well um 18 pixels i guess this will be okay and then a top then refresh all right then finally i'm going to slide style the slider button class margin top 30 pixels next i'll do slider button button like this um let me say background color yeah i'll select this one this red and the color of the text will be white border radius i don't want any border radius so i will say it will be zero then the padding i will say 1.5 and 2 ram and also i'm going to increase the font size then refresh okay not bad uh this here is a class so i need to put the period in front then when i refresh this is how it's looking like okay here i need to write color refresh yeah um i'll say imagine right 15 pixel to bring some space between the two buttons yeah so finally i guess i'm gonna style a button to say color then i'll say background color will be white so i'm going to give this second button a different background color yes now this is how it's looking like so i can change this text here instead of writing first layered level i can write coding coding reverb for example oh here i can say carousel slider well thanks for viewing then refresh all right so guys that was it concerning how you can add a slider to your web page okay you can after creating the navigation bar you can add a slider using bootstrap so i hope this video was informative and thanks for viewing please don't forget to like and subscribe to this channel let's meet in the next video

Channel: Coding River

Views: 31,747

Keywords: bootstrap tutorial, bootstrap carousel responsive, bootstrap carousel indicators style, bootstrap 5 new features, bootstrap 5 project, bootstrap 5 tutorial for beginners in hindi, bootstrap tutorial for beginners 2020, bootstrap 5 alpha carousel slider with caption, bootstrap 5 carousel multiple items, bootstrap 4 slider with text animation, image slider bootstrap 4 tutorial, how to create carousel slider in bootstrap, bootstrap 5, bootstrap 5 carousel slider with indicators

Id: D1r6OM8TdII

Length: 9min 21sec (561 seconds)

Published: Thu Sep 03 2020