Teach with us

Float an element to the right on different screens with Bootstrap

BootstrapWeb DevelopmentCSS 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>
raja
Alex Onsman
Updated on 18-Jun-2020 08:28:05

Previous Page Print Page Next Page  
Advertisements