How to Use Bootstrap Float Right Classes to Align Elements

To float a <div> to the right in Bootstrap 5, apply the utility class float-end to your element; for Bootstrap 4 or legacy compatibility, use float-right, which remains functional but is deprecated.

Bootstrap’s floating utilities provide a lightweight, CSS-only mechanism for controlling element alignment within containers. According to the twbs/bootstrap source code, these utilities are generated in scss/_float.scss and apply the CSS float property with !important priority, ensuring they override other layout declarations.

Understanding Bootstrap Float Utilities

The floating system in Bootstrap is implemented through a concise SCSS loop defined in [scss/_float.scss](https://github.com/twbs/bootstrap/blob/main/scss/_float.scss). This file generates three core classes that map directly to CSS float values:

• float-start – Applies float: left !important (or right in RTL modes).
• float-end – Applies float: right !important (or left in RTL modes).
• float-none – Applies float: none !important to clear floating behavior.

The compiled CSS output is straightforward:

.float-start { float: left !important; }
.float-end   { float: right !important; }
.float-none  { float: none !important; }

Bootstrap 5+ adopted logical properties (start/end) rather than physical directions (left/right) to support internationalization and RTL layouts automatically. The legacy float-right class persists as an alias for backward compatibility but is marked for removal in future major versions.

How to Float a Div to the Right in Bootstrap

Basic Right Float (All Breakpoints)

To align a <div> to the right across all screen sizes, use the non-responsive utility class:

<div class="float-end">
  This content floats to the right on every device.
</div>

This applies the float: right declaration immediately upon rendering, as defined in the base float-end rule within scss/_float.scss.

Responsive Float Right

When you need right-alignment only on specific viewport sizes, use breakpoint-prefixed variants. Bootstrap generates responsive classes for each breakpoint in its grid system (sm, md, lg, xl, xxl).

To float right only on medium screens and larger:

<div class="float-none float-md-end">
  Right-aligned on ≥768px, static on smaller screens.
</div>

Here, float-none clears any float on mobile devices, while float-md-end activates right-floating at the md breakpoint (≥768px) and above. The responsive logic is documented in [site/content/docs/utilities/float.md](https://github.com/twbs/bootstrap/blob/main/site/content/docs/utilities/float.md).

Legacy Float Right (Bootstrap 4 and Earlier)

For projects maintaining older codebases or migrating from Bootstrap 4, the float-right class remains available:

<div class="float-right">
  Legacy class—functional but deprecated.
</div>

This alias maps to the same CSS rules as float-end and is preserved in [scss/_reboot.scss](https://github.com/twbs/bootstrap/blob/main/scss/_reboot.scss) for backward compatibility. However, the Bootstrap team recommends migrating to float-end to ensure future-proof styling.

Float Utilities in Modern Layouts

When using Flexbox containers, standard float declarations may not produce visible effects because flex items ignore the float property. In such cases, combine float utilities with width utilities or use flex-specific alignment classes:

<div class="d-flex">
  <div class="flex-fill">Main content</div>
  <div class="float-end w-auto">Right-aligned element</div>
</div>

For pure flexbox layouts, consider using ms-auto (margin-start auto) instead of float utilities to push elements to the right, as documented in [site/content/docs/utilities/flex.md](https://github.com/twbs/bootstrap/blob/main/site/content/docs/utilities/flex.md).

Summary

• float-end is the modern, RTL-friendly class for right alignment in Bootstrap 5+.
• float-right works but is deprecated; migrate existing code to float-end.
• Responsive variants (float-sm-end, float-md-end, etc.) enable breakpoint-specific floating behavior.
• Float utilities use !important and are defined in scss/_float.scss.
• Float classes may not work inside strict flex containers; use margin utilities (ms-auto) for flex layouts.

Frequently Asked Questions

What is the difference between float-end and float-right in Bootstrap?

float-end is the modern, logical property-based class that adapts to text direction (right in LTR, left in RTL), while float-right is the legacy physical-direction class from Bootstrap 4. Both currently produce the same visual result in left-to-right layouts, but float-right is deprecated and scheduled for removal in future major versions.

Why is my float-right class not working inside a flex container?

Flexbox containers ignore the CSS float property on their children. According to the Bootstrap flexbox documentation in site/content/docs/utilities/flex.md, when a parent has display: flex, you should use margin utilities like ms-auto (margin-start: auto) to push elements right instead of float classes.

How do I clear a float in Bootstrap?

Use the float-none utility class to remove floating behavior from an element. This applies float: none !important, effectively clearing any inherited float positioning and returning the element to normal document flow.

Can I use float utilities with the Bootstrap grid system?

Yes, float utilities work alongside the grid system, though they serve different purposes. Grid columns use flexbox internally in Bootstrap 5+, so applying float-end to a column may not behave as expected. Instead, use grid offset classes or flex alignment utilities within row containers for precise positioning.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}