Bootstrap 5 Crash Course | Website Build & Deploy

Поделиться
HTML-код
  • Опубликовано: 29 ноя 2024

Комментарии • 912

  • @TraversyMedia
    @TraversyMedia  3 года назад +409

    One small thing I want to mention is around 33:20 when we add the icons, you will see a div with the class of “card-body” just pop in there. That got cut out for some reason, so just be sure to add that. Thanks for watching guys 😊

    • @camellaadam3475
      @camellaadam3475 3 года назад +1

      Can u update your bootsrap4 course also on udemy?

    • @venkatesh2788
      @venkatesh2788 3 года назад +1

      UPI payment integration with nodejs, please make a video on it

    • @cautionbaby8961
      @cautionbaby8961 3 года назад

      Hello Brad! I just wanted to ask what is the theme of your vscode?.
      Thank you!

    • @mixvideo2830
      @mixvideo2830 3 года назад +1

      I was wondering why my card looks weard. Thank you for tour tutorial

    • @Bashx1
      @Bashx1 3 года назад +1

      Also, on 34:20 you have the icons on icons.getbootstrap if you scroll all the way down

  • @bigneism
    @bigneism Год назад +28

    I'm 30 minutes in and I'm shocked. I cannot believe i waited so much before trying to learn Bootstrap, it's crazy how much easier it is, thanks Brad for the amazing tutorial

  • @FreddyCruzEstrada
    @FreddyCruzEstrada 5 месяцев назад +6

    I have tortured myself all these years, the css put me in trouble. But now I follow your tutorial, and things that took me HOURS to do are done here in a couple of minutes. Thank you!

  • @JayAyers
    @JayAyers Год назад +2

    Clifford Brown will always be my trumpet hero. I put him above all other trumpeters.
    He was a lyrical genius and I feel the world should know more about his music.
    Great rendition of 'I Remember Clifford'!

  • @kapitan5888
    @kapitan5888 5 месяцев назад +4

    Finished it, started around 12am saturday and did up to prior to the contact info section at 4:20 am around. Then after taking my course lectures came back and finished it just now :D.
    Thank you so much for Bootstrap practice!

  • @aguswidi9316
    @aguswidi9316 Год назад +2

    Watching this at 2:00 am, it was increase my knowledge of bootstrap5 in real world. Many thank's

  • @atruewild
    @atruewild 3 года назад +91

    As a hobby I decided to learn programming. Have started with HTML, CSS, basic JavaScript. (Not sure that is “programming”, or the feeling of completing a cross word puzzle.) Regardless you are a talented teacher! You have a humble quality that translates to encouragement- and anyone can learn how to do this. You are the Richard Feynman of learning front end development. Thank you!

    • @supertacticalbacon
      @supertacticalbacon 3 года назад +10

      Good luck! I'm coming in with a decent python background plus some compiled languages and HTML+CSS is kicking my ass. Honestly struggling with CSS more than I did with C and memory stuff.

    • @tawchaentertainment1488
      @tawchaentertainment1488 2 года назад +2

      @@supertacticalbacon you'll get it eventually it was the same for me Im a computing student and I got my head around html and css self taught in like 2 months

    • @zes3813
      @zes3813 2 года назад

      wrr

    • @SteffanPhoenix
      @SteffanPhoenix 2 года назад

      how far with your programming journey

    • @Moodboard39
      @Moodboard39 2 года назад

      @@supertacticalbacon lol they should left it as it is.. now they crap boostrap , gotta learn that now ..

  • @dwmkryft
    @dwmkryft 2 года назад +48

    I cannot express how much fun this was!
    I love the class shortcuts!
    and the fact that old school CSS can be used to add a little life to the very basic bootstrap makes it a great package.

  • @robiulhasan9553
    @robiulhasan9553 3 года назад +8

    I have done this project properly. Lots of thanks from Bangladesh.

  • @tusharkatariya1839
    @tusharkatariya1839 3 года назад +12

    Thank you, for existing and starting this youtube channel.

  • @cartman42069
    @cartman42069 3 года назад +4

    exactly what i needed. been self studying front end dev about 4 months now. thanks!

  • @prajulsahu9838
    @prajulsahu9838 3 года назад +2

    I was just about to start learning Bootstrap 5 today...and yeah...it's here. You've been my mentor, Sir.

  • @avian960
    @avian960 3 года назад +3

    Hey, I'm a student and I'm working on my "final" project currently, this video helped me a lot on how to start my website using the Bootstrap Platform.
    Thank you so much for this!

  • @uttamdutta1762
    @uttamdutta1762 10 месяцев назад +2

    This is one of the best courses I ever followed. Thanks.

  • @y6productions133
    @y6productions133 3 года назад +24

    Most detailed, simplified and amazing Bootstrap Tutorial I've ever seen on RUclips !!!
    Hats off ma man !!! ❤

  • @narcos1024
    @narcos1024 2 года назад +2

    This is live saving. Just started a project that is full of bootstrap and this helped me a lot. On the side note something like bootstrap or any css framework should never be used on any project, everything becomes a complete mess and extremely hard to maintain really fast.

    • @micaelalgarrao6043
      @micaelalgarrao6043 Год назад

      But only CSS is too hard and not fast. Big projects needs agility, and bootstrap can handle this.

    • @narcos1024
      @narcos1024 Год назад +1

      ​@@micaelalgarrao6043 In my opinion Bootstrap makes projects permanently slower, over engineered, far more complicated to build whatever and above all a complete nightmare to maintain.
      On a side note we completely ditched bootstrap. I have no idea why people use this in the present days since css3, grid and flexbox can do the job.
      But whatever works for you. :)

    • @micaelalgarrao6043
      @micaelalgarrao6043 Год назад

      @@narcos1024 ohh, I see :)

  • @ghaziali3504
    @ghaziali3504 3 года назад +11

    I watched this whole video, the instructor is truly amazing he is so straight forward and explains everything clearly Thankyou so much this content is seriously a gem. Best thing is I haven't got a single advertisement in between this whole lecture. Respect

  • @kalbizzy
    @kalbizzy 10 месяцев назад

    I'm lost for words at how beautiful this tutorial is. Can't thank you enough

  • @haejingreen8311
    @haejingreen8311 3 года назад +14

    This one is what I was exactly looking for my project. Really liked this is only about 1 hour course included hosting!! Thank you so much, Brad!!

  • @NewLondonMarshall
    @NewLondonMarshall 2 года назад +1

    As soon as I found out about CTRL + D / CMD + D, I use it every single day for changing multiple occurrences of the same text :) it's so good!

  • @seedme
    @seedme 2 года назад +3

    47:36 thanks for turning the documentation into real coding. Just one thing, I knew it is quite common to add a ghost element on top of body to push everything down. Another way of doing this is using css position sticky. In bootstrap 5 it is wrapped up as fixed-top class.

    • @ninadgns
      @ninadgns 2 года назад +1

      I tried both methods but none of these fixes the issue that when I click on the nav-links and it jumps to the respective section, the top part of the section is still behind the navbar :(

  • @hanjiplayer
    @hanjiplayer 3 года назад +1

    I was literally just looking through bootstrap videos because I was getting confused by w3; amazing timing, thank god

  • @GregOwenZA
    @GregOwenZA 3 года назад +14

    Most talented developer I know.

    • @vlogmoinc5597
      @vlogmoinc5597 3 года назад

      I taught him

    • @badname110
      @badname110 3 года назад

      some people say Alien

    • @yuck59
      @yuck59 3 года назад

      Don't get me wrong, I love his channel.. I'd consider him one of the best teachers, but most talented developer? Idk man there are some insaneeeee developers out there

    • @meilyn22
      @meilyn22 3 года назад

      @@yuck59 He said he's the most talented "He knows." He didn't say he's the most talented in the world.

  • @parthkadam2681
    @parthkadam2681 Год назад +1

    The instructor's teaching style is fantastic, and the real-world website makes it easy to grasp. Highly recommended for anyone looking to master Bootstrap 5. Happy to apply all the concepts in a project form Thumbs up! 👍🚀

  • @PervezAlam1
    @PervezAlam1 3 года назад +11

    Brad, Thank you very much, I was searching this type of tutorial where everything is explained very effectively in an easy way. Especially for Freshers.

  • @abc126990
    @abc126990 2 года назад

    Hello, my name is Paulo from Brazil, I just start as web developer, I just finished this project and it was very nice, thanks for the tutorial

  • @14ftdude
    @14ftdude 3 года назад +25

    Literally just watched your bootstrap first look yesterday and was wondering when the crash course comes out

  • @stblad3
    @stblad3 7 месяцев назад

    This is the easiest explanation of Bootstrap that I have come across!! Thanks, much appreciated.

  • @InfoTrickyOfficial
    @InfoTrickyOfficial 3 года назад +61

    "Success is not key to Happiness
    Happiness is the key to Success "
    So always be happy and keep smiling😍😍

    • @snoowwe
      @snoowwe 3 года назад +5

      A is not the [adjective] to B
      B is the [adjective] to A
      This is like the mom joke of inspirational quotes

  • @adrielt
    @adrielt 2 года назад +1

    I bought your course before when I was trying to learn bootstrap 4 back in 2018. It was really good didn't know you have a big youtube channel. I stopped learning to code and will try to relearn this again. Thank you for this video

  • @qcmira2024
    @qcmira2024 3 года назад +18

    Never disappointed when you realease a new video. Thank you Sir!

  • @collinscisiwu
    @collinscisiwu 2 года назад

    the fact that you've bootstrap documentation off heart is mind blowing

  • @xtractztv8628
    @xtractztv8628 Год назад +3

    Amazing tutorial. One for history. I have been working with this tutorial as I am new to Bootstrap and Emmett, and not HTML and CSS. I now feel a lot more confident. You taught me good habits and showed a lot for my future reference when building sites. I honestly feel so relieved haha

  • @imanidioli
    @imanidioli 2 года назад

    I don't know why, when I learn something from you, it hits the spot!

  • @ilyesmerzouk6682
    @ilyesmerzouk6682 3 года назад +8

    I literally needed this course yesterday, so ur a mind reader now 🧐

  • @TheSilmarallion
    @TheSilmarallion Год назад

    Ah man Brad the teacher of note, was battling to get the gutter on the columns and boom here you give the example thank you for all the tuts you have done and the ones in the future.

  • @bobfluencer
    @bobfluencer 2 года назад +4

    Please do the second video on customizing Bootstrap. Most Bootstrap videos are about just using it's classes to build a website, but I imagine most people will actually want to use their own colors and slightly change how buttons look etc. and somehow there very little info out there on how to work with the source files.

  • @eduardohenriquedeassis9729
    @eduardohenriquedeassis9729 3 года назад +1

    Hey Bro, it´s just spectacular!! Amazing job.
    The Button "Start the Enrollment" touches the div´s bottom between 992px and 1199px, so I added a:
    @media (max-width: 1199px) and (min-width: 992px){
    .enroll{
    margin-bottom: 20px;
    }
    }
    I target the button as enroll.
    After that, I just want to thank you again for sharing this knowledge!
    I just subbed!!
    Greetings from Brasil!

  • @infinityApologeticsClips
    @infinityApologeticsClips 3 года назад +56

    Another amazing course! I can't wait for an updated MERN stack course. Thanks Brad!

  • @socialkruption
    @socialkruption 3 года назад +1

    Comment section so much nicer here than Twitter, keep up dawg, good stuff right here.

  • @iamdanielkip
    @iamdanielkip 3 года назад +15

    This video has really helped me catching up with Bootstrap again. As always, amazing content, Brad. I really hope you can make the tutorial on customizing Bootstrap, that would be another life saver. Thank you!

  • @godfreyndiritu9062
    @godfreyndiritu9062 3 года назад +2

    Traversey's intro is funny, it reminds me of my high school teacher before starting a lesson 😂😂😂😂. Anyway thanks Brad you'll probably never have an idea of how much you've impacted my life and others. Blessings to you.

  • @nathanturkson208
    @nathanturkson208 2 года назад +3

    Just finished this video and learnt a lot during the code along. Many thanks Brad. You're awesome!

  • @kilanjertran428
    @kilanjertran428 3 года назад +1

    its so ironic that i just finished a section in a web development course im doing which was bootstrap an i get a video next day about brad's bootstrap 5 crash course lol thank u so much brad will be a good practice for me

  • @rifatspk
    @rifatspk 3 года назад +5

    I was waiting for your crash course. Thanks Brad. ❤️❤️

  • @saidneder41
    @saidneder41 3 года назад +1

    Brad, I have always struggled with Front end dev, but your tutorial is just too good to be true...

  • @spacegoods
    @spacegoods 2 года назад +3

    For anyone wondering which extension is he using for auto completion of markup, its called emmet and it's prebuilt into vscode for html files , if you want to use it in js file like in a react project then do little search, you need to paste a small snippet in settings.json json file for that.

  • @jayelliii1806
    @jayelliii1806 3 года назад

    Hello Brad:
    Thank you for taking the time for this tutorial. I am a brand novice to BootStrap and somewhat a novice in Python.
    The accordion refused to work when running off Python. I just loaded jQuery in the body (bottom before BootStrap) and it all worked. Nice; very nice.
    Once again, thank you.

  • @Bengadeer
    @Bengadeer 3 года назад +2

    Very pro delivery. Nice to listen to the original RUclips guru on web-dev. The fact you include your code and very comprehensive content in the comments is much appreciated.

  • @scouseTibeT
    @scouseTibeT 3 года назад +1

    I was going to go on a rant about the Hamburger btn not working
    ..but i have learned to check my spelling. It always amazes me how frustrated i can get over a missed placed r
    Great course and i learned a lot from it thank you.

  • @ale3xandria
    @ale3xandria 3 года назад +3

    Great video! Would love to see another one on customization etc that you mentioned in the beginning 🙏

  • @maxmaxray9091
    @maxmaxray9091 2 месяца назад

    Thank you very much ❤. For the link moving to the section , you did it right by adding which by click the link will move the page to the section Id=“learn”. Great job 🎉 thanks

  • @cilomiarraz
    @cilomiarraz 3 года назад +5

    Great video. It was a perfect introduction to the bootstrap 5. I could see its power... thanks a lot.

  • @achuyatsahajoy1390
    @achuyatsahajoy1390 2 года назад +1

    Learning becomes so easy with your courses. Thank you so much for delivering these courses for free.

  • @TheeMelloMan
    @TheeMelloMan 3 года назад +17

    Brad and FreeCodeCamp release a Bootstrap video at the same time lol.

    • @xJAYDENFx
      @xJAYDENFx 3 года назад

      Plus Design course

  • @gustavopinto2980
    @gustavopinto2980 7 месяцев назад

    i always hated frontend, never was my thing, but this guy made me love it , ur awesome man, if i became a full-stack its thanks to you!!
    keep up the awesome content!! 💪

  • @abenjamin13
    @abenjamin13 3 года назад +5

    Sweet thank you 🙏 Brad. I’ve been meaning to learn 5.

  • @mauro21523
    @mauro21523 3 года назад +1

    I am designing and doing a portfolio for my new job, thank you Brad.

  • @johnherrera5913
    @johnherrera5913 3 года назад +6

    Master! Great explanation, very clear. You're such a good teacher, thanks a lot!

  • @sujanmuppavarapu8281
    @sujanmuppavarapu8281 Год назад

    I actually found this video when i asked chatgpt to give me some info on classes of bootstrap 5....its amazingly explained

  • @Kandufilms
    @Kandufilms 3 года назад +15

    One thing I get frustrated and enjoy is when I mess up the code following along and have to learn what I did wrong :P

    • @timbittins
      @timbittins 3 года назад +5

      Welcome to the rest of your life.

    • @Kandufilms
      @Kandufilms 3 года назад +1

      @@timbittins I was like why is my nav menu not coming in like his, it's all because I bunched up the words with a - instead of leaving it spaced for one section. >.< lol

    • @albedesigns
      @albedesigns Год назад

      This just happened to me (lol)

    • @albedesigns
      @albedesigns Год назад

      I accidently entered another and completely messed up the navbar lol

  • @stolsinfx
    @stolsinfx 3 месяца назад

    Yoh! I've just modified my website and it looks super awesome just from this 3 years old video... And am only on the 18m marker! Danko Brother!

  • @Wanderer2035
    @Wanderer2035 2 года назад +9

    Now I don’t have to have a bloated CSS file, Bootstrap will take a huge load off my back. I’m thinking I’ll do like 30% vanilla CSS, and the rest Bootstrap.

  • @PRIYANKASharma-uv8lx
    @PRIYANKASharma-uv8lx 2 года назад +2

    You are a wonderful teacher, good understanding everyone can learn from you either beginners or developer. I have taken four courses of yours from Udemy. Your teaching method is easy to understand. Thanks Brad God bless you.

  • @konstantinosvasili551
    @konstantinosvasili551 2 года назад +3

    Well done for this tutorial. It would be nice to make an introduction first explaining the possible classes that every element can have or the the most commonly used, and then dive into the implementation. The way you organized the tutorial you keep creating the different components of the site assuming that everyone is aware of the classes that each element takes. Overall the tutorial is very good. Thank you for providing your knowledge.

  • @Mighty_Dork
    @Mighty_Dork 2 года назад +2

    This was really good. As someone who started HTML and CSS and JavaScript yesterday I could have used a bit more explaining what some elements / classes were doing but considering how novice I am and how much I understood I think this is a great video

    • @ambuyat69
      @ambuyat69 2 года назад

      how's the progress so far?

    • @axlblazeauthor
      @axlblazeauthor Год назад

      @@ambuyat69 you a beginner too buddy?

  • @anonymouseverx
    @anonymouseverx 3 года назад +3

    I cant say thanks enough. Thank you, Brad.

  • @jowsiff
    @jowsiff 3 года назад +1

    This is by far the best course on Bootstrap by a mile!!

  • @mike_valan
    @mike_valan 3 года назад +3

    Thank you, Brad! We love you!

  • @tuanphanthanh5111
    @tuanphanthanh5111 3 года назад

    your teaching iss one off the best out there, for free

  • @ashtarpaniagua4732
    @ashtarpaniagua4732 3 года назад +2

    Yes!!! I've been waiting for this. You're the MVP, Brad

  • @RameshPatwardhan
    @RameshPatwardhan 2 года назад +1

    Fantastic ... Most of the important things are covered in about 80 minutes!

  • @headspace6457
    @headspace6457 3 года назад +5

    Awesome video! Thank you for all of the time and energy that you put into making these.

  • @AhmedMuhammed-et4de
    @AhmedMuhammed-et4de 10 месяцев назад

    Wow, this tutorial was an absolute game-changer for me! I started off feeling a bit overwhelmed, but your step-by-step guidance and explanations made everything click. Now I feel confident diving into Bootstrap projects. Your efforts are greatly appreciated - keep up the fantastic work! 🙌👏

  • @marcgold424
    @marcgold424 3 года назад +10

    This was very dope! Informative, great pace, explanations when needed, it actually works and then you added the deployment as if you had not helped enough. Thank you very much!

  • @UFO_808
    @UFO_808 2 года назад

    I am shocked by how cool bootstrap is... And this tutorial is so dope, I love you man.

  • @Dev_Dike
    @Dev_Dike 3 года назад +3

    Traversy Forever, Brad... Thanks for pulling me out of tutorial hell.

  • @yodkwtf
    @yodkwtf 3 года назад

    I learned a bit of bootstrap after learning css last year but didn't create anything. Now that Bootstrap came out with new version this video is super useful. Thanks Brad!

  • @quachaihiep3251
    @quachaihiep3251 3 года назад +5

    Awesome! I was considering buy your bs4 course on Udemy, hope you can upgrade them with cool changes. Thanks a lot

  • @ericgathinji
    @ericgathinji Месяц назад

    Thank you sir! Really amazing how you just add the classes fast and sure.

  • @glennadams8833
    @glennadams8833 3 года назад +3

    Thanks Brad! Very nice bootstrap refresher... and just in time to help me sort out some layout issues with my own project using Mapbox.

  • @puvididdle
    @puvididdle 2 года назад

    Thank you for the tutorial, and thanks for mentioning that this is a sponsored video from the beginning.

  • @nghiahoang7978
    @nghiahoang7978 3 года назад +6

    Love from Vietnam!
    Can someone please guide me (why class "ms-auto" can pull the navBar-Item to the right 11:37 )?
    Thank you so much!

  • @Arabian_Abomination
    @Arabian_Abomination 3 года назад +1

    I am really liking bootstrap

  • @stvnk1m
    @stvnk1m Год назад +1

    I really enjoyed the tutorial. Straight to the point. Please make more tutorial content. 🎉

  • @vincentole
    @vincentole 3 года назад +3

    Great tutorial! This was very helpful, thanks for all the work.
    I have a questions regarding all the "Build a Website" tutorials:
    How would you deliver a project to a client? Do you create the bootstrap page and then use a specific CMS that is linked to that page? If you have a tutorial on that could you point me to the video please? Thanks :)

    • @Moodboard39
      @Moodboard39 2 года назад

      Freelance or fivver , or GitHub and get paid

    • @Moodboard39
      @Moodboard39 2 года назад

      Or your own website selling .

  • @kamalshamim6784
    @kamalshamim6784 Год назад

    Your ability to explain is amazing .. Brother I love you💚

  • @chrisstucker1813
    @chrisstucker1813 Год назад +5

    Outstanding as usual Brad. You're one of the very best at what you do, such a great teacher. Eternally thankful!

  • @johnbyronalzate4372
    @johnbyronalzate4372 Год назад

    Yoy may add the property h-100 in the element around the hour of video, so the card's height doesn't change when adding or quitting text.

  • @puneeth1551
    @puneeth1551 3 года назад +5

    Thank you for the tutorial ❤️

  • @baspiepers7415
    @baspiepers7415 2 года назад

    You make this look easy, Brad. Thanks and greetings from The Netherlands.

  • @hamzaellaouzi9319
    @hamzaellaouzi9319 3 года назад +2

    Great course Teacher!! Would you make such a course dynamically with react ?

  • @iluvsyphonfilter
    @iluvsyphonfilter 3 года назад +2

    Thank you very much! I was actually watching your old bootstrap crash course yesterday and wanted to see how the bootstrap 5 works 👏

  • @shloimiminkowicz4188
    @shloimiminkowicz4188 3 года назад +7

    Great course Brad !! Would you make such a course dynamically with react ? Would love to see some more react projects

  • @antonyjosep6787
    @antonyjosep6787 2 года назад

    Thanks a lot. While following your tutorial and playing around as I learn, I realized that can fix the navbar using sticky-top without having to use the body::before pseudo selector in the customer CSS.

  • @kernelpanic901
    @kernelpanic901 3 года назад +4

    Is it just me, or did the "" text just appear on the screen at around the 33:24 mark?

  • @AdrianLopeJavier
    @AdrianLopeJavier 11 месяцев назад

    you helped the begginers alot!!!!! thankyousomuch

  • @mr.jaweedkhan3364
    @mr.jaweedkhan3364 3 года назад +3

    can you please create backend also custom admin panel using bootstrap 5

  • @Zolipants
    @Zolipants 2 года назад

    Man you are a master, thanks for the tutorials.
    I understand more from here than from university haha

  • @lycan2494
    @lycan2494 3 года назад +4

    Is ur udemy bootstrap 4 course still up to date?

    • @TraversyMedia
      @TraversyMedia  3 года назад +3

      If you use Bootstrap 4 yes. If you use 5 you will have to change up some class names. It’s on my list to update this year