I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!
Highly recommend a place like GitHub where we can see your code. It is hard to go through the video to check if we have mistyped or misplaced something. Other than that, excellent tutorial.
If you are using the current bootstrap, (version 5.1) your carousel will not slide. this is because the data-ride is now data-bs-ride. Took me a while to figure that out
Thank you so much! I was starting to give up hope and out of desperation I checked the comments, appreciate you for taking the time to help the rest of us out.
I was following the tutorial step by step but my slider wouldn't show up for some reason. I checked the docs and the solution is the following: You have to type "data-bs-ride" instead of "data-ride". Same thing with "data-bs-target" and "data-bs-slide-to". Idk how it worked in the video tho.
Indeed, a well structured (albeit a bit too fast rendered) tutorial. Simple, elegant, effective. Friendly feedback: When I completed this project, Bootstrap 5.0.0-alpha1 was no longer available from the site; the latest version (as of Feb 2021) is 5.0.0 beta-2, and using it does not render the carousel the way it is demoed here. I had to "figure things out", and noticed that this beta2 version does NOT contain the jquery script reference on the starter template. This is the cause for the carousel to not rendered the way it's supposed to be. Therefore, I had to downgrade to Bootstrap 4.6.0 (which has jquery and popper scripts), and the challenge was solved. I think it's either a bug on the update or the Bootstrap gang just forgot to include the jquery reference on the beta2. Thanks very much!
I'm also using the beta, I realized if I changed the button tags to the styling got fixed. The bootstrap documentation is not updated to reflect this change. Took a long time to figure out what was causing the issue.
In 5:25 you write "data-ride="carousel" " and that got me crazy bc doesn't work for me. BUT i realized that writing "data-bs-ride="carousel" " works. Anyway, so much thanks for the tutorial (y)
Dude, this video just literally saved my rear. I thought I was updating a new project from bootstrap 4 to 5 but accidentally updated my live portfolio. With a slider being right smack at the top of my landing page, I had to dash to UA-cam to find a fix for not only that but functions like my hamburger button too. You earned yourself a subscription! :)
I really loved watching you code this . I am using bootstrap for a class and was looking to see how to activate the carouse template and how to apply the .active to the template to activate and make visible. Thank you so very much for your time.
Just append bs to the middle after every data. Example "data-slide-to" change it to "data-bs-slide-to". I did what the commenter Kris said here and my slider works now.
Hi, I am really enjoying this lesson. I have noticed you do some amazing tricks within Studio Code and I am curious how you do this. I figured out how you create a class with ".container" and then hit "enter" and it pastes in "
Hi Gary! This is a VS Code built-in feature called Emmet, which help you to write code faster. I hope this video will help you to learn Emmet faster. ua-cam.com/video/V8vizNQKtx0/v-deo.html
HELP pls, I followed your code, I got icons for "click next" > or click previous < I have also lower _ _ photos but when I clcik on em, nothing is happening instead carousel is moving himself in interval
Hi, thank you for your video!It works except that during transition to another picture, the whole thing drops down for one second and then goes back to the correct position. Anyone can tell what happen?
Nice tutorial and nice slider. Everything works nice except for when I add overlay-image, as soon as I do that the slide goes black, no matter what styling I apply. Could you help me?
I realize this vid is 3 years old but wondering if anyone can answer: Why do I see most developers using Swiper or Owl or some other carousel when they're also using Bootstrap that has the built-in slider? It looks and seems to work pretty good so why don't they want to use it?
Hello, can we make those background images dynamic so that we can update dynamically using like django. if you have an ides about it please share with us
I need help: I am a total beginner in webdev and not "allowed" to use the div element for an university class project. All code I find online is packed with div elements though, especially in combination with bootstrap since items are altered through the class attribute. Can any of you maybe recommend me a good alternative I could use instead of div, or do I have to come up with a whole new approach to coding? Thanks for the help!
I 'm assuming they impose that silly rule because they want you to explore semantic html elements: header, footer, nav, aside, main, section, article (and a few others). Look for semantic html on google or UA-cam. Just remember that sometimes a div is just the best choice (when it's used just for styling purposes, for example)
I don't understand why but my carousel is not sliding. Nor is the background color showing up. I tried changing the data-ride to data-bs-ride but it's making no difference
the overlay image css didnt work for me :( it doesnt display the image unless i set a width. edit: ok, just set width to 100%, along with his codes it will cover all the space of the slider div :)
Followed your tutorial but Bootstrap just won't work. I really don't know why. Saw something about data-ride should data-bs-ride but that didn't help either.
I tried to follow the tutorial to understand how these work but i get a very laggy transition between the slides, i see the gray and white areas swapping color for a sec and then it loads the second slide. I alsp tried on different browsers so at this point i suppose i did something wrong
I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!
Will definitely do
hey, im logging in the exact same code and it is not working the same for me, what seems to be the problem?
Highly recommend a place like GitHub where we can see your code. It is hard to go through the video to check if we have mistyped or misplaced something. Other than that, excellent tutorial.
Awesome 👏🏻
can you share the code you used to create the page showing in the video? thanks, great video
If you are using the current bootstrap, (version 5.1) your carousel will not slide. this is because the data-ride is now data-bs-ride. Took me a while to figure that out
thank you
Thank you because I got worried
Thanks dude for helping us out.
this is what i came for
Thank you so much! I was starting to give up hope and out of desperation I checked the comments, appreciate you for taking the time to help the rest of us out.
I was following the tutorial step by step but my slider wouldn't show up for some reason. I checked the docs and the solution is the following:
You have to type "data-bs-ride" instead of "data-ride".
Same thing with "data-bs-target" and "data-bs-slide-to".
Idk how it worked in the video tho.
Thanks! its works
Thanks
same lol ty for the help btw means alot man!!
big thanks
Thank you soo much! Had the same problem and your fix made it work like a charm.
Indeed, a well structured (albeit a bit too fast rendered) tutorial. Simple, elegant, effective. Friendly feedback: When I completed this project, Bootstrap 5.0.0-alpha1 was no longer available from the site; the latest version (as of Feb 2021) is 5.0.0 beta-2, and using it does not render the carousel the way it is demoed here. I had to "figure things out", and noticed that this beta2 version does NOT contain the jquery script reference on the starter template. This is the cause for the carousel to not rendered the way it's supposed to be. Therefore, I had to downgrade to Bootstrap 4.6.0 (which has jquery and popper scripts), and the challenge was solved. I think it's either a bug on the update or the Bootstrap gang just forgot to include the jquery reference on the beta2. Thanks very much!
thank you very much i was trying to follow this tutorial and wodering why it was not working
I'm also using the beta, I realized if I changed the button tags to the styling got fixed. The bootstrap documentation is not updated to reflect this change. Took a long time to figure out what was causing the issue.
you are god
@@ARMADA-oz6we PP YOU ARE
Thanks @
Cesar,
I downgraded jquery & popper. Not worked. Needed to downgrade boostrap css also.
The help i needed at 4am, thank you.
If it doesn't work for you:
replace all "data..." for "data-bs-..." attribute
Excelent!!! It wasn`t work for me untill I read your comment!! Thank you!!
broooooooo thanks so much i was so exhausted and you helped me , thank!!
Thank you!!!
Oh my goodnesss took me forever to get here. I wish the dude would fix that in the description or something!
Thank you so much
I'm from Bangladesh.I can't stop thanking you by calling cultural our word 'Bhaiya'💚...Thanks a lot,bhaiya👌🏻
In 5:25 you write "data-ride="carousel" " and that got me crazy bc doesn't work for me. BUT i realized that writing "data-bs-ride="carousel" " works. Anyway, so much thanks for the tutorial (y)
You just saved me a lot of time! I was having issues and this fixed it! Thanks!!
wow my hero I was looking what wrong but u save me !
Dude, this video just literally saved my rear. I thought I was updating a new project from bootstrap 4 to 5 but accidentally updated my live portfolio. With a slider being right smack at the top of my landing page, I had to dash to UA-cam to find a fix for not only that but functions like my hamburger button too. You earned yourself a subscription! :)
Send the code
keep it up, Adrian.
After watching this video I am a fan of you.
Thanks :)
The help I needed at 3:44am, hopefully this is already it
3:37am
I really loved watching you code this . I am using bootstrap for a class and was looking to see how to activate the carouse template and how to apply the .active to the template to activate and make visible. Thank you so very much for your time.
was working on a project but couldnt recall the carousel so u saved the day.you earned a subscriber
I had a problem about responsiveness in my background image, but thanks to your video i solved it, thank you!
This is by far the best tutorial on the subject I ever came across. Thank you!
Thank you for this tutorial. That was very helpful. There were some problems with the slider, but I think you should add "bs" after the data.
The - thing didn't work for me.
Just append bs to the middle after every data. Example "data-slide-to" change it to "data-bs-slide-to". I did what the commenter Kris said here and my slider works now.
after struggling for a week straight i came across this channel
Hi, I am really enjoying this lesson.
I have noticed you do some amazing tricks within Studio Code and I am curious how you do this. I figured out how you create a class with ".container" and then hit "enter" and it pastes in "
Hi Gary!
This is a VS Code built-in feature called Emmet, which help you to write code faster.
I hope this video will help you to learn Emmet faster. ua-cam.com/video/V8vizNQKtx0/v-deo.html
I was watching this, and was half way in the video but I had to stop and give it a thumbs up for how highly educative and slow paced it is💥💥💥
stumbled upon your channel....after trying few things.
Got the exact solution....Thanks a ton.
Awesome!
Thanks ! I could not make it work from the Bootstrap Website but this video helped me
This might be the best I’ve seen!
SOOO HELPFUL THANK YOU
My gosh! premium content mommy!
Thanks, Adrian for this wonderful tutorial on carousel
You're very welcome!
Best contain ever for the topic. I am loving this contain.
Nice!! :D Do it in bootstrap is very easy, easier than vue and react!
I was sure Twarog must mean twaróg, our beautiful white cheese or quark as you call it in Australia ;)
such an incredible video I enjoy it a lot just wish u make an ecommerce website with bootstrap 5 and make a video about it
You helped me, thanks, I'm from Brazil
thank you to solve my problem about Carousel slide
Awesome tutorial. It seems "sr-only" no longer functions with bs5, had to use "visually-hidden"
Is the other source code still work for now? Cause bootstrap already updated their version again
Excellent tutorial Adrian! :-)
Would you please tell me how you setup Visual Studio to auto type what you're thinking?
Thanks lad, this will definitely help me out on my Project. Cheers.
HELP pls, I followed your code, I got icons for "click next" > or click previous <
I have also lower _ _ photos
but when I clcik on em, nothing is happening
instead carousel is moving himself in interval
I have the same problem. Can anyone #help?
Someone please help. Same issue
Great explanation
Great video mate
Really helped me. Well explained in short time.
This was so helpful!! Thank you
Thank you so much for sharing the knowledge!
This assignment is killing meeeeeee I am not good at coding 🤬 appreciate the help
Good to hear!
Cool !!! Thanks for the tutorial, i'll subscribe 😁
Awesome!
awesome ! thanks for your tutorial
Thanks Adrian it really helped
Thank you. You helped a lot.
Cool and easy to understand, thank you
Awesome tutorial
Great, thanks a lot
exactly what i needed :)
I'd like to see if you can show multiple items using the Bootstrap 5 carousel.
good video. helped me a lot
Best Tutorial 👌
Awesome tutorial! THX!!!
great video, but only problem is that my carousel fade is not working for some reason? any suggestions?
same problem here
Thanks very much, very helpful!
Glad it helped!
Amazing information! Infinite Vegemite for you mate!
That's exactly why I made this, for the vegemite!
Nice ☺
Please do a complete project with bootstrap 5
Can do!
why does the code on the official bootstrap website has elements instead of ( which dont work for me and this does)?
Thank you very much Adrian
You are very welcome :)
yes is very nice good job continue bro
thank you so much :D
Hi I am fan of yours
Welcome and thanks!
100% I make the sickest soft in my head all day long then the mont I open a DAW...
Very interesting topic, thank you.
Thank you.
Thank you sir for this, could you show how to add thumbnails images to Bootstrap Carousel . . that will be highly appreciated
I think you just have to change the w-100 class of the img :)
Thank you!
awesome !!!!!
Hi, thank you for your video!It works except that during transition to another picture, the whole thing drops down for one second and then goes back to the correct position. Anyone can tell what happen?
that's odd, check the doco make sure your css is set well :)
Thanks for your work . Comes more with Bootstrap 5 ?
tNice tutorials tutorial was very satisfying
pra algum br que estiver lendo isso aqui, a dica é colocar "bs" depois do "data" assim data-bs-exemple
There is one Problem:
Let's say you have an Login-Form. How do you keep your inputs through all the transitions?
Awesome 💗
nicee tutorial, thank you very much brother
Thank you. Very good vidio👍👍👍
Nice tutorial and nice slider. Everything works nice except for when I add overlay-image, as soon as I do that the slide goes black, no matter what styling I apply. Could you help me?
.overlay-image {height: 100%}
The issue for me was having overlay-image div outside of the carousel-item div. Needs to be in it
i copied the exact code and it is not working for me
I couldn't put the right links, could someone please send me the bootstrap link used by it?
Hey, which extension do you use for auto completting the tags ?
Emmet
I realize this vid is 3 years old but wondering if anyone can answer: Why do I see most developers using Swiper or Owl or some other carousel when they're also using Bootstrap that has the built-in slider? It looks and seems to work pretty good so why don't they want to use it?
Thank you Adrian. For some reason, my carousel won't work though.
I was trying to put this below my navbar but it pushed my navbar up. Please how would I fix this
hello Adrian, I made the carousel but the picture size is too big so it doesn't fit, what should I do?
Edit the image, edit the css, or update the JavaScript media sizes via the documentation
Hello,
can we make those background images dynamic so that we can update dynamically using like django. if you have an ides about it please share with us
Please I need the source code maybe from github
Thank you sir
Is it possible to add images in the function of the carousel?
Thank you
You're welcome
I need help:
I am a total beginner in webdev and not "allowed" to use the div element for an university class project. All code I find online is packed with div elements though, especially in combination with bootstrap since items are altered through the class attribute.
Can any of you maybe recommend me a good alternative I could use instead of div, or do I have to come up with a whole new approach to coding? Thanks for the help!
I 'm assuming they impose that silly rule because they want you to explore semantic html elements: header, footer, nav, aside, main, section, article (and a few others). Look for semantic html on google or UA-cam. Just remember that sometimes a div is just the best choice (when it's used just for styling purposes, for example)
I don't understand why but my carousel is not sliding. Nor is the background color showing up. I tried changing the data-ride to data-bs-ride but it's making no difference
the overlay image css didnt work for me :( it doesnt display the image unless i set a width.
edit: ok, just set width to 100%, along with his codes it will cover all the space of the slider div :)
Followed your tutorial but Bootstrap just won't work. I really don't know why. Saw something about data-ride should data-bs-ride but that didn't help either.
How to set slider height and width in asp.net !
I tried to follow the tutorial to understand how these work but i get a very laggy transition between the slides, i see the gray and white areas swapping color for a sec and then it loads the second slide. I alsp tried on different browsers so at this point i suppose i did something wrong
thank's
Why my carousel not coming on Chrome browser but it's coming in live?
Why did you not add a navbar to it; as shown in the thumbnail