Learn Bootstrap in less than 20 minutes - Responsive Website Tutorial
Вставка
- Опубліковано 6 лют 2025
- This is a quick introduction to how to get started with Bootstrap 5 Alpha.
Project Files: github.com/Rad...
☕ BuyMeACoffee: www.buymeacoff...
Discounts:
⚡ Hostinger: www.hostg.xyz/...
⚡ Elementor: be.elementor.c...
Recording Equipment:
◾ Microphone: amzn.to/3Ppp8Ok
◾ Shotgun Mic: amzn.to/3IVqIot
◾ Camera: amzn.to/3z0bxpF
◾ Lens: amzn.to/3Pw4s7d
◾ Lighting: amzn.to/3PGXvzW
Computer Gear:
◾ Keyboard: amzn.to/3PGXvzW
◾ Headphones: amzn.to/3PJl9fg
◾ Mouse: amzn.to/3z1TGPf
Connect with me:
◾ Website: www.raddy.dev
◾ Newsletter: www.raddy.co.u...
#bootstrap #css
Funny how I have avoided Bootstrap till the last moment, and now I realise how much easier it is than actually writing all the properties and styles manually, with pure CSS. Saves time and looks good!
Thank you for your tutorial!
I am glad that you liked the tutorial! I don't use Bootstrap all the time, but I understand why people love it. It's pretty cool
you should checkout tailwindCSS :)
I wish i had someone to look at my portfolio :c
@@awhitechilliify thank you
More than welcome to join our Discourd community and post it there :)
Once you customize the preset designs like focus-ring, outline, and colors, you can create clean modern looking websites with ease. You can create custom glowing/colored shadows and just make your website look the way you'd like. Coming from tailwind css, most utility classes are the same, so it's not much of a learning curve. The fact that they have components like navbars that have a hamburger menu that appears when you resize the screen saves me time. I used to hate Bootstrap so much, but now that i actually know how to customize it with sass, i love it.
To all the people who think bootstrap is lame and boring, yes it is, and I personally use styled components, but a lot of times your job demands you to know bootstrap so it's a good idea to know it even if you're not going to use it much in your personal projects.
Why not use it.. it's fast and simple way to do website..quality is also good... so i vote for bootstrap
How is that lame or boring?
@@bionic-beaver it kinda is bro, I know many people feel nostalgic over it,
But if you compare newer options like mui, mantine, chakra and others, bootstrap feels a bit old and not as useful as others, but I remember the time when jQuery and bootstrap were the biggest convenience on frontend.
@@bionic-beaver i dont know what you need it for but im struggling to understand this bullshit for college class after ive successfully created a fully functional and modern website exactly how i imagined it in the first place using wordpress avada theme for our family company, its a wood industry company which operates over a site i created and learned by myself with no previous knowledge in two weeks, it gathers all data, is seo optimized and the company runs on it. months after i start learning this bullshit how to write lame ass webpage for my project in bootstrap and html which is outdated from my own experience and opinion, i know everything runs on html and css but as a private person who needs to develop a site for business i find this extremely boring, unuseful and a waste of time to learn these principles. so in short, it is boring as hell
Quite the contrary, bootstrap is too fancy- the simplest the better.
When you figure out that writing CSS from scratch is a huge waste of time learning Bootstrap is a must! Thanks for the quick intro!
And then your site becomes indistinguishable from every other site using bootstrap..
Been looking for a solid tutorial. Almost every video out there is either 2 hours long, or filled with obnoxious music.
Thank you so much for this!
Glad you liked it!
thanks, really cool to see visually and quickly how bootsrap works. i hate when people just talk about it in abstract terms, because i want to see it in practice
Thanks very much for making this video
It is July of 2023 and I am learning off of another video, and it has taken me days to latch onto bootstrap because I wasn't understanding something from that other video.
At 7:26 I saw exactly what I needed to see and BAM! Solved, it's now clicked for me and I understand what is going on in Bootstrap now.
It wasn't any single thing in particular, but it was an aggregate series of events that culminated in seeing the code you'd typed, going to the browser's developer view that displayed the totality of the results which brought everything together for me
Thank you :)
followed a 1 year intensive full stack course where we had to write our own css everything up until responsive and whatnot
holy lord am i psyched it's over and i have now time to watch this i'll keep you posted
The best simplified bootstrap tutorial that i've come across on YT so far!! thank you very much Raddy, I'll becoming for more.
Thanks, Lilian! I appreciate the comment
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
I didn't had any idea of bootstrap till now but now I'm ready for my interview tomorrow just by watching this amazing video, Thank you so much!
Best of luck!
Thanks so much for this video. After years of using CSS I was leery of trying a new method but your video shows just how simple it is to pick up.
I am only 8 minutes into this tutorial and I love it!!! You make this so easy to understand and you get right to it so viewers can learn quickly. Well done!!
I am glad that you found it easy to follow. Thank you very much for the nice comment 🙂
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Thank you so much! I couldn't understand how the column system worked and this video really helped. You've earned a subscriber :)
Glad that you found it helpful, Claw. Nice logo and name btw :)
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
wow...just now getting back into html and css after an almost-10-year hiatus due to job changes. I'm remembering a lot of the basic stuff, but this kind of thing makes it so much easier! you don't have to style a page from the ground up anymore. I still have a lot to learn, but this is really helpful.
I regret not watching your video earlier. Didn't knew that bootstrap was this awesome.
If you watch the video at 2x speed, you can learn Bootstrap in less than 10 minutes! 😀
Kidding aside, this is what I'm looking for. Quick but easy to follow Bootstrap tutorial. Thank you! 🙂
Just do 1.5x it sounds like a normal person talking
Very nice video! Easy to understand, straight to the point with no fumbling around, nice examples, provided information with excellent flow up until the end. Overall a smooth introduction to Bootstrap. Cheers!
Thanks, Bill! I appreciate the comment
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Bootstrap is honestly like the best thing I've ever learnt by now
I always wondered about those numbers in bootstrap class. Now I fully understand the concept thanks to you :)
Glad to hear that, Anik! Thanks for the comment
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
For the first time, I learn how to use bootstrap correctly....Thanks a lot🤗😇!!
You're welcome 😊
As a junior dev, this helped out a lot! Thank you
It's so kind of you to reply everyone in the comment section.
haha thank you! I do try to reply to everyone 🙂 There are a lot of friendly genuine people around
@@RaddyDev Hats off to you man!!!
Hey thank you for the video, it was so useful for me, i'm working with bootstrap and now i can understand much better the different properties! :D
THanks for the great intro to bootstrap.
Your voice is humble and straight forward thought process, I am subscribing to your channel, in the hopes of learning the complex world of bootstrap.
Vishal, that is a really nice thing to say. Thank you so much for the kind words! I appreciate you being here
Thanks a lot! Helped me to move on in the process when I got stuck after my class.
Glad to hear that you found it helpful! Good luck with the project that you are working on
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
That's a great video i needed. I worked with bootstrap very long ago. But this totally worth than reading their complex documentation about layout.
Excellent Bootstrap tutorial, i wasn't a fan of this framework at first but i slowly am starting to like it more
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Yoo this tutorial is awesome I haven't used bootstrap in while an this was a great refresher for me thanks an keep up the great work
haha I am glad that you found it useful. Same here to be honest... The new release made me want to give it another go and it was good exploring. Thank you for the kind words and comment!
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Like the title said, I lerned Bootstrap in less than 20 minutes :D
Best informational tutorial for beginners hands down
Thank you!
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
First I thought its a total BS, but actually you did tell main aspects in 20 mins so not BS :D I am a backend java dev, so my frontend really sucks. this is really helpful.
exactly what i needed to know 'bout bootstrap.
as soon as he talked about "offset" I liked the vid!
👊😎
I'm new here... Stumbled across your video and I like the way you are,cool and easy person.
You've just got a new subscriber.
I'm happy to be here
Thank you, I appreciate it!
I felt bored about css but you make me feel better to do css with bootstrap. Thank you
Thank you, Bhavani! I appreciate you saying that. More bootstrap tuts to come
If you really want to set up colums or any other feature you acan also use bootstrap vscode extension typing b4 and the emmet will give everyting you need to build your website project
Sounds good, I will try it. Thanks for sharing
Half way through and I love your tutorial!
I am glad that you like it! Thank you 👊🦍
This legend deserves trillions of subscribers
haha thank you!
Thanks for the demo - I'm a beginner and I've been having trouble wrapping my mind around the 12 column system and the concept of breakpoints... this really helped!
Glad that you found it helpful. Luckily for us, they have a lot of examples on their 12 col system
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
The vid made the basics easier to understand, thank you.
Glad it helped!
Thank you so much for the tutorial! I have a question... Shouldn't be in the section instead of the ? Also, would you recommend linking to CDN or downloading to one's server?
Interesting question. The tag should be valid in the body. I think that Html 4 required the style to be inside the head of the document, but we are past that.
CDN: I think that it depends on how much you want to modify Bootstrap. If you are working on a quick project CDN is a good option. Many users have already downloaded Bootstrap from a CDN which makes the loading time of the site faster. It's loaded from cache. Also, CDN's are served from the closest server which also makes the loading time faster.
If you want to start modifying Bootstrap and you want to pick only the CSS that you need, then downloading the files might be a good option. I wonder if there is a CDN for each individual bootstrap stylesheet.
@@RaddyDev Thank you :)
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
this tutorial is so helpful u rly focused on the most important fundamental parts of bootstrap!! thank u so much
Thanks, Luisa! I appreciate the comment. I hope that you are enjoying the holidays 🎄
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Thank you for everything Raddy! This tutorial is great
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
This is a very straightforward tutorial for Bootstrap. Thanks.
Glad it was helpful! Thanks for the comment!
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
We need more videos from u bro like this .....it's really helpful ....
really nice and informative video. I enjoyed taking my notes. thanks dude
I agree completely ... and I, for one, am looking forward to the arrival of the great meteors impact.
Subscribed to you because this is a great example and better than others I have seen!!
Nice introduction!
great tutorial. Thank you very much.
Glad you enjoyed it!
Another great video, new subscriber for sure. keep up the good work dude.
Thanks, Mr. pixel! I appreciate it!
This X2!
17:21 how did you indent that code block over so fast 👀
Thanks for the tutorial! :)
Thank you for watching, Tharinda!
Hi Raddy,
As you mentioned that you don't use bootstrap all the time, then what other frameworks do you use to design the UI
Nearly all of the websites that I make use custom CSS. I just use SCSS as a pre-processor and that's it. No frameworks
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
I really appreciate you. You made it so simple Thank you 🌹🌹👍👍
Thank you for watching, Milad!
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Your explanation really helped! Thanks for that
Thanks for the walk through, very easy to follow along as I work on my first project.
Glad to hear that, Jenny! Good luck with your first project 😊
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Thank you. Helped me revise Bootstrap quickly.
Great intro for bootstrap, thanks for the effort and the quality :)
Thanks... You're a good teacher
I appreciate that!
Thank u for the video.
Watching video from Nepal 🇳🇵🙏🏻👌
Thank you for watching!
Thank you that was really clear and well explained
Glad it was helpful!
Awesome Bootstrap tutorial!
Glad you think so!
I'll be for sure coming back to learn more! Bootstrap can be intuitive but, certainly, it isn't an easy learning curve (at least for me). You taught it in a very visual way! Thanks!
Thanks for the comment! It does take some time to get used to :)
@@RaddyDev Do you have I playlist about it: I couldn't find it if you do
Unfortunately this is the only Bootstrap specific video I have. I have used it in other videos, but they probably won't be helpful as the focus wasn't the layout / CSS. This might be something I could do in near future
@@RaddyDev Looking forward for it
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Thank you for the video teacher we need allot of lessons about bootstrap we are waiting for you isha Allah keep
Going
Glad that you like the video! I would be more than happy to do more bootstrap videos. Is there anything, in particular, you would like to see?
Thank you, i used to not like bootstrap but i was wrong lol, its actually good
Wonderful tutorial! Thank you!
Best intro! Made it much easier to understand how you get what and where. Instead of just popping up thinking we know everything else. Thank you🙏
Glad you liked it!!
Thank you very much. It was very helpful, I just subscribed and got my like.
Thank you, Antonio! I appreciate it!
Super helpful! Thank you for this demo!
Glad that you found it helpful! Thank you!
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Just a question, isnt against Best practice of give Styles on css. Looks like contradiction by boostrap
I think that adding custom CSS to Bootstrap is absolutely fine
You have officially reintroduced me to bootstrap
😀😀😀 Thanks for the comment, Trust!
The Best css tutorial Thank you!.
Thank you, Raj! I appreciate it
very nice tutorial, would be more helpful if you searched up what does the 12 grid system look like in websites
Thank you, I appreciate the feedback!
Excellent work 👍
Thank you very much for this well presented video.
Glad you enjoyed it!
LOVE YOUR TUTORIAL. VERY HELPFUL
Thank you!
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
so useful and to the point. thank you
Glad it was helpful!
14:00 can't I just envolve all the bootstrap element inside a div and position that with marging and padding?
you will have hard time making the website responsive
Thank you so much
I like the tutorial
I am glad that you liked it! Thank you, Ram!
You were the first to tell me that jQuery isn't required in BS5.. tnx
Thanks bro really Amazing 😍🎉❤
Glad you like it brother
Thanks for this great video. Since you mentioned flexbox few times, it would be good to see a comparison video, Say Flexbox vs Bootstrap?
Bootstrap uses flexbox maybe that's why I mentioned it a few times. It might be hard to compare as Bootstrap is a full on library
It's very fun actually
Really informative tutorial. Thank you!
You're very welcome!
great simple and straightforward tutorial. better than the ones that I've seen in the past.
I appreciate that! Thank you, Nick!
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
thanks for the tutorial, I really liked it, bootstrap documentation isn't that bad, but still, appreciated, just on unrelated note, could you please tell what is the music used in the into? ;)
I am glad that you liked the tutorial. The song is called Much Higher and you can get it from the UA-cam Studio Audio Library. There isn't an artist name that I can see... it's under Hip-Hop & Rap. It's only one, you'll find it :)
@@RaddyDev thank you very much :)
I like how you create nodes using css syntax. How can I get the same given I am lazy xD ?
What do you mean by nodes? 😀
@@RaddyDev sorry, I mean dom éléments, div and such
@@enissay9950 ah i see. Nodes makes sense now. You can install the Bootstrap extenction which will help you with snippets. The other thing that you can do is to use VSC shortcuts. For example if you are creating a 'div' with a class name of 'pt-4' you can start by writting dot - '.pt-4' and this will auto compleate the div with the class name of 'pt-4'. I guess you can just use shortcuts like that and also Bootstrap has a lot of examples that you can copy and paste from their website
Thanks for the video, I love grid videos. I like the grid stuff, but I wonder how much of the styling I can automate with sass. I'm fairly new to bootstrap but I think it uses sass and implements it's own classes from it. The only down side to bootstrap is that you have to fetch it as well as remember what all the class names are, which in that case might as well use sass...
I do like Grid a lot. To me SCSS is just a better way of writing CSS. I find SCSS quite helpful and I prefer the syntax. With bootstrap you can choose of what to fetch if the size is an issue. It's bit more work of course and I think that most people just grab all of it from a CDN
@@RaddyDev Yea that's true. Actually been looking at the sass API for bootstrap and importing just what I need from it.
Don't watch this ua-cam.com/video/OC1Qdnb7DyE/v-deo.html
Loved the video super helpful thanks
I am glad that you found it helpful. thank you for watching!
Great Video! 😃
Thanks! I am glad that you like it
Very effective tutorial. kuep it up
Thank you!
Really Helpful, everyone looks for watch time. But you explained it in just 20 mins. Better than So called "BS5 Full Course" on youtube. Thank you so much for this short & Very Helpful Video and saving my time. Ty. 👍🏻
Easy to learn easy to implement❤
Glad to hear that
Thank you !!! everything is clear.
Awesome! Thank you for watching
Great work,👍 keep it going to create more videos about the programming language I like.
Thank you, I will
Excellent tutorial ! Thanks a lot.
Glad that you liked it. Thank you!
Subscribed!! Great stuff dude! Thanks
Thank you!
Well explained .. Thank u for ur effort