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
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.
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.
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 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.
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.
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!
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.
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.
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.
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.
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
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.
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.
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.
Brad the disabled actually work, your internet connection was slow. That was why you did not know. Watch the video from 50:15 to 50:20, look very close to the reload icon at the top and watch close to your cursor when moving and you will see the disabled sign. #traversy
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!
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 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
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.
can you make a series to create a website from scratch USING every thing like (HTML, CSS, Javascript, PHP, Mysql) all together in a project! not to advance libraries like angular or node.js ... i know php, javascript, css, html, mysql but i have no experience of using them all together ....
step 1: start making something simple and specific :) step 2: make something a little bit more complex, or make the previous one better. step 3: step 2 step 4: step 2 ...
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!
Hey Brad, everything is good in yours videolessons, but if you'd use word wrap in editors, it would be much better. In Atom View -> Toggle Soft Wrap in Sublime Text View -> Word Wrap in Visual Studio Code View -> On/Off word wrap Alt+Z
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
Bootstrap 4: Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
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!
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!
[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.
for anyone who wonders why the live server was not reloading, it was because the live server does not work if there is no tag like the body or head tag.
Thank you very much for this! Just FYI, In MS Code, there's a plugin called HASHER where you type the full code, highlight it and apply Hasher: Encode and add's all the coded ascii stuff for you.
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.
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.
26:40: list-inline for Bootstrap 4:
Item One
Item Two
Item Three
Item Four
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!
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
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.
This is more useful than my whole class, thank you!!!
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!
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.
Dont worry about negative comments about your beginner stuff. Everybody has to start somewhere. Your beginner stuff is awesome and helpful!!!!
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 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.
01:02 What is Twitter Bootstrap
05:13 Install Methods
06:44 Let's get started
15:39 Start
24:04 Blockquote
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:)
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
12:00 no popup when opening winrar-is Brad one of the few who actually paid for a winrar license??
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!
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 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.
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.🧠💫💫💫👋💥💥❤❤..
Fantastic! The "live" demonstration of what each class does separates this from other tutorials.
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.
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.
I think that I got addicted to this channel!
you can type less lorem words by specifying the number you want like lorem5 to type 5 words and so on
Also you can type "p*3>lorem10" + TAB which will generate 3 paragraphs with 10 words inside of each, etc.
Amr A.Mohammed
didnt work, whats exact steps?
lorem + tab key generates paragraph.
You need emmet extension for that and it's amazing. :)
Live reload only works when you have a or element in your document.
Amazing! I restarted web developing after 12 years and I am learning all your tutorials.
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.
Hello Brad ,you should update this course to bootstrap 4.Thank you.
yup .I too thought of it.
He has a course on Udemy
@@IvonneECevallos i cant find it on youtube
@@IvonneECevallos could you please share the link? Can't find it on UA-cam.
@@IvonneECevallos I guess he has made a video on the difference between Bootstrap 3 and Bootstrap 4
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.
First ever tutorial I ever enjoyed in years! Good Job!
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
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.
best front end teacher on YT!
Great Video!
lol did you see that too??
@@memeawards5494 38:56
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.
Had to pause and laugh at 56:18. Best and most interactive class ever.
Thank you
I'd prefer watching your videos rather than any web series... lots of love
Brillant Sir I am Beginner and I have learned more things about BOOTSTRAP From this video...Thank you!
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.
Very helpful. Thanks. I'm an engineer who likes detail and who is ok with HTML, so it all worked hunky dory for me.
when he says "it looks pretty ugly", I can feel it.
34:52 horrendous + atrocious = horrocious
I love it 😂
hahahh this was so funny
Brad the disabled actually work, your internet connection was slow. That was why you did not know. Watch the video from 50:15 to 50:20, look very close to the reload icon at the top and watch close to your cursor when moving and you will see the disabled sign.
#traversy
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!
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
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
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.
Traversy Media > use the toggle soft wrap from view menu. you can shorten atom's width and all code will still be visible.
can you make a series to create a website from scratch USING every thing like (HTML, CSS, Javascript, PHP, Mysql) all together in a project! not to advance libraries like angular or node.js ... i know php, javascript, css, html, mysql but i have no experience of using them all together ....
noob
Yes, it's unfortunate and strange - he hasn't started his career directly as an expert, unlike you.
step 1: start making something simple and specific :)
step 2: make something a little bit more complex, or make the previous one better.
step 3: step 2
step 4: step 2
...
It never ceases to amaze me that people think that saying this is somehow particularly helpful.
thanks for asking this
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!
So complete and minimalistic!. Would be great a Bootstrap 5 complete course on Udemy or better, on your platform. Thanks Brad !
Hey Brad, everything is good in yours videolessons, but if you'd use word wrap in editors, it would be much better.
In Atom View -> Toggle Soft Wrap
in Sublime Text View -> Word Wrap
in Visual Studio Code View -> On/Off word wrap Alt+Z
One of the best Bootstrap Tutorial I ever found on the UA-cam. Thank you so much.
Horrocious wasn't a word before, but it is now! I've already used it twice today! Good crash course.
This is pretty useful. Especially to those who are still looking to get started in Bootstrap.
Teacher of the YEAR, always. B-of- Thanks
Thank you for your amazing video!
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
honestly speaking i have learnt web designing from you.. you are greattttt.... !!!!!!!
Bootstrap 4: Added .float-{sm,md,lg,xl}-{left,right,none} classes for responsive floats and removed .pull-left and .pull-right since they’re redundant to .float-left and .float-right.
The Bootstrap Tutorial we need, but don't deserve
First youtube video that i ever commented man..!! Like the way you are explaining every details.. Great job..!!
Are you going to refresh Bootstrap course?
You're bout to hit 1M !! congrats bro
great videos .. even better noreastern accent ;)
This is so much better! Even at my university they don't teach it as such. Very Good Work : )
55:05 Alerts
59:23 Badges
Awesome Thanks! This was great! Followed everything step in this video! Congrats on your 200,000 subscribers!
i forgive you on your typing because your video was EXCELLENT!!
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. :)
THANK YOU FOR THIS. I threw up at class when this was went over, I felt lost as shit. THANK YOU
Super helpful, If you want to learn fast, you can set your speed to 1.5 and it is still easy to follow
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!
Best tutorial !!! using Bootstrap is like having superpowers !! Can't wait to build some websites with it
Just bought your bootstrap udemy course.Your tutorials on youtube are really helpful. Thanks you sir!
The more i see this tutorial the more i love it. I am gonna buy your udemy tuts
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 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
Very helpful 🤞
@42:21 - > 150th line can be
Man, that was really cool! I enjoyed. Keep it up!
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!
I was looking for a step by step demo on how to use bootstrap and you nailed it. Thank you for this!
Just AWESOME!!!! Greetings from Dominican Republic !!!
I watch your videos while I'm at work so I can start a career in this field
best tutorial-crisp and clear explaination
Extremely useful tutorial for beginners! Thank you Brad for sharing. 👍😃
[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.
Man! you are everywhere on the net!
yours is the best tutorial i have ever seen on you-tube for bootstrap. thank you for being so helpful :)
Great, thank you.
for anyone who wonders why the live server was not reloading, it was because the live server does not work if there is no tag like the body or head tag.
Thank you very much for this! Just FYI, In MS Code, there's a plugin called HASHER where you type the full code, highlight it and apply Hasher: Encode and add's all the coded ascii stuff for you.
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.
Thanks Traversy for always making learning new things so easy and interesting.
It was great introduction. I was new to Bootstrap and I liked it👍👍👍
2020 still BEST tutorial for Bootstrap beginners!!! thank you
Hi, is this relevant as of today?
Thanks for this, Stunned how quickly I picked it up.. don't know why I haven't done it sooner. So well delivered.