Getting Started with Bootstrap 5 for Beginners - Crash Course

[@DesignCourse]

Are any of you still using Bootstrap, or have plans to use Bootstrap 5 in the future?

[@ead5590]

It's been quite a while since I've used Bootstrap mostly because I stick to using SASS for creating my own custom styling from scratch. But that was back when Bootstrap was v4. Time to hit the docs to see what's changed.. 😁

[@Silentanwa661]

@@ead5590 2nd this

[@kapa4208]

Been using tailwind and i have no reason to look back to any UI framework 😅

[@welling1]

I picked up Bootstrap a long time ago when my CSS skills weren't so sharp. I wouldn't touch it now for a real project.

[@justingolden21]

I started off web dev with bootstrap 3 and then 4. Recently I've been using tailwind and love it way more, but I've been awaiting bootstrap 5 and will certainly give it a go in the future. It's one of those things you may as well try, and it'll make some websites faster / easier to make. I like tailwind for any websites that I want to customize more or look nicer imo, also lighter file sizes and faster loads. But bootstrap really has some value in providing everything you need quickly. Tailwind has a UI kit thing as well, but it's expensive, I'll try it out someday though.

[@kofestotech]

Nice video, between 21:12 to 22:50 to push the navigation to the right, bootstrap 5 has "ml-auto" I tried that and it works for me, you add the "ml-auto" to the , for example ........ it works

[@TraversyMedia]

Damn it Gary. You beat me to it 😒

[@MultiMemich]

I'll watch both.

[@samisbgh6253]

​@@MultiMemich +1 😂

[@tmkj69]

I am eagerly awaiting yours!

[@rakib17874]

You Gotta Hurry...Brad😊😊😊

[@MysticMac000]

Maybe do one for bootstrap-react, Brad :) I would watch!

[@englishwitha5532]

Thanks. What I appreciated most about this tutorial was the fact that you went through the proper set up process (npm, parcel, folder structure ...). In most other tutorials, the tutorial starts by just adding the CDN files to the html file.

[@chebellipavankumar649]

Please do a crash course video like this on React or WordPress?

[@TeoVala]

At 21:50 where he says to align it right. At ---> Just add ms-auto and it works!

[@vladimiraleksic4066]

MS Stands for Margin Start😊 if I am not wrong 😂

[@stewartjames932]

Thanks!

[@rorycantellow2973]

Really good tutorial. Off the cuff and live dive into BS5. Great to see someone going small prep live and getting into flow. Reminds me of working in Ops. Brilliant.

[@krupeshanadkat635]

I would say tailwind css picking up, it would be really great to see tailwind css crash course 🙂🙂

[@cerealrakist7360]

I love tailwind. I have a recommendation for you. When I was learning it, the one video that I found amazing and thorough was the free one here on KZbin that scrimba put out. It’s a little old but it’s updated. Don’t be thrown off by the upload date. It’s up to date.

[@krupeshanadkat635]

@@cerealrakist7360 thanks, i know bootstrap very well. The thing is the components. Boostrap gives components and i can put up a scaffold with navbar, jumbotron, cards and footer in 30 mins. With Tailwind it takes whole day 😕 I need to put classes and make my own component library from raw..

[@krupeshanadkat635]

@@cerealrakist7360 tailwind has more classes than bootstrap so transition is not that difficult for me, i really miss pre made components. I know tailwind UI but most things there is paid.

[@ryanisthewind]

anything happens to this guy, it'll have an impact on the whole web world.

[@cerealrakist7360]

He is amazing!! He helps us for free and i don’t think he gets the recognition he deserves !!!

[@MagnusAnand]

You can change the position of the navbar items with just regular Bootstrap, no need for extra custom CSS. Like adding this classes: 1. "d-flex flex-row-reverse" 2. or "justify-content-end"

[@daverobb2011]

Hey Gary, some of your Parcel issues is that you are using parcel-bundler, instead of parcel 2.0.0. That is where the --experimental-scope-hoisting resides. Great tutorial!

[@AZTECMAN]

[30:00] To increase the spacing between items on the navbar I just added the class "me-3" (meaning left margin increase by 3) to each nav-item

[@fishinghunter4030]

@23:01 instead of creating separate css for justify-content, add d-flex and justify-content-end classes after navbar-collapse class

[@romievthedon]

Unfortunately, parcel-bundler has migrated to v2, and is now just 'parcel' for npm. So if you guys run into dependency issues just uninstall parcel-bundler (globally if necessary) and install parcel for the updated version.

[@steffe6410]

At 21:44 you just needed to add comma before d-flex Class="collapse navbar-collapse, d-flex"

[@surajpujari4014]

Never learned Bootstrap this much faster, Thank you, Gary!

[@AdiSings2023]

Probably the best Bootstrap tutorial on yt

[@KryptoWooks]

yo your a good teacher thanks for all the free education god bless u some people dont have money for school learned so much keep it up

[@olagisrarikis]

will accomplish the padding and you can use breakpoints on that as well...

[@matthewstorey3320]

