New Carousel Slider in Bootstrap 5

everyone bootstrap 5 has some beautiful components out of the box in this video we will look at this carousel slider it has these images in the background and you can flip between them with these controls and then we also have these indicators to see which one we are currently looking at and the text and the button are actually captions of this carousel so if you want to see how you can use this how you can implement this make sure you watch all the way to the end okay so i have opened up my code editor and i've created a simple project here just an html file which is also linking to a custom style sheet here because you know with bootstrap sometimes you have to write some custom styles right for now it's empty we want to create this carousel now this is a more complicated component right so bootstrap gives you components out of the box like a button but a button is easy to create from scratch these more complicated components like a nav bar or carousel or a modal right card accordion component all of these bigger components it's easier if you just go to the documentation and just copy their examples and then modify it to get exactly what you want right because you're not going to remember all of the classes that you need for a bigger component like that right so that's what i would do in the real world let's actually do that here as well now be careful when you google for bootstrap docs because you're gonna get older versions right so here the first link is actually linking to 4.1 right and this one's actually 5.0 and i'm actually looking for 5.2 right when you're watching this video you may already have like a newer version that doesn't matter because it's it will stay the same for the most part but make sure you get the version number that you're using so then here you can see all of their components that you get out of the box razor navbar um carousel i would definitely just go to the docs and just copy their example right so here they have examples and usually they have like a basic example so we can we can start there so i would just copy this right and then i can just paste it here i'm already linking to the bootstrap libraries right both css and javascript so when we do that nothing uh we don't see anything yet well except this uh icon here for an image that cannot be displayed because it's linking to a source that does not exist so we might as well just use the actual images right off the bat so i'm just going to copy that from my notes here okay so i have copied in the images and if we look at the structures to see what we have so far so we have this div which holds everything and you can see in the background it was already going to the next one right so that functionality of displaying the various images or items right carousel items is what they're called that's already working so at least one of the carousel items needs to have the active class or it won't work so by default that's the first one that's going to be with which it starts right so when i load the page this is the active one it also has an id and this is necessary because we're going to have some elements that can be clicked and a bootstrap is going to do something when there is a click but it needs to know which carousel something should be done for because we could we could technically have multiple carousels on the page alright so here we could call this something like hero carousel because it was in the hero section okay so this is a very basic carousel now the obvious problem right now is that the images are way too big right their height is not constrained so you need to do that yourself right so this is one of the one of those things that bootstrap does not do for you you have to do it yourself so we need to write some custom styles so we need to style both the item as well as the individual image so i like to give them their own custom class so that we're not interfering with the styles of bootstrap so i'm going to give each item a class of c item and each image right these are bootstrap classes but now we're gonna add our own class c image okay okay so then we can constrain their height their image the images are sitting in item so we can say that each item should be let's say 480 pixels tall and when we do that you can already see that something changed right but the images are still as tall as before it's just that they're getting cut off now so what we can do is we can say images you should be 100 of your parent element right so then their height will actually be that now when you work with images and you start changing their heights and widths often they become distorted because you're you're sort of changing the aspect ratio right so there is a property here called object fit that you usually want to use when you start playing around with heights and width of images if you set it to cover um it will look good again right so their their dimensions are going to be um like their aspect ratio of the image will match the aspect ratio of the area in which you're placing them right so it will do that by cutting off part of the image okay now here in the example they're a little bit darker than here right so we can also do that with css right so bootstrap does not cover everything as you can see here with filter brightness as well we're still writing quite a few custom styles so it's very important that you understand and have mastered css itself so check out my professional css course the link is in the description because that's exactly what you will learn right especially things like flexbox by the way right so you can easily learn filter brightness but there are more complicated things like layouts okay so this is already looking pretty good so now um we want these back and forth buttons let's see how they do that that's this is how i would do it in the real world so now i want something with controls right that's called controls those are these things and you can see the extra elements that they add and usually you can just copy and paste it and it will immediately work right so these two buttons i'm gonna copy them and i'm going to paste them below the carousel inner let's see here below the carousel inner and i think that should already work or probably not because it needs to match the id of the hero of this one right so here they they're using data attributes because when you click on the button they need to know okay so you want to go to the previous or next slide but of which carousel so here we have to select this one right so we have to say hero carousel okay let's check it out okay okay so that was very easy so let's try adding um these indicators and that's actually the next part so indicators um we can already see is right here so i would copy this right so you're not you're not going to remember all of these classes by yourself like carousel carousel indicators carousel inner right so you have to open up the docs and uh just copy and paste some stuff so i'm just going to paste it right here on top or above carousel inner and then we have these indicators now we should be able to click on them as well and that doesn't work because i think we still need to use the hero carousel idea yeah right so pay attention to these data attributes and so now i have live server by the way so every time i make a change it automatically updates the page right so i don't need to refresh it it will automatically do that for me right so now when we click on this it works right so this is already looking pretty good and this is uh you know you may not want everything here but i'm just showing you this i think these indicators look pretty cool but maybe that's not your thing so now let's continue with the last part these are actually the captions so you can have a caption basically like a description of the image and they make it very easy to do that now in the example here with captions they have like a smaller um you know some smaller text here more like details here i was actually using it as you know a bigger text as and really drawing attention to it with a button in there as well and you can do that right so you ha right so each item can have like a description so it's so if you go in the carousel item there should be something with captions yeah so here we have caption red here we have the image in the item we already have that now we want these captions so i would just copy this i would go in the carousel items and paste it right here we'll do it for the first one first and then we have this caption right so then we can style this to make it bigger and more uh and add a button but it's basically just a caption so very quickly i will style this with some bootstrap classes i actually don't want this to be an h5 because it's not going to be a heading it's just going to be some text discover the hidden world and then here we have the actual heading the aurora tours this is going to be an h1 because it's going to be the most important heading on the page and then we also have that button i will give it a class of btn and then also btm primary book a tour okay so then we have this and now we need to make this bigger and we need to position it more upwards so with carousel caption the entire caption should move upwards uh what we can use is one of those offsets so if you had these are positioned absolute so you can use top zero and it will sit zero pixels from the top well there's gonna be some space but that's how you can get it up here and then we can simply add uh some margin on the top so that it sits a little bit lower right and then we can go to the element below there and we can add some more margin on the top so it's positioned even more even lower um and we can change the font size of this one from size to three and it should be uppercase so we have a utility class for that uppercase and let's see so then the h1 should be much bigger we have a display class for that the font weight should be bolder and the text should be capitalized okay and then the button let's see the button should get padding on the horizontal axis on both sides so you say px or vertically as well but a little bit less so we say py2 the font size in here should be five and there should be some margin on the top right so then let's see let's compare it looks the same yeah looks the same right so very easy to do very quickly to do with bootstrap if you have to do this with with normal html and css yeah that would be a lot of work right i will quickly do the other captions as well for the other parts here i will just copy it for my example here because it's the exact same okay so i copied it from the example because it's the exact same and that's how this will look right now here here i was actually using a modal right so if you click on it it actually opens the modal if you want to learn about that i have a whole crash course here on my youtube which will teach you all about bootstrap 5 check it out by the way you do have to pay attention to responsiveness so if we look at the first slide here you can see that the carousel keeps looking good but the captions they do get removed after some time and actually because i copied these over that doesn't happen for the other ones because i already changed that and this is actually what we want they should they should they should stay here they should not they should not disappear the reason for that is if we look at that first carousel item or and then the caption so they include these two classes by default so that means display none right and then right and since bootstrap is mobile first it means on mobile mobile devices it's not going to be displayed and then from medium sizes and onwards and bigger it's going to be display block basically undoing the display knot right so it's only going to be displayed now on wider devices right on medium and above right if we always want it to be displayed we can just remove these two classes and now when we when we uh yeah when we pay attention to the first slide it will it will stay here right and by the way if you were wondering in what i copied here these are for the model right so these data attributes here for this button and this one as well this is all necessary to open it up like this right we're not using it here but maybe you were wondering about that well then check out that whole crash course video by the way if this was helpful i'd really appreciate it if you could like and subscribe also check out my courses on css and javascript if you want to take those skills to an advanced level because in there we will build some beautiful real world projects from scratch so you can see how everything fits together and really master css or javascript and i will also release other courses soon like react and node.js so if you want to be notified then make sure you are subscribed to the email newsletter you can find the link in the description thanks for watching and i hope to see you soon

Channel: ByteGrad

Views: 62,640

Keywords: bootstrap5, bootstrap 5, carousel component, carousel slider components, bootstrap 5 carousel slider, caroussel, carousell, caroesel

Id: zVjAA6UxvtU

Length: 13min 38sec (818 seconds)

Published: Thu Sep 22 2022