How to align button of Navbar to the right?

Normally you could do this by adding className=ml-auto (ml-auto is a Bootstrap utility class that applies margin-left: auto !important) to the LogoutButton. However, the LogoutButton gets wrapped in a <form> when rendered, and classes are applied to the inner <button>, so this doesn’t quite work. Instead you can wrap it and apply the margin to the wrapper. For example, try replacing

dcc.LogoutButton(logout_url='/logout')

with

html.Span(dcc.LogoutButton(logout_url='/logout'), className="ml-auto")
1 Like