Next.js 13 - Installing Bootstrap With The App Router
Vložit
- čas přidán 27. 08. 2024
- See how to integrate Bootstrap into a Next.js project using the new app router from Next.js 13. This guide covers setup of bootstrap CSS, as well as JavaScript so all aspects of bootstrap will work in your Next.js project.
🖹 View the written guide: 1manstartup.co...
▶️ Setup bootstrap with Next.js page router: • Install Next.js & Boot...
👉 Complete code on GitHub: github.com/dav...
#nextjs #bootstrap
If you're using Next.js with the Pages Router see this video: czcams.com/video/RkeDCqs2vdg/video.htmlsi=2ygxBcEzRWkXUrsj
A life saver! Thanks, I always prefer watching rather than reading...
Glad it helped! This was the first one where I tried both
Duuuuuuuuuuuuuuuuuuuuuude. thanks a million times, million!, i was stuck on this for 2 days.
i don't know how to thank you ❤❤❤❤❤❤❤❤❤❤❤❤❤❤
Glad it helped! The same thing happened to me when initially setting this up.
Thank you 🙏
Great!! 🎉 now it works, thanks for the video 👏🏻
Great to hear!
Nice work man!
Awesome. Thanks bro 🎉🎉🎉
No problem 👍
Thank you for sharing.
Very helpful video, thanks for posting it. :)
Glad it was helpful!
This is awesome.
Thanks man !
thank you for your video
Thanks it help a lot
No problem!
Thank You Sir 😊😊
Most welcome
Which is the best approach for pops, accordian etc bootstrap.js or react-bootstrap?
I think either is a fine option. But react-bootstrap seems like an additional tool, if you just want to use bootstrap as it's shown in the bootstrap docs then go with bootstrap.js. Use react-bootstrap if you want to use the React-Bootstrap components
helped a lot, i was trying to use the _app.js approach and didnt work,
Awesome glad this worked
nice! very nice! 👍
Thanks Brother
Thank You
Thank you so much.❤
If i'm importing and component above the children, then the BootstrapClient component doesn't work
How to fix this?
Have you tried putting BootstrapClient above all of them?
One question, if I don't have the layout component, may I add BootstrapClient in each component? Or how Can I do it?
If you don't have the layout component then you're probably using the Pages Router. If that's the case this video shows the setup czcams.com/video/RkeDCqs2vdg/video.html
But no don't add it to each component, there will definitely be a way you can add it in one location.
Clean
Hey mate what about the font? Im trying to setup a custom font with this exact setup but bootstrap overrides it, im importing it before my globals and all that, my fonts are actually being defined in my css classes so idk how i should do it :/
If you're using google fonts then the way this is configured will work. It's setup using Inter for the whole project but if, for example, you wanted to use Inconsolata for all the h1 tags in globals.css you'd just add:
h1 {
font-family: "Inconsolata";
}
@@1ManStartup yeah i have tried using this import, it loads but then bootstrap variable overrides it with bs default, ive tested on devtools and also disabled bootstrap, then my font appears idk i will try to debug this tomorrow
also video embed is bugging your site on ios
@@d77droid I just tested it myself and I was able to see a custom font for h1 tags based on globals.css & the default inter for everything else.
Maybe your imports are out of order?
@@d77droid Thanks! I'll look into that
Very good , excelente , estube una hora tonteando y no funcionaba
That is weird tutorial, there is react bootstrap that should be used here
react-bootstrap looks like a nice alternative, although it might have a slight learning curve for those already familiar with normal bootstrap classes, thanks for sharing!