i didnt find such explanation on each attribute of Navbar on other youTubechannels ..i learned it and fixed my issues as well .. Thanks Alot..it helped very much...
Really really will do :D. I find that I also still don't have time to make more advance tutorial, will start making tutorial from basic. Thank you Kanu Priya :)
Thank you so much for this. I love the visuals to explain, something most of the UA-cam folks don’t get. Please make more explaining other aspects, liked and subscribed.
Thanks a lot! Really appreciate that. I really want to make it better like this too, but it's quite hard to do because it's depends on the content. I don't think I can do this again right now, but I will in the future. I want to make sure I can become more discipline on posting youtube video first before making it better. Thank you for your comment & support, it means so much to me and I will always strive to become better and better teacher with better presentation.
Hi. Nav items is inside Navbar collapse. Navbar collapse using flex display. So, the solution is quite easy. Just add className "right" or anything you want to the Navbar.Collapse component. And then, add css class "right" and use justify-content. CSS Example: .right{ justify-content: end; } Hope that helps!
That was really awesome sir Thankyou so much for that. In 15 min you taught an entire chapter ❤️ Loads of love and respect from Pakistan. Please keep enhancing our knowledge ❤️
Wow. I guess I'm too late to reply. I'm sorry.. Do you still need help? If yes, can you elaborate more about your question? Thank you. Really sorry for late reply
Sadly, there's no sidebar built-in for React Bootstrap. You need to make it manually, and use Nav vertical: react-bootstrap.github.io/components/navs/#vertical Hope it helps :).
Wow. That means so much dude. Thanks a lot. This is also my experiment so I know how I will present the tutorial in the future. Your comment really makes me sure how I will tutor for my next video. Thanks a lot :). Glad you're happy with this.
Hi! Maybe you want to take a look at this: ua-cam.com/video/y8vGR2qv-lY/v-deo.html . When it comes to navigation, it goes to the react side. So, that's the tutorial on how to navigate using react router.
Hi. I found the easiest way to do that is just to overrides their styling. For example: the default css for navbar.toggle is navbar-toggler class, so we can just override it with our own css, and set the background color. For the icon, if we check .navbar-dark / light and then .navbar-toggler-icon, we can found background-image for the burger icon. So we can replace the css too :). That's the easiest way I know. Because they give the bsPrefix API, but that means we need to set our styling from the start... So.... I think it's better just to override the style. Hope it helps :).
My Navbar.Brand does not have a margin left and when i set the class name to ml-4 nothing happens do you know why? The same thing happens with my Nav.Links in the hamburger menu at the mobile view.
hmm. what is ml-4 ? typo or you mean md? Are you saying the result that you tried is different that what I shared in the video? If yes, can you send your code to akiratoya2010@gmail.com ? I'll try to check it :).
Yes, exactly like @nitrxgen said. But, if you want to see the example, see react-bootstrap.github.io/components/navbar/#scrolling or react-bootstrap.github.io/components/navs/#using-dropdowns Sorry for late reply
Hi. I'm afraid that's not included in react bootstrap easily. You must configure it manually. Sorry for late reply. You can try this for example: Create navbar.collapse first ( menu inside ), then navbar.brand, and then if you want to put the menu again on the right, just create another navbar.collapse again. And I don't think it's not fit for this react bootstrap module, maybe you should find another bootstrap module for this kind of display or you will need to do much customization on css and the behaviour on mobile and website.
@@masteryst I'm just picking Bootstrap up but it seems like uses "justify-contents: space-between;" so it pushes the Brand and Toggle as far apart as possible... so if you throw in another Toggle before Brand, then it centers Brand in the middle of the screen. Now you have 2 Toggle buttons that work together. To hide the left-side Toggle, you can set className="invisible". Not sure if this is the accepted method but I don't see anything immediately wrong other than using a bit of extra resource to generate the unused Toggle. So basically I chose to use another Toggle element since they change size dynamically so using two of them would ensure the brand remains always in the middle. Setting the "invisible" className sets "visibility:hidden" literally makes the element invisible but keeps the UI layout the same, unlike "display:none;" which re-aligns the UI as if it didn't exist and would not center the brand.
@@Nitrxgen I'm pretty sure that's acceptable. No matter what, it's their system. They already made some configuration available, but if it's not accomplished what we need then we must think outside of the box. And there's no right and wrong here. As long as it's not making it too much heavy on the performance, it's okay. :D. You did great! I'm sorry for super late reply. Not in the condition to work lately because of house moving.
@@masteryst We many people are facing this issue for a long time. If you can solve this then please make the short video of this issue. We will be thankful.
Thank you sir :). I was hoping that too.. Maybe I'll start next month because this month, I'll so busy. Can't wait to make more tutorial in the future. Thanks for your support!! :)
Thanks. I already did for the future video. I know some people will do fast forward, so I didn't use background music anymore in the future :). Thanks for your feedback :D
i didnt find such explanation on each attribute of Navbar on other youTubechannels ..i learned it and fixed my issues as well ..
Thanks Alot..it helped very much...
Glad that it helps you. Thank you for watching :D:D
god this is the only video i could find on how to implement sticky property for nav React Bootstrap thank you!!
Glad it helps!!! :D
Wonderful! Everything worked perfect!
Nice :D
u da man
high level of production
deserves 1000 times your subscriber count
Thanks a lot :)
Thanks a lot for this video .
Greeting From Morocco 🇲🇦❤ .
Thanks a lot! :D Greetings!
please make more videos on such basic stuffs. Really Really helpful. Thank you!
Really really will do :D. I find that I also still don't have time to make more advance tutorial, will start making tutorial from basic.
Thank you Kanu Priya :)
Thank you so much! Saved our asses
You're welcome!
This is Awesome, Really. Other Big youtubers don't care that much about the little things that you have discussed
Thanks for your kind words :D
great video, thanks to this I learned how to make nice navbars with react and bootstrap, I hope to see more top quality video tutorials from you!
Thanks a lot! I do hope so... But still trying to get time to make video.. Anyway, thanks for your nice compliment :).
Thank you. I recommend this video for young and experienced users.
Thanks a lot :)
Thank you so much for this. I love the visuals to explain, something most of the UA-cam folks don’t get. Please make more explaining other aspects, liked and subscribed.
Thanks a lot! Really appreciate that. I really want to make it better like this too, but it's quite hard to do because it's depends on the content.
I don't think I can do this again right now, but I will in the future. I want to make sure I can become more discipline on posting youtube video first before making it better.
Thank you for your comment & support, it means so much to me and I will always strive to become better and better teacher with better presentation.
excellent video. become your fan just watching ur single video
Thank you so much :D
Great Tutorial...Short & Sweet 🔥
Thank you for watching 😁
Thanks .for keeping the code simple without confusing much
You're welcome. Glad that you like it. 😁
Nice explain sir...so nice way understand me....thank you so much....update some new videos...
Thank you for watching :D. Tomorrow I upload new video series :D.
Hi, thanks for shring this priceless info. what if i want to add search bar, do i need to make new component?
Hi! I don't get what you mean by "new component". But, it's easier than you think.
You can add:
Search
right after the .
The link reference from their official site: react-bootstrap.github.io/components/navbar/#offcanvas
Hope it helps! :)
I like it! Thanks a lot
Thank you :D
You helped me so much and thank you from the bottom of my heart
You're welcome :D. Thank you so much for watching :)
Hey! How can I align my nav items to right...i tried pullRight but it's not working...if you can help me out with this...btw great video!
Hi. Nav items is inside Navbar collapse. Navbar collapse using flex display. So, the solution is quite easy. Just add className "right" or anything you want to the Navbar.Collapse component. And then, add css class "right" and use justify-content. CSS Example:
.right{
justify-content: end;
}
Hope that helps!
@@masteryst Great!! Thanks 👍
@@mustalichunawala6156 You're welcome :)
What a great video!!!! It's very easy to understand. I am really grateful to you.
Thank you for watching :D
this is the best clear explanation
Thank you :)
Great Explanation.
Thank you :)
That was really awesome sir Thankyou so much for that. In 15 min you taught an entire chapter ❤️
Loads of love and respect from Pakistan. Please keep enhancing our knowledge ❤️
Thank you so much for your kind word :). I'm in the middle of creating new react tutorial :D. Hope you'll like it. Again, thanks for watching :D
Thank you for the tutorial sir. How do I make the page change to various components on clicking???
Wow. I guess I'm too late to reply. I'm sorry..
Do you still need help? If yes, can you elaborate more about your question?
Thank you. Really sorry for late reply
Thank you so much! This helped :)
Same Navbar, can you please tell me how display left side. I saw you added sticky=top, but I’m not finding left
Sadly, there's no sidebar built-in for React Bootstrap. You need to make it manually, and use Nav vertical: react-bootstrap.github.io/components/navs/#vertical
Hope it helps :).
what an amazing tutorial dude, really really good. you voice are happy and lively, and the content simple and direct.
tks from brazil
Wow. That means so much dude. Thanks a lot. This is also my experiment so I know how I will present the tutorial in the future. Your comment really makes me sure how I will tutor for my next video. Thanks a lot :). Glad you're happy with this.
@@masteryst a sidebar would be nice, I made one, and I see a lot of video views about it, and there are no videos using bootstrap
@@victrixsvs Thank you for your info :D. Will do that one!
Excellent video, 100% recomended
Thanks a lot :)
Perfect explanation. thank you
Thanks for watching :D
Great video, learned the basics in minutes. Thanks
Thanks :D
Do you have a tutorial where it navigates to pages?
Hi! Maybe you want to take a look at this: ua-cam.com/video/y8vGR2qv-lY/v-deo.html . When it comes to navigation, it goes to the react side. So, that's the tutorial on how to navigate using react router.
What an excellent video!
Thank you :)
ok this should be included in any react tutorial textbook
Thanks :D
Thank you so much. Big love
Thank youu 😍
Thank you so much. This save my life
Thank you for watching 😁
Please make more video .. its too good
Hi! Thanks! By the end of next week, there's new tutorial for react 😁.
Thank you ! Your video helped me a lot !
You're welcome :D. Thank you for watching :)
Thanks mate 👍🏼👍🏼👍🏼
Thank youu :)
awesome video!
Thank youuuuu :D
Really great tutorial thanks!
Thanks :D
Very Nice Video, Any tips for changing the color of the bootstrap Navbar.Toggler? having issues with that
Hi. I found the easiest way to do that is just to overrides their styling. For example:
the default css for navbar.toggle is navbar-toggler class, so we can just override it with our own css, and set the background color.
For the icon, if we check .navbar-dark / light and then .navbar-toggler-icon, we can found background-image for the burger icon. So we can replace the css too :). That's the easiest way I know.
Because they give the bsPrefix API, but that means we need to set our styling from the start... So.... I think it's better just to override the style.
Hope it helps :).
install color highlights extension on vs code
@@victrixsvs Hmm... I never even consider that topic and don't even know about it lol.. Is it useful though?
Nice tutorial
Thank youu 😁
Great and easily to understand
Thanks! 😁
Informative.. thank you pls make more videos designing react ui's
@Life with Ysa , What ui do you want for an example?
Thank you :)
Kindly make some pagination with react.js using lodash appreciate much🙏
@@lifewithysa2461 Okay will do.. I don't know how lodash will help. but... I'll take a look at it. Thanks for your suggestion :D
Thank you so much!! It was so clear and easy to follow 👍🏼👍🏼
Thank you so much! :)
What's the VS Code theme ?
Hi. Sorry for late reply: Atom One Dark is my theme :)
thank you very clear explanation 😊
Thanks :D
Thanks
in normal bootstrap when I put "mr-auto" it goes to the right how to do that in reactjs it doesn't work
okay got it, it's "ms-auto"
@@saqibquadir3527 Lol! I just see your message, and try to figure out. Sorry for late reply. Glad you found the solution :D
@@masteryst hahaaha, no worries man
Thank you soooo much
You're welcome :)
THANKS DEAR😍😍😍😍😍
Thank youu :D
Thank you!!!!
You're welcome :D
Music is too loud and distracting, it would be better if there aren't a background music at all. Beside that, great tutorial
Yeah... I'm sorry about that. I also realize it and didn't use background music at all.
Thank you Abdullah :)
thanks it's helpful
Thank youu 😁
Thanks 🙏
Thank you for watching! 😁
Thank you very much. This will help me with my second react.js project.
Thank you for watching :D
Simple and Sweet
Collapseonselect not working for me
@Avdhut Kulkarni Hi! Is there any error there on console?
My Navbar.Brand does not have a margin left and when i set the class name to ml-4 nothing happens do you know why? The same thing happens with my Nav.Links in the hamburger menu at the mobile view.
hmm. what is ml-4 ? typo or you mean md?
Are you saying the result that you tried is different that what I shared in the video? If yes, can you send your code to akiratoya2010@gmail.com ? I'll try to check it :).
great video! bgm is distracting
Thank you! Yeah I know... I'm sorry for that >__
very nice... 5 starts
Thank you :)
Hello, how i can create the sub item of dropdown item, it make me so confuse
Inside you need to use and put inside.
Yes, exactly like @nitrxgen said. But, if you want to see the example, see
react-bootstrap.github.io/components/navbar/#scrolling
or
react-bootstrap.github.io/components/navs/#using-dropdowns
Sorry for late reply
@@masteryst @nitrxgen appreciate , it's really helpful
@@hoanglongngo7752 You're welcome :)
how do i center the logo?
Hi. I'm afraid that's not included in react bootstrap easily. You must configure it manually. Sorry for late reply.
You can try this for example:
Create navbar.collapse first ( menu inside ),
then navbar.brand,
and then if you want to put the menu again on the right, just create another navbar.collapse again.
And I don't think it's not fit for this react bootstrap module, maybe you should find another bootstrap module for this kind of display or you will need to do much customization on css and the behaviour on mobile and website.
@@masteryst I'm just picking Bootstrap up but it seems like uses "justify-contents: space-between;" so it pushes the Brand and Toggle as far apart as possible... so if you throw in another Toggle before Brand, then it centers Brand in the middle of the screen. Now you have 2 Toggle buttons that work together. To hide the left-side Toggle, you can set className="invisible". Not sure if this is the accepted method but I don't see anything immediately wrong other than using a bit of extra resource to generate the unused Toggle.
So basically
I chose to use another Toggle element since they change size dynamically so using two of them would ensure the brand remains always in the middle. Setting the "invisible" className sets "visibility:hidden" literally makes the element invisible but keeps the UI layout the same, unlike "display:none;" which re-aligns the UI as if it didn't exist and would not center the brand.
@@Nitrxgen I'm pretty sure that's acceptable. No matter what, it's their system. They already made some configuration available, but if it's not accomplished what we need then we must think outside of the box.
And there's no right and wrong here. As long as it's not making it too much heavy on the performance, it's okay. :D. You did great!
I'm sorry for super late reply. Not in the condition to work lately because of house moving.
Very good and simple to understand :) !!!
Thank you :)
Thnks
Thank you for watching :D
THANK YOU!
You're welcome! :). Thanks for watching :D
what if you want to increase the size of the logo and the text next to it?
Hi. Sorry for just replying. You can try it.. maybe you will need some adjustment on css, but it will be easy. :)
background music could be a little more louder
Sorry >,
Amazing!! 👏👏
Thank you 😁
Thanks ,Great Video
Thank you 😁
how to right align it.... i am facing this issue for long time
What item that you want to right align?
@@masteryst I want to align the Navbar items to rightward by typping or these both statements are not working ??
@@masteryst We many people are facing this issue for a long time. If you can solve this then please make the short video of this issue. We will be thankful.
@@subhashparwani5843 Let me try this 2 days again.. I will be very busy tomorrow :).. Will get back to you. Hope I can clear your problem..
@@masteryst Okay Sir.
Thank you..means a lot
Glad you like it. Thanks :D
Great video
Thank you :)
great!
Thanks for watching :D:D
is source code available for above video?
Hi. Someone also asked for this, so yeah: github.com/AkiraToya/ReactFormikBootstrapNavbar
Thanks for watching! :)
The tutorial is good but the background music can be really distracting and hard to follow what you are saying.
Yeah I know. I'm sorry for that >_
Where i can get this code, git hub link? Pls
Just upload it for you :)
github.com/AkiraToya/ReactFormikBootstrapNavbar
Your video is so use fulll
Plzzz create some minnie project using react
Thank you sir :). I was hoping that too.. Maybe I'll start next month because this month, I'll so busy. Can't wait to make more tutorial in the future. Thanks for your support!! :)
Super
Top Top
Thank you :)
thank you but please remove background music
Thanks. I already did for the future video. I know some people will do fast forward, so I didn't use background music anymore in the future :).
Thanks for your feedback :D
Great video but the sound effects suck.
Lol! Sorry for that :D
nafbar hhhh
>,
Thank you so much, this was really helpful!
You're welcome! :D
Great video
Thanks :)