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")