ଭାସମାନ |

ଆମର ପ୍ରତିକ୍ରିୟାଶୀଳ ଫ୍ଲୋଟ୍ ଉପଯୋଗିତାକୁ ବ୍ୟବହାର କରି ଯେକ any ଣସି ଉପାଦାନ ଉପରେ, ଯେକ any ଣସି ବ୍ରେକପଏଣ୍ଟରେ ଟୋଗଲ୍ ଭାସମାନ |

ସମୀକ୍ଷା

ଏହି ୟୁଟିଲିଟି ଶ୍ରେଣୀଗୁଡ଼ିକ CSS floatପ୍ରପର୍ଟି ବ୍ୟବହାର କରି ସାମ୍ପ୍ରତିକ ଭ୍ୟୁପୋର୍ଟ୍ ସାଇଜ୍ ଉପରେ ଆଧାର କରି ବାମ କିମ୍ବା ଡାହାଣକୁ ଏକ ଉପାଦାନ ଭାସନ୍ତି, କିମ୍ବା ଫ୍ଲୋଟିଂକୁ ଅକ୍ଷମ କରନ୍ତୁ | !importantନିର୍ଦ୍ଦିଷ୍ଟତା ସମସ୍ୟାକୁ ଏଡାଇବା ପାଇଁ ଅନ୍ତର୍ଭୂକ୍ତ କରାଯାଇଛି | ଏମାନେ ଆମର ଗ୍ରୀଡ୍ ସିଷ୍ଟମ୍ ସହିତ ସମାନ ଭ୍ୟୁପୋର୍ଟ ବ୍ରେକପଏଣ୍ଟ ବ୍ୟବହାର କରନ୍ତି | ଦୟାକରି ସଚେତନ ରୁହନ୍ତୁ ଫ୍ଲୋଟ୍ ଉପଯୋଗିତା ଫ୍ଲେକ୍ସ ଆଇଟମ୍ ଉପରେ କ effect ଣସି ପ୍ରଭାବ ପକାଇବ ନାହିଁ |

କ୍ଲାସ୍

ଏକ କ୍ଲାସ୍ ସହିତ ଏକ ଫ୍ଲୋଟ୍ ଟୋଗଲ୍ କରନ୍ତୁ:

<div class="float-left">Float left on all viewport sizes</div><br>
<div class="float-right">Float right on all viewport sizes</div><br>
<div class="float-none">Don't float on all viewport sizes</div>

ମିଶ୍ରଣ

କିମ୍ବା ସାସ୍ ମିକ୍ସିନ୍ ଦ୍ୱାରା:

.element {
  @include float-left;
}
.another-element {
  @include float-right;
}
.one-more {
  @include float-none;
}

ପ୍ରତିକ୍ରିୟାଶୀଳ |

ପ୍ରତ୍ୟେକ floatମୂଲ୍ୟ ପାଇଁ ପ୍ରତିକ୍ରିୟାଶୀଳ ପରିବର୍ତ୍ତନ ମଧ୍ୟ ବିଦ୍ୟମାନ |

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

ଏଠାରେ ସମସ୍ତ ସମର୍ଥନ ଶ୍ରେଣୀଗୁଡ଼ିକ ଅଛି;

• .float-left
• .float-right
• .float-none
• .float-sm-left
• .float-sm-right
• .float-sm-none
• .float-md-left
• .float-md-right
• .float-md-none
• .float-lg-left
• .float-lg-right
• .float-lg-none
• .float-xl-left
• .float-xl-right
• .float-xl-none