How to Use the React Bootstrap Nav and Navbar in Gatsby JS (Dark Mode too!)

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

% 98

HTML is just that-a markup language. It's semantic to use proper markup when you setup your navigation, with the nav and the navbar tags. React Bootstrap provides the assistance with both in the framework.
In this tutorial, you'll learn how to setup a navigation with react bootstrap and how to break the navigation in a mobile mobile at select breakpoints. You'll also learn how to change the navigation from light to dark with only a few variables. Dark mode starts at 27:47.
Thanks,
Haydn
- - - - - -
⤵ Download ALL of my source codes & more!
Introducing ADWC PRO
pro.adesignerwhocodes.com
ADWC Pro provides you with:
• Access to all the source codes for ALL projects
• Bootstrap Bootstrap online course (retail $79) w/ supplied source code
• All future online courses (Gatsby v5 course coming soon)
• Updates of ADWC and the web dev business
• and more!
Price:
Just $6/mo. or $49/year (32% off monthly)
-------
Got a question for me?
adesignerwhocodes.com/contact/

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

10 мар 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@sha5b 2 года назад

dude, i love your tutorials, i was searching for a good bootstrap tutorial for gatsby for ages.... THX!

@ADesignerWhoCodes 2 года назад

So welcome. Note that some of the older Gatsby and Bootstrap React might refer to left and right while Bootstrap 5 is start and end. :)

@swethanaik7121 3 года назад

Such an informative video. Was struggling with how to combine react bootstrap and link to create active nav links. This clever trick helped.

@ADesignerWhoCodes 3 года назад

You are so welcome! Including this and more in my upcoming Gatsby demystified course

@ericwilliam1697 4 года назад

For whatever reason, this video only plays on a resolution of 360p, not on 480p, 720p, or 1080p.

@ADesignerWhoCodes 4 года назад

Wish I could tell you why. Hmmmm. I generally upload 4K.

@muchamaddestafadilah 4 года назад

@@ADesignerWhoCodes can you re-upload again with more support resolution ..

@ADesignerWhoCodes 4 года назад

@@muchamaddestafadilah I'd love to, but RU-vid doesn't let me re-upload the video. I record all videos at 4k so not sure why it isn't playing at a higher res. I'll msg RU-vid and see if I get any response and what the issue is.

@muchamaddestafadilah 4 года назад

@@ADesignerWhoCodes I have downloaded with keepvid.pro and finally get high resolution anyway ..

@onrgms 4 года назад

Thanks for 'as' code you saved me there. You can put 'Container' inside 'Navbar' by the way it's much easier and saves you from header div, have a good one.

@ADesignerWhoCodes 4 года назад

You are totally right in regards to the container. For semantics, I use header but that in no way prevents you from going your route. Thanks for the feedback!

@nazokatisamova5073 4 года назад

Another great content. Much appreciated !!!

@ADesignerWhoCodes 4 года назад

You are very welcome.

@krtpkp15 4 года назад

Thank you so much!! This video is very helpful to me!!

@siamqtr 4 года назад

i keep getting Error: Invalid hook call. Hooks can only be called inside of the body of a function component. it works fine without bootstrap

@dineshkrishna111 3 года назад

Gatsby Guru..

@ADesignerWhoCodes 3 года назад

Thanks.

@kamaboko1 4 года назад

Question for you. I followed your tutorial and all works fine, but I notice that using react-bootstrap vs downloading bootstrap.min.css and putting it in my components folder and going that route, the former refreshes the page. Have you noticed how the tab refreshes? Going from page-2 to the home page should be instant.

@ADesignerWhoCodes 4 года назад

I haven’t look at it that closely. But the bootstrap min file in your components will work fine in a classic, vanilla way. You just have to adjust your tags accordingly. I’ll look again at the instant issue you’re referring to

@SpooningTreesap86 3 года назад

Also hopefully this saves someone else time: has some default horizontal padding which is why you see a gap on the left and right of the navbar. He patches this by making the header parent tag match the same color however it's worth noting that the container is still not full width because of that padding. Fix: simply add no padding to the container either by using or a shorter way Now the container has 0 padding and is actually full width. To make it look a little better add className="px-1" to the Navbar which is inside the outer container.

@ADesignerWhoCodes 3 года назад

You're correct. I'm gonna have to go get my notes, but you're spot on. I just don't like using fluid because it extends all the way out without stopping. Don't forget to add more padding on mobile and less padding on tablet/desktop. I'm with you on using px-# vs inline style. Thanks!

@SpooningTreesap86 3 года назад

@@ADesignerWhoCodes Yeah I was thrown off reading the react-bootstrap docs because I only saw it saying that fluid extended to full width so when I saw that gap I thought it was like a parent container or something lol. Besides that I will remember that for mobile vs desktop/tablet thank you! This video was super helpful as I'm brand new to Gatsby, luckily I know react so that helps.

@ADesignerWhoCodes 3 года назад

@@SpooningTreesap86 It's all good. Good coding examples by the way!

@maxbarrera3787 3 года назад

if ml-auto doesn't work try ms-auto, that's what you use for Bootstrap 5.

@ADesignerWhoCodes 3 года назад

Thanks for that. Ya the older videos are all Bootstrap 4.

@dineshkrishna111 3 года назад

Sir how to include jquery in gatsby.??

@ADesignerWhoCodes 3 года назад

jQuery is slowly dying. Here's documentation on Bootstrap 5 and jQuery. Currently React Bootstrap is still using 4.x but it's only a matter of time until it gets migrated to 5.x. getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

@dineshkrishna111 3 года назад

@@ADesignerWhoCodes thank you sir❤

@ADesignerWhoCodes 3 года назад

You're so welcome Dinesh.

@sergioturpin 3 года назад

Hi!! I'm using bootstrap 4.6.0 with react-bootstrap 1.6.1 and I can't understand why in development environment I can to see the three lines of the hamburger menu, but when I deploy to netlify (production) those three lines disappear and I can only to see the outer line square 🤷‍♂️

@ADesignerWhoCodes 3 года назад

Hmm. That is a good question. I've yet to run across that issue. Wonder if anyone on stack has had that same problem.

@sergioturpin 3 года назад

@@ADesignerWhoCodes It has incompatibility with the latest versions, I've rollback to 3.4.2 gatsby version and it works correctly. Thanks