can't wait to watch! Please do a React crash course as well :)

[@romievthedon]

I used "ms-2 me-2 text-center" on the 4 navbar-items to reposition the links on the right side of the nav

[@demetrous-yt]

Nice job! I had an issue with build: "....scss:undefined:undefined: plugin is not a function", fixed with reinstalled parcel "npm i parcel", not "parcel-bundler".

[@lukaanchieta2102]

Nice tip bro, it worked here. thanks.

[@Lobaluna9333]

Thank you . I totally grasped the concept and flexibility of Bootstrap! Also I thanked for the great HTML/UI design tips ;D

[@DriveandThrive]

It would have been a little helpful to explain why the import has to be below the code in scss. I think you may have briefly mentioned scss converts the code to css...perhaps this is why it has to be below the code in order to work.

[@wizzacx]

My life’s first corporate project and guess where am I for a crash course 💯

[@Webtricker]

Thank you so much for explaining Bootstrap 5 in such a simple and beautiful way. It's very helpful for beginners.

[@shrey768]

Why customize? Could have used "d-flex justify-content-end" to align navbar items to end

[@shaderone07]

or ms-auto would do the work

[@aryanpandey2879]

Probaby ml-auto should also work by giving it an auto margin on left

[@shaderone07]

@@aryanpandey2879 i don't think so ... because ml-auto does not work in b5, instead use ms-auto or me-auto (where s(start) replaces l(left) and e(end) replaces r(right).

[@aryanpandey2879]

@@shaderone07 oh didn't know about that. Thanks

[@aleksandraryan]

worked for me :)

[@Stormchazer-x9z]

Thanks a lot Gary. You made crash course so easy.

[@DjGilburt]

At 30:20 I found a way to increase the spacing between nav links. The items in the unordered list are under the flex property so you need to include the gap property in the html. Something like this! . Hope that helps anyone else :)

[@LemonDust13]

me: ~tunes into video~ gary: ~time to pick a font~ me: let me guess, poppins? gary: poppins! 😂

[@ahmadkhaled7497]

21:57 To move the options of the Navbar to the right side. Simply give the ul tag a class named 'mr-auto' and it will automatically move the options to the right side.

[@kevinkiarie3338]

doesn't work

[@TomSchouten92]

@@kevinkiarie3338 justify-content-between is what you're looking for. Might have to add d-flex.

[@kevinkiarie3338]

@@TomSchouten92 thanks my guy

[@steffe6410]

Might be a bit late but all I did was I added comma then d-flex so like Class="collapse navbar-collapse, d-flex"

[@TomSchouten92]

@@steffe6410 classes don't have to be separated by comma. Only need a space in between

[@porker5749]

I give up on Bootstrap...I got to the npm run dev and got nothing but error messages. Earlier when installing the parcel -g file I got errors as well, saying that most of the packages were out of date. F... this. I'm out of Bootstrap!

[@elliotbaker3757]

Same what a nightmare to just get it running

[@robomq9186]

Excellent tutorial!! Very much appreciated !! 🙂

[@abhijeetdhanwate4065]

Anyone still getting an error with npm run build? "build": "parcel build --public-url ./ ./src/index.html --out-dir build"

[@petertroymacero9780]

yes! until now i cant debug it.

[@funnyhaha19]

Note that "parcel-bundler" has now been depreciated but is worth still using as the newer "parcel" bundle is currently broken (Jan 2022)

[@ThanHtutZaw3]

1:55 hostinger show all low prices are useless. When I select lowest price(one month) , all total prices are 9$ above(with coupon).Why

[@AdrianCardoza]

24:15 that's what she said. Literally, my frontend professor always says that :).

[@cerealrakist7360]

You don’t get the recognition you deserve! Although I have to admit that you are pretty well known and are considered amongst the top best , in my book 💯 and pretty much everyone else’s lol

[@justingolden21]

Love the content as always Gary. Would float have worked in the beginning of the video? Also, I think it would have been helpful to show how to change the column breakpoints to make them fit full width on mobile. Keep making awesome stuff : )

[@2525samot]

Thank you so much for this video Noob Life Saver!

[@pukstar]

For right-aligning the navbar elements, have you tried adding flex-row-reverse to the navbar-collapse div? Worked for me.

[@joshuapearson7405]

Thanks for the course! Installing Bootstrap was me basically doing things that made no sense to me considering I am new to the command line and am unfamiliar with a lot of the things I was installing. Is there a good resource for trouble shooting? I got a few errors with 'npm run dev'.

[@danishjaffri8840]

Amazing, waiting for React Course

[@robertstimmel1100]

Thank you, Gary. This is a great video! I have been trying to teach myself to learn to code over the past few months. I spent a lot of time working on C#. Now, I am working on HTML and CSS. So far, this is much easier than working in C# (and it's pretty fun too). With a little luck and a lot more work, I am hoping to be able to make a career change within a few more months. This would've been nearly impossible for me if it weren't for videos like this and mentors to teach me the things I need to learn.

[@hiteshsuthar1097]

After Ur sad story, I'll definitely watch it👍

