Source

ভাসা

আমাদের প্রতিক্রিয়াশীল ফ্লোট ইউটিলিটিগুলি ব্যবহার করে যে কোনও ব্রেকপয়েন্ট জুড়ে যে কোনও উপাদানে ফ্লোটগুলি টগল করুন।

ওভারভিউ

এই ইউটিলিটি ক্লাসগুলি CSS floatপ্রপার্টি ব্যবহার করে বর্তমান ভিউপোর্ট সাইজের উপর ভিত্তি করে বাম বা ডানে একটি উপাদান ভাসিয়ে দেয় বা ভাসমান অক্ষম করে । !importantনির্দিষ্টতা সমস্যা এড়াতে অন্তর্ভুক্ত করা হয়. এগুলি আমাদের গ্রিড সিস্টেমের মতো একই ভিউপোর্ট ব্রেকপয়েন্ট ব্যবহার করে। অনুগ্রহ করে সচেতন হোন ফ্লোট ইউটিলিটিগুলি ফ্লেক্স আইটেমগুলিতে কোনও প্রভাব ফেলে না।

ক্লাস

একটি ক্লাসের সাথে একটি ফ্লোট টগল করুন:

সমস্ত ভিউপোর্ট আকারে বামে ফ্লোট করুন

সমস্ত ভিউপোর্ট আকারে ডানদিকে ফ্লোট করুন

সমস্ত ভিউপোর্ট আকারে ভাসবেন না
<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প্রতিটি মানের জন্য প্রতিক্রিয়াশীল বৈচিত্রও বিদ্যমান ।

SM (ছোট) বা চওড়া আকারের ভিউপোর্টে বামে ভাসুন

MD (মাঝারি) বা চওড়া আকারের ভিউপোর্টে বামে ভাসুন

LG (বড়) বা চওড়া আকারের ভিউপোর্টে বামে ভাসা

ভিউপোর্ট আকারের XL (অতিরিক্ত-বড়) বা আরও চওড়ায় বামে ভাসুন

<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