How to Align Navbar Item to the Right in Bootstrap 4


[music] 00:06 Xavier Kelly: Hey guys, It’s Xavier
Kelly and in today’s video, I’m gonna walk you through how to align your Bootstrap 4
navigation bars to the right. It’s pretty simple to do. Bootstrap doesn’t really… Bootstrap 4 doesn’t really showcase it as
much. You can’t do it the way you used to do it
because… Let me go down here, that show the navigation
bar setting, it’s actually going… Right now, if you look at it now it’s actually
a Flexbox. So, it’s not gonna work but basically, this
class mr-auto, if you turn that to ml-auto, to be margin left auto, then it’ll bring itself
over. I’m gonna show you an example really quick. It’s actually pretty simple. Let me go back over to this section but they
don’t have it on this page at all. 00:51 XK: So, this is the example right here. This is the quote for that right here. And then all we’re really gonna do, just for
you guys to make sure, is you go over to here and you go into your class, your navbar class
and you type in “mr-auto”. Sorry, “ml-auto”. [music] 01:23 XK: Save this. And then, as you guys can see right now, your
minibar has shifted right here. I’m gonna go back in to show you. So, if you wanna go back to doing it to the
right as well, all you would do is come in and just change this right here from L to
R. Let me show the I’m having trouble typinge today. And then, as you guys see, let’s save this
and let’s refresh this. And that’s it right here. Now let’s put it back right there to where
it was. So, it was pretty simple. So I was having a problem finding how to do
this right here, but you can’t use Flow anymore on this right here ’cause it won’t work. Basically ’cause this is a Flexbox. And the navigation bar, it won’t work in that
portion, so you have to use that ml-auto. I’ll link it down in the description so you
guys can have it. I hope you enjoyed this video as well and
if you haven’t already, go ahead and head over to my channel, click that subscribe button
right here and then go and hit notifications buttons as well. Share this video with someone who might need
help figuring out how to align their Bootstrap 4 navbar and thank you guys so much for watching. I’m Xavier Kelly and I’ll see you in the next
one. [music]

96 Comments

Add a Comment

Your email address will not be published. Required fields are marked *