[@儒豪呂]

can you plz share you vscode theme. that is so cool

[@justingolden21]

Gary uses winrar when windows10 includes zip file support by default in the right click menu! Also they really should pay for your temp domain name for your example to get people to use them lol. That takes a little while to get the initial thing setup, but I was in awe at how fast the website was live after you uploaded the zip. I know the file size is small but wow that's impressive, usually takes me a bit longer on github pages, netlify, and firebase.

[@sholaadelabu6075]

Hi there have you heard of any issues installing Bootstrap 5 on the M1 macbook?

[@llothar68]

Looking for a mobile-last toolkit, any recommendation?

[@xshad0w13x]

i have followed the video step by step everything seemed to work just as the video.... howver $body-bg:black; does nothing in my browser

[@MysticMac000]

Awesome! I would love a similar course on React Bootstrap :)

[@taraksaha9]

I was expecting you to use bootstrap grid with flexbox.

[@namessis]

body-bg or other commands not working on my custom.scss any idea ?

[@dobie9400]

Loved the course. After the npm run build, I got it all working except for the dropdown menu. Can't find a solution. Anyone?

[@mounirbli]

Thank you Gary!

[@gabhubdesigns6393]

Thanks Gary but my custom sass file is not working. Anytime I write a style code it doesn't show in the browser. Can anyone help me out?

[@levihenrydotcom]

There's an issue with parcel. I tried this method twice, and both times it produced a Build Error, specifically "The "data" argument must be of type string or an instance of Buffer, TypedArray, or DataView. Received null." Save your time, don't use parcel.

[@ΝικόλαοςΤζουνάκος]

great tutorial thanks!

[@lukogs]

Can someone tell me how to add bootstrap to new project? should i need to run npm install again for every new projects or is there other codes? I heard somewhere that if npm bootstrap is only one time process..

[@JosephCampbellSolutions]

adding class h-100 to all the cards.. will give the cards equal height.

[@theironpixel]

Tried this and when I uploaded my site to my host, the navigation "download links" section didn't come up. Looking at console I saw it wasn't pulling popper.js. Trying to troubleshoot that now.

[@programmersharif7834]

Awesome.......!!! thank you so much,,,,,, sir.

[@talhaibnemahmud]

A Tailwind CSS Crush Course

[@olagisrarikis]

will push to the right....

[@codechimps]

Such a good video, better than we could do!😂

[@littlesandra87]

Can Bootstrap me used with React, so doesn't it make sense to combine the two?

[@DesignCourse]

It can be used with React, but just because it can, doesn't mean it always should. 😂 I personally do not like React. I'm a Vue guy.

[@samisbgh6253]

What is your color theme 🙄??

[@avinashmurmu9070]

Thank you so much ❤️❤️❤️

[@krunalshrimali4471]

Fonts look very small, Sir. Please zoom or make fonts bigger. Unable to watch on mobile.

[@rahavareddy5510]

Waiting for this video

[@collinskirui7885]

am living under a rock

[@Hassie]

"Boring company, which is Elon Musk's company" Someone lost their moneyyy 😂

[@yondaime_dg]

thank you ❤️😁

[@NevenZec]

I get code ELIFECYCLE error when I try to run build... can`t find a solution on the net. What to do?

[@amuridesu]

found this solution, it works with me.. maybe ur file is still inside node_modules, try to move it out

[@codedjango]

I so wish if Gary could do a Vue JS 3 tutorial...

[@rezarahman1782]

Pretty much same as 4. But it was a good tutorial. 🥰

[@NecolasHamwi]

Third time is a charm!

[@jitxhere]

Please make a tailwind one

[@_moxy9905]

Edward Norton look-alike is back!!! :)

[@ari_eru-chan]

the dropdown isn't working for me

[@majdshaheen8136]

the run build is not working

[@mdfasadik9843]

Sir please, do a crush course on Tailwind CSS... please please please...

[@unickvibe6926]

Like before watch ❤️

[@theisoj]

Thanks 😊

[@romievthedon]

When I set up the navbar it took up the entire screen and appeared to be made for mobile. Then I realized the browser was on 500% zoom😆

[@bernardchisumo4054]

[@majdshaheen8136]

You should take the majesty out if you want us to concentrate with you

[@IbrahimOseyi]

Waiting for Todo List and Form Validation tutorial

[@romitranjan3189]

npm run dev is showing error what to do ??

[@ftoome545]

add a type= "module" in the script tag.

[@Arjun-yj1es]

I want to learn front end development from Gary what should I do? 7:26 🤣

[@patrick9969]

2:16 pain💔

[@hackerdaddy2828]

make a crash course of tailwind

[@jt663]

Legend

[@andrewmiddleton2308]

25:00

[@luquillano997]

27:43 that's a dead laugh

[@Silentanwa661]

you'd think the people at bootstrap would have a better mind for design and not putting v4 build in v5 docs....

[@abubakargame19]

18:00

[@AbrarKhan-sl1ju]

nice video

[@Troevo]

Please add subtitles