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.
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"
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 RUclips 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.
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.
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!
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.
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!
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
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.
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".
@@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).
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 :)
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'.
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.
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 : )
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.
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.
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.
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!
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
Thanks!
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 !!!
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 😂
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.
Please do a crash course video like this on React or WordPress?
Probably the best Bootstrap tutorial on yt
At 21:44 you just needed to add comma before d-flex
Class="collapse navbar-collapse, d-flex"
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
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"
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 RUclips 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.
My life’s first corporate project and guess where am I for a crash course 💯
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.
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!
I used "ms-2 me-2 text-center" on the 4 navbar-items to reposition the links on the right side of the nav
me: ~tunes into video~
gary: ~time to pick a font~
me: let me guess, poppins?
gary: poppins! 😂
@23:01 instead of creating separate css for justify-content, add d-flex and justify-content-end classes after navbar-collapse class
Never learned Bootstrap this much faster, Thank you, Gary!
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.
will accomplish the padding and you can use breakpoints on that as well...
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
can't wait to watch! Please do a React crash course as well :)
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
Thanks a lot Gary. You made crash course so easy.
Excellent tutorial!! Very much appreciated !! 🙂
Note that "parcel-bundler" has now been depreciated but is worth still using as the newer "parcel" bundle is currently broken (Jan 2022)
[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
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
Thank you . I totally grasped the concept and flexibility of Bootstrap! Also I thanked for the great HTML/UI design tips ;D
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.
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 :)
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.
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 :)
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
For right-aligning the navbar elements, have you tried adding flex-row-reverse to the navbar-collapse div? Worked for me.
Thank you so much for explaining Bootstrap 5 in such a simple and beautiful way. It's very helpful for beginners.
After Ur sad story, I'll definitely watch it👍
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'.
Amazing, waiting for React Course
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.
can you plz share you vscode theme. that is so cool
Such a good video, better than we could do!😂
24:15 that's what she said.
Literally, my frontend professor always says that :).
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
I was expecting you to use bootstrap grid with flexbox.
Hi there have you heard of any issues installing Bootstrap 5 on the M1 macbook?
Fonts look very small, Sir. Please zoom or make fonts bigger. Unable to watch on mobile.
Thank you so much for this video Noob Life Saver!
great tutorial thanks!
Thank you Gary!
A Tailwind CSS Crush Course
Looking for a mobile-last toolkit, any recommendation?
am living under a rock
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 : )
Please make a tailwind one
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.
body-bg or other commands not working on my custom.scss any idea ?
adding class h-100 to all the cards.. will give the cards equal height.
Awesome! I would love a similar course on React Bootstrap :)
Awesome.......!!! thank you so much,,,,,, sir.
Waiting for this video
Thank you so much ❤️❤️❤️
Loved the course. After the npm run build, I got it all working except for the dropdown menu. Can't find a solution. Anyone?
Edward Norton look-alike is back!!! :)
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.
Pretty much same as 4. But it was a good tutorial. 🥰
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?
will push to the right....
Sir please, do a crush course on Tailwind CSS... please please please...
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..
Third time is a charm!
I want to learn front end development from Gary what should I do?
7:26 🤣
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😆
thank you ❤️😁
You should take the majesty out if you want us to concentrate with you
"Boring company, which is Elon Musk's company"
Someone lost their moneyyy 😂
I so wish if Gary could do a Vue JS 3 tutorial...
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.
Waiting for Todo List and Form Validation tutorial
Thanks 😊
Legend
the dropdown isn't working for me
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.
What is your color theme 🙄??
nice video
I get code ELIFECYCLE error when I try to run build... can`t find a solution on the net. What to do?
found this solution, it works with me..
maybe ur file is still inside node_modules, try to move it out
the run build is not working
Like before watch ❤️
make a crash course of tailwind
I wasted 40 mints of my life and I'm putting this comment
2:16 pain💔
Thnx
20:46 had me dying
Nice
27:43 that's a dead laugh
you'd think the people at bootstrap would have a better mind for design and not putting v4 build in v5 docs....