Search code examples
htmlcsstwitter-bootstrapnavbarbootstrap-5

How can I style a Bootstrap 5 Navbar when only in collapsed position?


I'm using Bootstrap 5 and I'm trying to left align Navbar social icons when the navbar is collapsed (for small/mobile devices), but right aligned when viewed on a large screen.

Can you help identify which selectors to style? Again, I only want the icons to be left aligned when the navbar is collapsed.

My navbar example is here: https://www.codeply.com/p/4zgJqBtILT

Navbar Example Screenshot

Thank you!


Solution

  • Add to UL tag justify-content-start justify-content-lg-end and change float-sm-end class to float-xl-end

    <ul class=" col-md-4 col-sm list-unstyled justify-content-start justify-contentxl-end d-flex float-xl-end">