
- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Float an element to the right on different screens with Bootstrap
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
<!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>
- Related Questions & Answers
- Float an element to the left on different screens with Bootstrap
- Float an element to the right with Bootstrap 4
- Clear the float of an element with Bootstrap
- Float an element to the left with Bootstrap 4
- Flex items into equal widths on different screens with Bootstrap 4
- Stretch gathered items on different screens in Bootstrap 4
- Avoid wrapping flex-items in Bootstrap on different screens
- Bootstrap 4 .float-right class
- How to work with Bootstrap 4 .float-*-right class
- Stretch a flex item on different screens in Bootstrap 4
- Allow wrapping of flex items in Bootstrap on different screens
- Align gathered items in the center on different screens in Bootstrap 4
- Align gathered items at the end on different screens in Bootstrap 4
- Remove float from an element in Bootstrap
- Wrap flex items in reversed order in Bootstrap on different screens
Advertisements