How to Install Bootstrap with NPM (Best Way)

Подписаться 130 тыс.

Просмотров 47 тыс.

50% 1

👉 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

Наука

Опубликовано:

26 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@stevemesser4842 6 месяцев назад

Absolutely the best Bootstrap / NPM tutorial I've seen!!

@roving-camera_72 Год назад

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.

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

this is extremely clear and provide lots of code explanation. exactly what i need. much appreciated.

@JuanManuelLinaresBloggerDeNiro Год назад

Clear and straight to the point. Thanks a lot!

@thirty_character_limit 2 месяца назад

I finally found a video to help me compile SASS. Thank you so much for your great content!

@Jento. 3 месяца назад

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.

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

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.

@leespilsbury3621 3 месяца назад

Nice video mate, simple and easy to follow

@DanClapp Год назад

Bro I would have never been able to figure this out on my own, thank you!

@bixgomez2839 Год назад

Thanks a lot, this was really helpful! Very straightforward, as others have noted.

@timsqsqssqq 9 месяцев назад

thanks a lot your voice is really calming when you explain something. Thanks a lot and i will buy your courses!

@lespalmer910 2 месяца назад

Excellent tutorial, now I have a better understanding of using Bootstrap5, thank you for taking time for uploading an excellent Bootstrap 5 tutorial.

@zero67187 Год назад

Thank you so much! Very straightforward tutorial

@Wsiol 6 месяцев назад

Top man! Concise structured content. Thank you for your time, this movie helped me a lot!

@stefanhammer3821 Год назад

Absoultely awsome! Thank you for this tutorial! Helped me out alot : D

@thesazanov1 Год назад

Great job dude! Nice lesson!

@bilalahmedkhan5876 Год назад

Dude thank you SO MUCH for this!

@PrivacyEnjoyer Год назад

Bro, you helped me a lot! Thank you so much!

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

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.

@jenglish1986 5 месяцев назад

Very concise I like the examples you threw in to test the links

@pablocortes9102 Год назад

Man, you are amazing, thanks a bunch for this video.

@MatissR-bp6cp 2 месяца назад

Thank you very much, you really know how to explain it

@wealthgenerationstrategies 2 месяца назад

Excellent tutorial for sure. I was able to take what was illustrated here and translate to using it with JetBrains WebStorm app. Thanks!

@JoaoPedro-dr4vo 7 месяцев назад

Thank you for the video! Very helpful

@navyadvancement Год назад

Awesome video, thank you kindly!

@nitesh1292 Месяц назад

Thank you very much For making this informative video

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

very helpful and easy to follow video!

@opponion2821 Год назад

best video about how to use bootstrap with npm, thank you very much

@draigan Год назад

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.

@PrivacyEnjoyer Год назад

I feel your pain dude...

@bixgomez2839 Год назад

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!

@januarfe 10 дней назад

this is what i need, thanks

@zyrogaming2033 Год назад

Thank you very much bro i learned it from scratch

@666tradash999 Год назад

deserves more viewer, helped me alot, thanks

@wogalwogal Год назад

Hi Good Morning - Thank you Very Much For Taking The Time To Do These Awesome Video's . I Apricate It Thank You

@lucam.2968 4 месяца назад

Thanks that was great explanation --really helpfull

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

Easy to follow!

@rodrigodesanmiguel8481 Год назад

thanks a lot man, i like your content :)

@user-vz8ku4sg5j Год назад

Thank you very much!

@moh3n_deniku Год назад

Thanks it was very helpful

@kopiko4881 Год назад

You look like IntoTheMix

@Miltonhn 4 месяца назад

Magistral 👏🏼 I spent this time watching a video with so much value well done

@joeri29 5 месяцев назад

thank you, bedankt😁😁 !!

@bubostudio 8 месяцев назад

Very good thank you.

@secret_ufo 9 месяцев назад

thanks, very helpful

@michalsvata 5 месяцев назад

Awesome video ;)

@DK-ez5dg 8 месяцев назад

Very helpfull thx.

@moeiei 9 месяцев назад

Thank you so much! 😭

@user-sy7lm6lw8i Год назад

thank you!!

@groovebird812 4 месяца назад

Very clear and good explained. Your theme of VS Code looks good. What is the name of this theme?

@sander3236 Год назад

good video!!!

@mhbutfprtsi 8 месяцев назад

thanks! 👽✌

@melissakinney7896 Год назад

@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.

@upcoder 6 месяцев назад

Hi! what about font-awesome or slick slider? the cdn will be best for it? Thank you!

@xb_diandra301 Год назад

Thanks bro

@ke1n14 14 дней назад

Pero que buen video, definitivamente en ingles esta la información top

@tyo9522 Год назад

thanks

@casadodevjunior1939 8 месяцев назад

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

@Weston_Guidero 8 месяцев назад

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?

@jamesyboy5593 Год назад

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?

@tonhonpa 3 месяца назад

great

@Tapeholder Месяц назад

I can only comply it when the main.scssis empty and it won't work when there is anything in it.

@clockwise9179 Год назад

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

@omaralia1914 8 месяцев назад

how to support bootstrap rtl v5 please

@Jento. 3 месяца назад

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

@cozy9032 Год назад

Which theme is he using?

@josuer4675 Год назад

Thanks 😭

@humaidahmedabuzinjal6257 Год назад

what fonts and theme are you using?

@ByteGrad Год назад

It’s the Monokai Pro theme

@namratadesai774 Год назад

do we have to install bootstrap through npm for every new project?please help?

@user-wd7gx2bf9m 3 месяца назад

yes

@OneBrokeBloke Год назад

Dont know why, but linking the JS does not work for me, navbar wont open with this:

@jamesmichaelsimmons 6 месяцев назад

Maybe you need to go up a directory first. Have you tried adding ../ in front of what you wrote

@elvykamunyokomanunebo1441 Год назад

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

@ByteGrad Год назад

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

@elvykamunyokomanunebo1441 Год назад

@@ByteGrad I am also very busy so I'll just have to find an alternative. Thanks for taking the time to respond to me. :)

@asadabbas505 5 месяцев назад

My javaScript file not link . i was done step by step

@bintangnaufal Год назад

SAVIOR

@user-rk8tg7hk6x Год назад

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….