<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Responsive variations
with float</
title
>
<
link
rel
=
"stylesheet"
href
=
</
head
>
<
body
>
<
div
class
=
"container"
>
<
h1
style
=
"color:green"
>GeeksforGeeks</
h1
>
<
b
>Responsive variations with float</
b
>
<
br
>
<
div
class
=
"float-sm-left"
>
This div floats to the left on small or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-sm-right"
>
This div floats to the right on small or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-sm-none"
>
This div does not float on small or wider viewports.
</
div
>
<
div
class
=
"float-md-left"
>
This div floats to the left on medium or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-md-right"
>
This div floats to the right on medium or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-md-none"
>
This div does not float on medium or wider viewports.
</
div
>
<
div
class
=
"float-lg-left"
>
This div floats to the left on large or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-lg-right"
>
This div floats to the right on large or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-lg-none"
>
This div does not float on large or wider viewports.
</
div
>
<
div
class
=
"float-xl-left"
>
This div floats to the left on extra large or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-xl-right"
>
This div floats to the right on extra large or wider viewports.
</
div
>
<
br
>
<
div
class
=
"float-xl-none"
>
This div does not float on extra large or wider viewports.
</
div
>
</
div
>
</
body
>
</
html
>