How to Install Bootstrap with NPM (Best Way)
HTML-код
- Опубликовано: 13 июл 2024
- 👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
Hi, I'm Wesley. I'm a brand ambassador for Kinde (paid sponsorship). I'll help you master the latest tech here:
👉 NEW React & Next.js Course: bytegrad.com/courses/professi...
👉 Professional JavaScript Course: bytegrad.com/courses/professi...
👉 Professional CSS Course: bytegrad.com/courses/professi...
👉 Discord: all my courses have a private Discord where I actively participate
🔔 Email newsletter (BIG update soon): email.bytegrad.com
0:00 Setup with NPM
2:19 Install Bootstrap with NPM
3:55 Looking at Bootstrap code
5:12 Including Bootstrap in project HTML
7:57 Compiling Sass / SCSS to CSS
10:48 Including Bootstrap JS
11:57 Overriding primary color
12:12 Remove source map and output window
14:19 Going to production
#webdevelopment #coding #programming 
Наука
Absolutely the best Bootstrap / NPM tutorial I've seen!!
this is extremely clear and provide lots of code explanation. exactly what i need. much appreciated.
Clear and straight to the point. Thanks a lot!
Lots of useful information for those that aren't familiar with both bootstrap and vsc, thank you for this. I know understand the process behind it better.
Nice video mate, simple and easy to follow
Thanks a lot, this was really helpful! Very straightforward, as others have noted.
Super helpful. I thought it would be difficult to edit default Sass in Bootstrap but this tutorial shows how easy it is. Thanks very much.
thanks a lot your voice is really calming when you explain something. Thanks a lot and i will buy your courses!
Absoultely awsome! Thank you for this tutorial! Helped me out alot : D
Top man! Concise structured content. Thank you for your time, this movie helped me a lot!
Great job dude! Nice lesson!
Thank you so much! Very straightforward tutorial
Thank you very much For making this informative video
Dude thank you SO MUCH for this!
Bro, you helped me a lot! Thank you so much!
Man, you are amazing, thanks a bunch for this video.
Excellent tutorial, now I have a better understanding of using Bootstrap5, thank you for taking time for uploading an excellent Bootstrap 5 tutorial.
Bro I would have never been able to figure this out on my own, thank you!
Thank you very much, you really know how to explain it
At first i was wondering why this is 16mins long. but after seeing the video I can say that this covers topic that are quite important specially for newcomers. i found it quite helpful.
Awesome video, thank you kindly!
Thank you for the video! Very helpful
Very concise I like the examples you threw in to test the links
bro this was super freaking helpful. I tried using the stupid npm template repo on the frontpage of the bootstrap site. Turns out its for version 4?? So I was trying to get shit to work and it just wasnt working. Wasted half a day on that garbage. I dunno why there isn't more straight forward directions on setting up a bootstrap environment. You're a good teacher man thank you! Subscribed. Oh and also the thing about the carousel example not working off the bat, from your other video, that saved me some hassle. thanks for that too.
I feel your pain dude...
YES! I just went through the same nightmare. Right in the 5.2 docs, there is a link to that antiquated repo! I too spent too long trying to get that nonsense to work. Bootstrap needs to hire this guy to write their documentation!
this is what i need, thanks
very helpful and easy to follow video!
Excellent tutorial for sure. I was able to take what was illustrated here and translate to using it with JetBrains WebStorm app. Thanks!
He mentions this earlier, but I thought I'd share: It's a good idea to notate during this video that the sass compiler is "watching". I came back to this video a day later to finish up this exercise and didn't have my sass compiler running. When I hit save after commenting out $primary: red; that change did not go into effect until I hit "watch sass" and saved the file again.
Awesome video by the way, I feel like bootstrap is more simplified and not as intimidating anymore.
thank you, bedankt😁😁 !!
Hi Good Morning - Thank you Very Much For Taking The Time To Do These Awesome Video's . I Apricate It Thank You
Thanks that was great explanation --really helpfull
Easy to follow!
deserves more viewer, helped me alot, thanks
thanks a lot man, i like your content :)
Awesome video ;)
Very good thank you.
Magistral 👏🏼 I spent this time watching a video with so much value well done
Very helpfull thx.
best video about how to use bootstrap with npm, thank you very much
Thank you very much!
Thank you very much bro i learned it from
scratch
Thank you so much! 😭
Thanks it was very helpful
thanks, very helpful
thank you!!
thanks! 👽✌
You look like IntoTheMix
good video!!!
Thanks bro
Pero que buen video, definitivamente en ingles esta la información top
thanks
great
Very clear and good explained. Your theme of VS Code looks good. What is the name of this theme?
@bytegrad Is there no way to use the CDN to change the color, or is this just your preferred way? My company is just starting to work with Bootstrap 5 and we use the CDN.
Hi! what about font-awesome or slick slider? the cdn will be best for it? Thank you!
Thanks 😭
Do you have to install bootstrap in the terminal for every project/workspace folder? Or... Better to ask how to do i get the node modules and package.json in a new project folder? I have already used it in a different one prior. Whats the process of adding bootstrap to a new project each time?
I liked how clear the tutorial is, but I think its kinda annoying to make my company's code have an extension dependency. I still think that parcel approach is more reasonable in these cases where you have a team
I need some help is it possible to do something like @import /node_modules/bootstrap/scss/bootstrap.scss or this not a thing? I keep getting errors. Can I only import from within the folder where the main.scss is?
I can only comply it when the main.scssis empty and it won't work when there is anything in it.
Not compiling? Try to just delete the dots in the beginning , you must write:
@import "node_modules/bootstrap/scss/bootstrap";
in your main.scss file
how to support bootstrap rtl v5 please
what fonts and theme are you using?
It’s the Monokai Pro theme
informative and helpful video however for something minimal like this you could shorten the video down to 10min or 5min its really more accessible for a lot of people :( 16mins just to picking up tutorial on how to install a css framework is really not the kind of video yt algorithim likes
do we have to install bootstrap through npm for every new project?please help?
yes
Which theme is he using?
I've followed the example but images are not loading I've included them in a sub directory img/
In vscode I can see a miniature version of the image on the left-hand side, so the src is correct.
any idea how to resolve this issue?
Best regards
Elvy
Hi, sorry I’m super busy so can’t give you a good answer. I highly recommend going through my Professional JS course (and CSS course) and these things become easy
@@ByteGrad I am also very busy so I'll just have to find an alternative.
Thanks for taking the time to respond to me.
:)
Dont know why, but linking the JS does not work for me, navbar wont open with this:
Maybe you need to go up a directory first. Have you tried adding ../ in front of what you wrote
My javaScript file not link . i was done step by step
SAVIOR
The internet is littered with “how to’s” published by instructors who know their subject but overlook the obvious; they are teaching “don’t know’s” and these instructors often forget vital instructions that are obvious to the ignorant.
Let me explain, look at 1:40:
npm init -y
Where do you type this? In the root directory of your project, in the directory where you will use bootstrap, or some other directory?
So Is blunder on and find I’ve done it wrong because the instruction was given by someone who knew what he was doing and assumed we did….
watch the seconds before 1:40 he literally shows you where to typethat
Tq ra punda