You are the best teacher ever! You explain in a slow and good temp. You have gotten the idea how to do a tutorial. You are Born to Teach !! /Peter Sweden
Exactly what I was looking for, thank you! You probably already know, but when putting placeholder text in with Lorem Ipsum, you can type "lorem". For example, if you type "lorem15", it will put 15 words.
Copying the Bootstrap card template html, I just couldn't seem to achieve the correct format in 2-days of tweaking. Took it from scratch using your tutorial and everything is now perfect and beautifully responsive. Great video, thanks.
Thanks for the simple.. yet educative tutorial. I'd like to ask how can we get equal card sizing if the text length in a particular card is significantly much than its pair/other(s). Would be great if they all have the same size and not random. Thank for clarifying the image aspect.
Depending upon how you built the cards, some CMS tools will truncate the length of the text. I find using Bootstrap flex to adjust to the largest size fixes my problem. That would make for a good video in the future. But sometimes they might just be a little off.
Here's a longer video on how the grid works in Bootstrap. ruclips.net/video/ubVhIeVPwfQ/видео.html Think of literally 12 columns. 12/12 = 100% so it would be across the entire width of the container. 6 columns or 6/12 = 50%. So that would equate to it being half way across. col-4 or 4/12 = 33% or one third across.
I am confused as to why we put the card inside of a container, row and column. Is this how we are supposed to create cards or can we add them on their own?
Organization and responsive design. Cards fill to their parent. Cols are responsive so I can have 3 cards across and then two cards across. You can use cards however you like though.
@@ADesignerWhoCodes Thank very Much , i Would like to learn more , please i can have another tutorial about the responsive using the Table , und another , i need it Please
This is exactly what I'm looking to implement as far as responsiveness but I'm running into some funky layouts trying to apply this concept on my index page in my Rails application, do you know how I would implement these Bootstrap classes on my index.html.erb file?
@@ADesignerWhoCodes thank you, I've encountered this problem numerous times but I get confuse how I'll use bootstrap flex. Is it too much if I ask you to mention me when you uploaded it? just kidding. Thank you so much sir.
let say you randomly download images from the web, they're most likely not going to be the same ratio, how do you make them the same ratio so that each card is the same size like how you did in the video?
My cards are uneven depending on the text I use in the card under the image. Is there a way to make all the cards even in height regardless of the amount of words inside each one?
If you’re in HTML/CSS then you’ll have to adjust all the sizes in a graphic program like Photoshop. And save like a thumbnail version. I use Gatsby/React and with GraphQL you can adjust the ratio of the images to be the same. That’s really the only two ways. Thank you!
How to auto-adjust single card deck into multiple cards in a row by copy then pasting the code of one card after other, without using div row and div col ??
@@ADesignerWhoCodes I was trying to adjust the height and wight in CSS instead of doing the row and the column, but I can’t do it. At school they told me to do it with CSS and I didn’t understand how and now i’m struggling
@@carolina-hr5hq use height but you’ll have to set a prior height to establish a size. That might do the trick. I haven’t tried it. But for example if the button has a space of 10vh, the remaining space is 90vh.
@@ADesignerWhoCodes I actually found my mistake. I had put "overflow-hidden" as a class for the body so it couldn't work haha. I integrated your code into a bigger code using Bootstrap so I had to change a few things ^^ but thanks it works and it helps me learning Bootstrap :)
@@laurananas2424 oh sweet. Ya that can easily happen. I’m finding I’m using overflow hidden a lot less these days but it still finds its way into my code at times. Glad you got it figured out. 👍
Thank you for the video. A quick question, what if I would like to have the picture take the whole left side and have the text on the right side like here: res.cloudinary.com/dz209s6jk/image/upload/q_auto:good,w_900/Challenges/fvv3coes3vm7ndnw6tml.jpg How can I accomplish that? Thanks!
Learned in 15 minutes what I've been struggling with for months. Thanks a lot.
thank you!
You are the best teacher ever! You explain in a slow and good temp. You have gotten the idea how to do a tutorial. You are Born to Teach !! /Peter Sweden
Exactly what I was looking for, thank you!
You probably already know, but when putting placeholder text in with Lorem Ipsum, you can type "lorem". For example, if you type "lorem15", it will put 15 words.
Yes. Old habits die hard. 🤦♂️
I didn't. Thank you!
i was not able to use card-deck but because of you using row class i come to my final product thank you so much.
Copying the Bootstrap card template html, I just couldn't seem to achieve the correct format in 2-days of tweaking. Took it from scratch using your tutorial and everything is now perfect and beautifully responsive. Great video, thanks.
You just saved my project with this 8 min video. Thanks!
Whaaa? Seriously happy to have helped!
Hello sir! Lot's of thanks from Bangladesh !! the wonderful matter is that, after watching this video I got clear about Responsive.
i do appreciate creators like you helping the begineers here !
We were all beginners once. Happy to help!
It's a simple example and it's very useful. Thanks for sharing!
it saved my day while working on bootstrap studio. thanks
Thank you so much Haydn for the precise tutorial.
ma shaa allah, really quick and ON point, thanks!
Just what i needed! Thank you!
Simple and clear explanation, thank you very much for sharing this video
really neat and clean explanation, thx for your tutorial
instant subscriber! Well done
Great !!! Thank you so much. You got yourself a new subscriber.
You are very welcome!
You are an excellent teacher.
Thank you so much! I really appreciate the feedback.
Just one problem with these. When my users upload images, they not all the same size, so this is not very practical.
Thank you for this very useful video!
Great video! Thnaks for sharing the source code
Thank you so much 🥰 you save my life ❤️ God bless you....i stressed to search videos ...But You 🙏
So welcome.
very clear and well structured video! thanks!
Thanks! I hope it helps ya.
That's really helpful. Thank you so much.
Just perfect. Thank you for sharing.
Thanks for the simple.. yet educative tutorial. I'd like to ask how can we get equal card sizing if the text length in a particular card is significantly much than its pair/other(s). Would be great if they all have the same size and not random. Thank for clarifying the image aspect.
Depending upon how you built the cards, some CMS tools will truncate the length of the text. I find using Bootstrap flex to adjust to the largest size fixes my problem. That would make for a good video in the future. But sometimes they might just be a little off.
very very useful and clear! thank you so much
Stoked! Glad the video helped you.
Hi, first thanks! and second, the first image keep on the border left. isn't in the center... how do you do that?
ameizing video, thanks a lot for the help
Again, VERY helpful ! thank you!
Stoked it helped you! 👍
Thank you! This helped a lot :D
Really cool video! Really thanks! Thanks you so much! I sub to your channel
Thank you very much my friend!
exactly what I need, thank you so much sir
didn't understand the "col-12 col-md-6 col-lg-4" thing but it works
Here's a longer video on how the grid works in Bootstrap.
ruclips.net/video/ubVhIeVPwfQ/видео.html
Think of literally 12 columns. 12/12 = 100% so it would be across the entire width of the container. 6 columns or 6/12 = 50%. So that would equate to it being half way across. col-4 or 4/12 = 33% or one third across.
@@ADesignerWhoCodes thanks, i will take a look
Crystal clearly understandable thank you sir
thank you so much mate !
You is amazing!! Thank you very mach.
Happy to help!
Excellent video it really helps me :)
Very welcome!
this is how you teach !!!
You are too kind.
I am confused as to why we put the card inside of a container, row and column. Is this how we are supposed to create cards or can we add them on their own?
Organization and responsive design. Cards fill to their parent. Cols are responsive so I can have 3 cards across and then two cards across. You can use cards however you like though.
hi, how would you deal with images with different dimension ratios? Thank you!
Here ya go :)
ruclips.net/video/iFjGuDUwAhs/видео.html
@@ADesignerWhoCodes thank you!
Anyway, been watcNice tutorialng your videos for a wNice tutorialle now and it really helps to understang soft soft more
Great video! Thank you
You're welcome.
great job! thanks
Great tutorial but i have a question . i can write col-xm-12 for small phone ?
It's mobile-first. So just col-12 will do the trick.
@@ADesignerWhoCodes Thank very Much , i Would like to learn more , please i can have another tutorial about the responsive using the Table , und another , i need it Please
Here you go: ruclips.net/video/ubVhIeVPwfQ/видео.html
@@ADesignerWhoCodes Thanks very Much
This is exactly what I'm looking to implement as far as responsiveness but I'm running into some funky layouts trying to apply this concept on my index page in my Rails application, do you know how I would implement these Bootstrap classes on my index.html.erb file?
Thank you so much brother
Totally welcome.
Thanks u save my Bootstrap project
You are so welcome!
Thanks man!🎉
No problem!
love you uncall...❤❤❤
thanks i appreciate
Question: how about when the text contains more words? the card adjust its height. how do I make it the similar sizes regardless of its text contents?
I’m eventually going to make a video on this. But you can use Bootstrap flex to make all the boxes the same height
@@ADesignerWhoCodes thank you, I've encountered this problem numerous times but I get confuse how I'll use bootstrap flex. Is it too much if I ask you to mention me when you uploaded it? just kidding. Thank you so much sir.
Whats the difference between this and card-deck? Card-deck was simplier, but doesnt look like its supported in BS5
No idea what card deck is. It's not in Bootstrap.
let say you randomly download images from the web, they're most likely not going to be the same ratio, how do you make them the same ratio so that each card is the same size like how you did in the video?
Here you go. Crop images with CSS.
ruclips.net/video/iFjGuDUwAhs/видео.htmlsi=AzgGFgLROvHEf54S
Or go into Photoshop :)
fantastic. thank you
Glad you liked it!
great job thank you
My cards are uneven depending on the text I use in the card under the image. Is there a way to make all the cards even in height regardless of the amount of words inside each one?
Yes! You’d have to switch from the grid to flex but that is entirely do-able.
"d-flex align-items-stretch"
getbootstrap.com/docs/5.0/utilities/flex/
does group work instead of deck in bootstrap 5?? i am using it is working but the b orders are collapsing.
Not following.
your good, you jst saved me
Awesome! You’re so welcome
Just perfect thanks for sharing
You are so welcome!
Thanx a lot u r legend ❤❤
Awww. You are too kind.
What if my images are all different sizes how do i make them the same? Great vid btw
If you’re in HTML/CSS then you’ll have to adjust all the sizes in a graphic program like Photoshop. And save like a thumbnail version.
I use Gatsby/React and with GraphQL you can adjust the ratio of the images to be the same.
That’s really the only two ways. Thank you!
Adjust them in HTMl lol 🤣 width and height lol duh
How to auto-adjust single card deck into multiple cards in a row by copy then pasting the code of one card after other, without using div row and div col ??
Not sure I understand auto adjust. You dictate how many cards by using the 12-col grid system.
@@ADesignerWhoCodes can have any number of cards but remember it should be 3 cards in a row, also it should not exceed more than 3 cards in a row.
@@subrotomukherjee8571 not sure of the question. Col-4 will get you 3. Make sure you use a container too
@@ADesignerWhoCodes ok 👍
I tried implementing this but the result was that all of the cards appeared in the same row. I tried adding 4 cards
Can i use 4 cards instead of 3, in a single row
How I didn't see you resize the image ??? When I add mine is huge. I have to resize.
Probably had the images already re-sized. Also class img-fluid makes the images responsive.
@@ADesignerWhoCodes Right. Cool man. Nice work brother
great job:)
Thanks Marsha
thank you sir
There’s a way to do the thing “col-12 … etc in css?
Not sure of the question.
@@ADesignerWhoCodes
I was trying to adjust the height and wight in CSS instead of doing the row and the column, but I can’t do it. At school they told me to do it with CSS and I didn’t understand how and now i’m struggling
I tried using display flex and wight and height but i can’t
Sorry, my first language it’s not english and I’m kinda new with these program so i’m sorry if i explained it bad
@@carolina-hr5hq use height but you’ll have to set a prior height to establish a size. That might do the trick. I haven’t tried it. But for example if the button has a space of 10vh, the remaining space is 90vh.
Shall we give our mother's maiden name to download these codes?
Sure! And your favorite vacation spot as well.
Beautiful. Thank you!
Glad you like it!
Thanks bro
thank you so much
Welcome 😊
Hi thanks for the video. However it's not scrolling for me :((
Welcome. Not sure what is supposed to be scrolling in regards to cards. Welcome to download the source code and compare your code with mine.
@@ADesignerWhoCodes I actually found my mistake. I had put "overflow-hidden" as a class for the body so it couldn't work haha. I integrated your code into a bigger code using Bootstrap so I had to change a few things ^^ but thanks it works and it helps me learning Bootstrap :)
@@laurananas2424 oh sweet. Ya that can easily happen. I’m finding I’m using overflow hidden a lot less these days but it still finds its way into my code at times. Glad you got it figured out. 👍
how to change the position of cards
Just re-arrange them in their order. Top in the code is left in the design.
thank you
you are so welcome
how to make each card (whole the card) clickable?
Wrap an a tag around the card
Thank You.
Thank you
You're welcome
Test test test not come on center.
It mean my bootstrap5 is not working.
awesome
Nice
soy tu nuevo subscriptor
thanks
You're welcome!
thx
You’re very welcome!
doesnt work
That sucks. Keep at it. Breaking code is part of learning. Don't forget class "row"
kermit
*_good ... chee poray ..._*
Thank you!
:D
crack!
Hopefully that's good crack.
Thank you for the video. A quick question, what if I would like to have the picture take the whole left side and have the text on the right side like here: res.cloudinary.com/dz209s6jk/image/upload/q_auto:good,w_900/Challenges/fvv3coes3vm7ndnw6tml.jpg
How can I accomplish that? Thanks!
Bootstrap has that for you:
getbootstrap.com/docs/5.0/components/card/#horizontal
Maybe I'll make a video on this as well.
@@ADesignerWhoCodes omg how did i miss that! I was pulling my hair out trying to figure it out. Thank you!!!
@@davidaparicio2313 you’re all good. Happens to the best of us.
Thank you very much