Float

Vue Bootstrap 5 Float

Toggle floats on any element, at any breakpoint, using responsive float utilities.

Basic examples

These utility classes float an element to the left or right, or disable floating, based on the current viewport size using the CSS float property. !important is included to avoid specificity issues. These use the same viewport breakpoints as grid system. Note that float utilities have no effect on flex items.

Float right

Use .float-end to float an element to the right of its container.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!

        
            
  
                    <img src="https://mdbootstrap.com/img/new/textures/small/52.jpg" class="float-end">
  
                    <p class="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias
                      asperiores molestiae veniam
                      nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid
                      rerum officiis
                      commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident
                      perferendis
                      fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut.
                      Eligendi, culpa,
                      repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio.
                      Corporis animi laborum
                      nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates
                      deleniti sint
                      molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!</p>

Float left

Use .float-start to float an element to the left of its container.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!

        
            
  
                    <img src="https://mdbootstrap.com/img/new/textures/small/52.jpg" class="float-start">
  
                    <p class="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias
                      asperiores molestiae veniam
                      nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid
                      rerum officiis
                      commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident
                      perferendis
                      fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut.
                      Eligendi, culpa,
                      repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio.
                      Corporis animi laborum
                      nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates
                      deleniti sint
                      molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!</p>

Float none

Use .float-none to reset any floats that are applied to an element. This is the default value for the float property.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias asperiores molestiae veniam nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid rerum officiis commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident perferendis fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut. Eligendi, culpa, repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio. Corporis animi laborum nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates deleniti sint molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!

        
            
  
                    <img src="https://mdbootstrap.com/img/new/textures/small/52.jpg" class="float-none">
  
                    <p class="">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus reiciendis alias
                      asperiores molestiae veniam
                      nihil dolore quaerat libero voluptatibus, officia, ut ea deserunt itaque debitis assumenda, aliquid
                      rerum officiis
                      commodi? Nobis perspiciatis consequatur vero aut, placeat praesentium quam eveniet. A amet provident
                      perferendis
                      fugit, alias beatae unde qui velit dignissimos quidem architecto doloribus maiores quis ut.
                      Eligendi, culpa,
                      repudiandae sint quidem molestiae vero dolor cumque fugit aliquid ipsam voluptates distinctio.
                      Corporis animi laborum
                      nostrum labore similique ullam, optio quidem quae adipisci iste at molestiae, delectus voluptates
                      deleniti sint
                      molestias modi itaque deserunt officiis asperiores aliquam. Vitae nostrum autem animi assumenda!</p>

Responsive

Responsive variations also exist for each float value.

Float left on viewports sized SM (small) or wider

Float left on viewports sized MD (medium) or wider

Float left on viewports sized LG (large) or wider

Float left on viewports sized XL (extra-large) or wider

        
            
                  <div class="float-sm-start">Float left on viewports sized SM (small) or wider</div>
                  <br />
                  <div class="float-md-start">Float left on viewports sized MD (medium) or wider</div>
                  <br />
                  <div class="float-lg-start">Float left on viewports sized LG (large) or wider</div>
                  <br />
                  <div class="float-xl-start">Float left on viewports sized XL (extra-large) or wider</div>
                  <br />

Here are all the support classes:

  • .float-start
  • .float-end
  • .float-none
  • .float-sm-start
  • .float-sm-end
  • .float-sm-none
  • .float-md-start
  • .float-md-end
  • .float-md-none
  • .float-lg-start
  • .float-lg-end
  • .float-lg-none
  • .float-xl-start
  • .float-xl-end
  • .float-xl-none
  • .float-xxl-start
  • .float-xxl-end
  • .float-xxl-none