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.. 😁
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.
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.
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
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.
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 TH-cam 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.
@@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..
@@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.
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!
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"
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.
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 : )
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.
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
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.
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'.
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.
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.
@@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).
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!
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".
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 :)
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.
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..
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.
Are any of you still using Bootstrap, or have plans to use Bootstrap 5 in the future?
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.. 😁
@@ead5590 2nd this
Been using tailwind and i have no reason to look back to any UI framework 😅
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.
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.
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.
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
Damn it Gary. You beat me to it 😒
I'll watch both.
@@MultiMemich +1 😂
I am eagerly awaiting yours!
You Gotta Hurry...Brad😊😊😊
Maybe do one for bootstrap-react, Brad :) I would watch!
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.
anything happens to this guy, it'll have an impact on the whole web world.
He is amazing!! He helps us for free and i don’t think he gets the recognition he deserves !!!
Please do a crash course video like this on React or WordPress?
At 21:50 where he says to align it right.
At --->
Just add ms-auto and it works!
MS Stands for Margin Start😊 if I am not wrong 😂
I would say tailwind css picking up, it would be really great to see tailwind css crash course 🙂🙂
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 TH-cam 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.
@@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..
@@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.
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
Never learned Bootstrap this much faster, Thank you, Gary!
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!
can't wait to watch! Please do a React crash course as well :)
Probably the best Bootstrap tutorial on yt
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"
Thank you so much for explaining Bootstrap 5 in such a simple and beautiful way. It's very helpful for beginners.
me: ~tunes into video~
gary: ~time to pick a font~
me: let me guess, poppins?
gary: poppins! 😂
My life’s first corporate project and guess where am I for a crash course 💯
At 21:44 you just needed to add comma before d-flex
Class="collapse navbar-collapse, d-flex"
Thanks a lot Gary. You made crash course so easy.
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.
Thank you . I totally grasped the concept and flexibility of Bootstrap! Also I thanked for the great HTML/UI design tips ;D
Excellent tutorial!! Very much appreciated !! 🙂
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 : )
will accomplish the padding and you can use breakpoints on that as well...
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.
Thanks!
24:15 that's what she said.
Literally, my frontend professor always says that :).
After Ur sad story, I'll definitely watch it👍
Thank you Gary!
Thank you so much for this video Noob Life Saver!
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
@23:01 instead of creating separate css for justify-content, add d-flex and justify-content-end classes after navbar-collapse class
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.
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'.
I used "ms-2 me-2 text-center" on the 4 navbar-items to reposition the links on the right side of the nav
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.
great tutorial thanks!
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.
doesn't work
@@kevinkiarie3338 justify-content-between is what you're looking for. Might have to add d-flex.
@@TomSchouten92 thanks my guy
Might be a bit late but all I did was I added comma then d-flex so like
Class="collapse navbar-collapse, d-flex"
@@steffe6410 classes don't have to be separated by comma. Only need a space in between
A Tailwind CSS Crush Course
[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
Waiting for this video
Why customize? Could have used "d-flex justify-content-end" to align navbar items to end
or ms-auto would do the work
Probaby ml-auto should also work by giving it an auto margin on left
@@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).
@@shaderone07 oh didn't know about that. Thanks
worked for me :)
Awesome.......!!! thank you so much,,,,,, sir.
Note that "parcel-bundler" has now been depreciated but is worth still using as the newer "parcel" bundle is currently broken (Jan 2022)
Amazing, waiting for React Course
Thank you so much ❤️❤️❤️
Awesome! I would love a similar course on React Bootstrap :)
thank you ❤️😁
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!
Same what a nightmare to just get it running
Edward Norton look-alike is back!!! :)
am living under a rock
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".
Nice tip bro, it worked here. thanks.
For right-aligning the navbar elements, have you tried adding flex-row-reverse to the navbar-collapse div? Worked for me.
Hi there have you heard of any issues installing Bootstrap 5 on the M1 macbook?
Thanks 😊
Anyone still getting an error with npm run build?
"build": "parcel build --public-url ./ ./src/index.html --out-dir build"
yes! until now i cant debug it.
Thanks
will push to the right....
Third time is a charm!
I was expecting you to use bootstrap grid with flexbox.
Such a good video, better than we could do!😂
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 :)
"Boring company, which is Elon Musk's company"
Someone lost their moneyyy 😂
adding class h-100 to all the cards.. will give the cards equal height.
Fonts look very small, Sir. Please zoom or make fonts bigger. Unable to watch on mobile.
You should take the majesty out if you want us to concentrate with you
Legend
Looking for a mobile-last toolkit, any recommendation?
Pretty much same as 4. But it was a good tutorial. 🥰
Can Bootstrap me used with React, so doesn't it make sense to combine the two?
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.
Thnx
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
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
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.
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😆
Like before watch ❤️
when i run npm dev i get 'parcel' is not recognized as an internal or external command please help
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?
Please make a tailwind one
Loved the course. After the npm run build, I got it all working except for the dropdown menu. Can't find a solution. Anyone?
Sir please, do a crush course on Tailwind CSS... please please please...
nice video
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..
Nice
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.
Love
I so wish if Gary could do a Vue JS 3 tutorial...
you'd think the people at bootstrap would have a better mind for design and not putting v4 build in v5 docs....
body-bg or other commands not working on my custom.scss any idea ?
Waiting for Todo List and Form Validation tutorial
can you plz share you vscode theme. that is so cool
make a crash course of tailwind
2:16 pain💔
I want to learn front end development from Gary what should I do?
7:26 🤣
What is your color theme 🙄??
20:46 had me dying
the dropdown isn't working for me
I can't view the website