Float an element to the right on different screens with Bootstrap

Bootstrap Web Development CSS Framework

Use the float-*-right class in Bootstrap to float an element to the right. Different screen size includes setting the float for small, medium, large and extra large sizes.

Let us see how to float and element to the right on small and medium size screen size −

Small Screen Size

<div class="float-sm-right">
  This text is on the right (on small screen).
</div>

Medium Screen Size

<div class="float-md-right">
  This text is on the right (on medium screen).
</div>

Let us see how to place an element on the right on different screens −

Example

Live Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container">
    <h2>Example</h2>
    <div class="clearfix">
      <div class="float-sm-right">This text is on the right (on small screen).</div><br>
      <div class="float-md-right">This text is on the right (on medium screen).</div><br>
      <div class="float-lg-right">This text is on the right (on large screen).</div><br>
      <div class="float-xl-right">This text is on the right (on extra large screen).</div><br>
    </div>
  </div>

</body>
</html>

Alex Onsman

Updated on: 18-Jun-2020

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started