Bootstrap Beginner Crash Course
Вставка
- Опубліковано 6 лют 2025
- Want to learn Twitter Bootstrap? In this video we will cover the Twitter Bootstrap framework in depth from installation to all of the HTML/CSS components and features.
Grid System
Navbars & Dropdowns
Jumbotron
List Group
Alerts & Progress bars
Typography
Labels & Badges
Much More...
CODE - www.traversymed...
9 HOUR BOOTSTRAP 4 COURSE W/5 PROJECTS:
www.udemy.com/...
BUILD AN ADMIN THEME VIDEO
• Build A CMS Admin Boot...
10 PROJECT BOOTSTRAP COURSE:
www.eduonix.co...
SUPPORT THIS CHANNEL WITH A CUP OF COFFEE PER MONTH:
/ traversymedia
ONE TIME DONATIONS:
www.paypal.me/t...
NOTES FOR BOOTSTRAP 4:
1. page-header alternative in bootstrap4: class="pb-2 mt-4 mb-2 border-bottom"
2. pull-right => float-right
3. blockquote-reverse can be imitated with "blockquote text-right"
4. list-inline -> add class="list-inline-item" to each one of your elements and that'll work.
5. Button sizing: btn-xs is not available in bootstrap4, there are only btn-lg and btn-sm classes.
6. Instead of text, use text
7. table-condensed -> table-sm
8. for row(tr) colouring use 'table-primary', 'table-danger', etc, just like the buttons
9. Panels in bootstrap 4 seem to have become Cards.
10. progress-bar-success -> bg-success
11. animated progress bar(active) -> progress-bar-animated
12. thumbnail -> img-thumbnail, img-rounded -> rounded, img-circle -> rounded-circle
Great comment, on behalf of everybody watching - Thank you!
What would be the best way to install bootstrap? Manually downloading or by npm? Just was wondering what's best practice
Thanks for this
Thanks alot brother!
Thank you SO much!
This was THE MOST HELPFUL beginner Bootstrap tutorial I've seen - Thanks!
yes, I agree
not anymore
@@musicgaines7170 why?
Was going to thumbs up. But I see you have 420 thumb ups. Don't want to spoil it.
Taught me what most other youtubers would take 1 month in just 1 hour. Mad respect bro.
This completely changed the way I thought of CSS. I come from a totally 'back-end' background and have recently gotten into Full Stack Web Development and hadn't quite grasped the power of CSS until I came across this. Great stuff. Thank you!
Loving these beginner videos, while i'm a developer of 10+ years these are great for the apprentice developer i've just hired. I personally have found a lot of value in the Vue in 60 min video, i'd love to see more Vue ones.
lol srlsy your dev has to watch videos for beginners? xd
yes cause attitude is 80% of the job.
Bootstrap 4 Course: ua-cam.com/play/PLDw4Ldr2k_qI7gm-6IJZ3FSF-ZX8oTaXx.html
Great as always! It seems in the last couple of years you have really exploded with your video production. I have watched your videos evolve for about the last 4 years now. These crash course, hour or so long videos you started producing are great. Especially if you just need a refresher.
Thanks for sticking with me. What is funny is I had this channel since 2009 but didnt really put much work into until the beginning of 2016. I really wish I had started earlier because I would have much more subscribers.
I wished I would have started coding earlier but better late than never:)
26:40: list-inline for Bootstrap 4:
Item One
Item Two
Item Three
Item Four
After hunting for the right course to learn Bootstrap quickly without having to learn a lot of html and css , I found this one to be the best !!! Awesome work . Keep it up!
You are literally a life saver Brad! Your videos have taken me from 0 to web designer in just one week! You are the greatest!!
haha
This video gets everything together - after I have learn JavaScript and HTML - which means: I can decorate front-end, present good mobile experience, and provide comprehensive navigation and branding by simple steps. What a great teaching.
bro im high on weed but you managed to force in almost everything in just 1 hour, i have mad respect for you and to your skills.🧠💫💫💫👋💥💥❤❤..
Dont worry about negative comments about your beginner stuff. Everybody has to start somewhere. Your beginner stuff is awesome and helpful!!!!
I am new to learning to build websites and you are by far the greatest. I don't even comment on youtube videos. Thank you so much.
MAN I FUCKING LOVE YOU!
I just catch up almost 2 weeks worth of my dev school class in 3 days thanks to you.
You're amazing.
To anyone interested in Bootstrap, Brad has a class on Udemy for Bootstrap 4 . His projects are really well thought out, and actually usefull. Support this guy and spend 18.99. By far he is among the Titans of web dev teachers on the net.
This is more useful than my whole class, thank you!!!
Fantastic! The "live" demonstration of what each class does separates this from other tutorials.
Amazing! I restarted web developing after 12 years and I am learning all your tutorials.
Awesome! I'm not a beginner and because haven't work for a while on the design using Bootstarp, I watched this video for refresh it, and WOW! Great job! Thank you.
Plz keep adding vids for beginner's and intermediate. I'll never give up despite not knowing things like how node works on cmd ... I'll continue to try and learn no matter what . It's been this way for years now.
Slowly but surely I learn some things , the vids for intermediate and beginner really help in most cases
Thank you a million times over for this tutorial. You've demystified so many aspects of Bootstrap for me. And you have a great sense of humor.
I like this type of tutorial. I could watch even longer videos, but it needs to be well explained. I'm only 23 with half my life experience of coding, so I have much more time for learning.
I use PHP Storm and what I love about this editor is that it gives syntax hinting for all the classes in bootstrap. Once PHPStorm has your jquery or bootstrap file information it can also help you with all the classes and functions in that specific file. Syntax completion at its best.
I was wondering why you didn't mention grid, and then you did. I got everything I want to know in a short time. This video is extremely clear and helpful AS ALWAYS! Thank you
Thank you brad not only for this crash course but also for all of your courses. You are one of the most intelligent instructor. Your teaching skill are amazing. You make it looks very easy.Hope you the best for all of your life
Thanks so much for the tutorial. I've been teaching myself HTML, CSS, Bootstrap and JS and the CheetSheet will be a valuable resource and has really helped iron out some issues I had.
Subscribed! Worked through your excellent HTML5 and CSS tutorial and I'm hooked....nice way to get viewers interested in your more advanced videos...BIG thumbs up!
I had been subscribed to your for a while but this was the first time that I had seen one of your tutorials. I learned a lot in a short period of time. Definitely going to check out the updated stuff on bootstrap and the rest of your vids.
I think that I got addicted to this channel!
Had to pause and laugh at 56:18. Best and most interactive class ever.
Thank you
#Phase 02
Basic HTML Tutorial with Bootstrap v4.5.2 for Beginners Phase 02 | Making Header & Menu Design
ua-cam.com/video/169e0kYgxmA/v-deo.html&lc=UgyBHgQRsQcGV3BX-mJ4AaABAg
It feels like Mark Wahlberg is teaching me bootstrap! What an insightful video.
Excellent as always....Sidetracking: I’ve watched a fair few web dev tutorials over the last year or so and noticed, and experienced myself, that the various text editors automatic code formatting doesn’t actually help. They actually just interrupt the typing flow and force you to continually use the arrow keys to get back to the correct position, or to correct the indentation.
For what it’s worth, I switched off the auto formatting recently and wow! It’s hard to appreciate how counter productive it is until you stop using it.
This crash course is an absolutely perfect beginning for whoever wanna learn bootstrap. My suggestion for those who expect to get in depth is to buy the Bootstrap course of Brad (the link in the description) on Udemy and practice with 5 projects. You'll be amazed.
Thank you, Brad.
Very helpful. Thanks. I'm an engineer who likes detail and who is ok with HTML, so it all worked hunky dory for me.
First ever tutorial I ever enjoyed in years! Good Job!
Brillant Sir I am Beginner and I have learned more things about BOOTSTRAP From this video...Thank you!
Just wanted to say thank you for all this helpful information!
I just finished this tutorial and I'm moving on to your "Build A CMS Admin Bootstrap Theme" tutorial.
Good job, and keep them coming!
Although this isn't the updated Bootstrap it still helps a lot because now I can identify code from the older version and properly distinguish between the new and past markup/code. Thank you for the great tutorial and please make more!
Thanks for this overview! I like your newfound focus on beginner themes. It will also help you sustain a larger subscriber base as the beginners grow with your videos to more advanced themes.
Thanks. yeah I am trying to reach out to more front end and newer developers just starting out. Ill still be doing the other stuff as well though. Thanks for watching
I love this. An easy to follow tutorial. You are good with this stuff. Thanks alot Brad
jfc man, y really r the best guy on internet ))) saved me with my school project! Love the way you explain every little thing for beginners like me, thank you! carry on with tutorials, they are amazing!
Sorry for this simple silly question... why the at minute 39:48 is fully cover the page while at minute 42:45 is not fully cover the page? I think both of the is outside of the tag...Thank you very much! Appreciate it.
best front end teacher on YT!
This is so much better! Even at my university they don't teach it as such. Very Good Work : )
Horrocious wasn't a word before, but it is now! I've already used it twice today! Good crash course.
One of the best Bootstrap Tutorial I ever found on the UA-cam. Thank you so much.
This is pretty useful. Especially to those who are still looking to get started in Bootstrap.
I was looking for a step by step demo on how to use bootstrap and you nailed it. Thank you for this!
First youtube video that i ever commented man..!! Like the way you are explaining every details.. Great job..!!
Thank you Brad, I always used the templates directly but is fun to know all the classes behind, I'm gaining confidence to design my own Templates. :)
I'd prefer watching your videos rather than any web series... lots of love
This is brilliant!
Will probably purchase the 10 project course too just to concrete my bootstrap skills, and add it to my CV.
Thank you so much for making such a clear and concise tutorial. And there was me worrying about using Bootstrap. You've helped eliminate some worry at least :D
I knew CSS. but, i had no idea about Bootstrap at all.This video is really helpful for me! Thank you!
Bootstrap 4 needs to be learn not the one explained in the video
Just bought your bootstrap udemy course.Your tutorials on youtube are really helpful. Thanks you sir!
Thanks for this, Stunned how quickly I picked it up.. don't know why I haven't done it sooner. So well delivered.
So complete and minimalistic!. Would be great a Bootstrap 5 complete course on Udemy or better, on your platform. Thanks Brad !
yours is the best tutorial i have ever seen on you-tube for bootstrap. thank you for being so helpful :)
honestly speaking i have learnt web designing from you.. you are greattttt.... !!!!!!!
Best tutorial !!! using Bootstrap is like having superpowers !! Can't wait to build some websites with it
Very good video. I like the way you demo the results of what you are showing us. Your speaking is clear and easy to understand. Thank you.
I watch your videos while I'm at work so I can start a career in this field
This was very helpful, I love how you made a cheatsheet and will be tuning in more. I have programmed application in Java before but never touched web development besides HTML5 and CSS(which i'm terrible at styling) Someone referred me to Bootstrap. I loved the simplicity, but it was taking forever to google questions and didn't want to read every little thing. I'm glad you highlighted over the important stuff so i can leave the googling to higher level problems. 10/10 video
THANK YOU FOR THIS. I threw up at class when this was went over, I felt lost as shit. THANK YOU
Live reload only works when you have a or element in your document.
when he says "it looks pretty ugly", I can feel it.
Some removed or modified features in Bootstrap4.
Quick floats: or left.
Blockqoute reverse:
Panels have been replaced with cards in v4:
Features
Special title treatment
With supporting text below as a natural lead-in to additional content.
Go somewhere
Hope you found it a little bit useful!
The more i see this tutorial the more i love it. I am gonna buy your udemy tuts
Hello Brad.
I've followed your Udemy course "Bootstrap 4 From Scratch".
I've learned a lot and love the way you explain ... while coding :-)
So easy and simple presentation. You have covered lots of things in a short time period. It is really helpful for me. Thanks a lot. Please keep us up to date with your informative tutorial.
You're bout to hit 1M !! congrats bro
great videos .. even better noreastern accent ;)
Man your videos are the most helpful crash courses. You might create a web development crash course playlist
Super helpful, If you want to learn fast, you can set your speed to 1.5 and it is still easy to follow
This is AGAIN a marvelous video. Good explanation, and a quite complete 'Cheat Sheet' in case you need to dig up something and some prefab blocks are ready to use. Great work!
Grid system starts at 1:01:27. The most important part in Bootstrap. The other styling feature you can use look at the example from web when you need
Awesome Thanks! This was great! Followed everything step in this video! Congrats on your 200,000 subscribers!
34:52 horrendous + atrocious = horrocious
I love it 😂
hahahh this was so funny
Teacher of the YEAR, always. B-of- Thanks
12:00 no popup when opening winrar-is Brad one of the few who actually paid for a winrar license??
Great video! I needed something like this. Now Ive got a quick reference to clean up my HORROCIOUS website design! Thanks man
Great Video!
lol did you see that too??
@@memeawards5494 38:56
wow thank you so much! definitely want more of these. currently learning by using the Against The Clock Adobe book s for dreamweaver. this is way easier to digest. I also love hearing the side comments.
Great Introduction to Bootstrap tutorial! I'm very impressed with the level of detail you provide, and the fact that you use best practices in your code (comments, uniform indents, horizontal rules between containers, etc.).
I'm a frameworks newbie, but I will definitely be watching your other Bootstrap tutorials, as well as your Semantic UI and Foundation 6 videos as well.
If you were to do an equally detailed introductory tutorial for one of the minimalist frameworks, like Pure CSS, I'm certain it would be very well received.
Thank you very much and we appreciate your willingness to teach the next generation of front-end Web developers!
Great job loved the lesson. It is so easy to listen to you which makes learning better. Anyone ever tell you that you sound just like TED. Its like getting a lesson from TED which is great. Maybe toss in some cursing next time would be really awesome lol :)
22:50 bootstrap 4 uses 'float-right' instead of 'pull-right'
but this isn't boostrap 4..
@@pragueexpat5106 But Bootstrap 4 is the current one and the one we need to use.
Thanks. Added a comment to my sheet. If you see others please don't hesitate to comment. Any help is welcome.
Yup, the original video is not updated. Its not too different but theres some minor details such as this one. Pull-right wont work. Also, its important to note that the documentation on getbootstrap.com changed a bit. So that might be confusing to newer people.
i forgive you on your typing because your video was EXCELLENT!!
I have OCD and this video made my head explode.
Other than that, awesome tutorial! Thanks!
Thank you for your amazing video!
As someone who built front ends for years, and struggling with the shortcomings of HTML and CSS, especially with responsive design - Bootstrap is really a breath of fresh air. It allowed me to focus on the front and back end logic.
[En]
Excellent, your explanation is very concise and clear. I wish they would have exited videos like this when I learned html. Greetings.
[ES]
Excelente, tu explicación es muy concisa y clara. Ojala hubieran existido videos como este cuando aprendí html.
Saludos.
The Bootstrap Tutorial we need, but don't deserve
Extremely useful tutorial for beginners! Thank you Brad for sharing. 👍😃
best tutorial-crisp and clear explaination
Thanks Traversy for always making learning new things so easy and interesting.
"I have to hurry up and get this done"... I mean, you do not have to do anything... Appreciate the video.
This is was the best video about Bootstrap, well done and thank u very much😍
Man! you are everywhere on the net!
Good course, clear easy to follow and very helpful. It feels as if the curtain has lifted and I can see into what is behind it all. Many thanks!
2020 still BEST tutorial for Bootstrap beginners!!! thank you
Hi, is this relevant as of today?
That's really a wonderful cheat-sheet ❤️❤️❤️
Those are new, also open BootStrap-4 documentation in a side tab & hence you can adjust some changes between 3rd & 4th versions.