SNDP BAG 4 YOU
কম্পিউটার প্রোগ্রামিং শিখুন


Bootstrap Float Class

কোন অবজেক্টকে প্রয়োজন অনুযায়ী ডান দিকে ও বামদিকে নিয়ে যাওয়ার জন্য float ক্লাস ব্যবহার করা হয় । বুটস্ট্র্যাপ এর ক্লাস এর মাধ্যমে রেস্পন্সিভ float ব্যবহার করতে পারি একটি ওয়েবপেজে ।

.float-left - কোন অবজেক্টএর ট্যাগের ভিতরে এই ক্লাস টি ব্যবহার করলে অবজেক্টটি বাম দিকে থাকবে।

bootstrap float left class

.float-right - কোন অবজেক্টএর ট্যাগের ভিতরে এই ক্লাস টি ব্যবহার করলে অবজেক্টটি ডানদিকে থাকবে।

bootstrap float left class


এখানে দুটি div আছে একটিকে .float-left ক্লাস ব্যবহার করা হয়েছে অপরটিকে.float-right ক্লাস ব্যবহার করা হয়েছে । এর ফলে একটি div বামদিকে অপর div টি ডানদিকে দেখাছে ।

bootstrap float left class


.float-none default থাকবে কোন দিকে float হবে না।

.float-sm-left কোন অবজেক্টএর ট্যাগের ভিতরে এই ক্লাস টি ব্যবহার করলে অবজেক্টটি কোনদিকে float হবে না ডিফল্ট ভাবে যেমন ছিল তেমন থাকবে।

.float-sm-right 576px ও এর উপরে (small Device)অবজেক্টটি ডানদিকে থাকবে । 575px ও এর নিচে অবজেক্টটি বামদিকে থাকবে

.float-sm-none কোন অবজেক্টএর ট্যাগের ভিতরে এই ক্লাস টি ব্যবহার করলে অবজেক্টটি কোনদিকে float হবে না ডিফল্ট ভাবে যেমন ছিল তেমন থাকবে।

.float-md-left 768px এর উপরে অবজেক্টটি বামদিকে থাকবে ।

.float-md-right 768px এর উপরে অবজেক্টটি ডানদিকে থাকবে । 768px এর নিচে বামদিকে থাকবে ।

.float-md-none 768px এর উপরে অবজেক্টটি ডিফল্ট থাকবে ।

.float-lg-left 992px এর উপরে অবজেক্টটি বামদিকে থাকবে ।

.float-lg-right 992px এর উপরে অবজেক্টটি ডানদিকে থাকবে । 992px এর নিচে বামদিকে থাকবে ।

.float-lg-none 992px এর উপরে অবজেক্টটি ডিফল্ট থাকবে ।

.float-xl-left 1200px এর উপরে অবজেক্টটি বামদিকে থাকবে ।

.float-xl-right 1200px এর উপরে অবজেক্টটি ডানদিকে থাকবে । 1200px এর নিচে বামদিকে থাকবে ।

.float-xl-none1200px এর উপরে অবজেক্টটি ডিফল্ট থাকবে ।


প্রোজেক্ট কোড :

.float-sm-right .float-md-left 0px থেকে 575px পর্যন্ত ডিফল্ট ভাবে বামদিকে থাকবে । 576px থেকে 767px পর্যন্ত ডানদিকে থাকবে । 768px এর উপরে বামদিকে থাকবে।








.float-sm-right .float-md-none 0px থেকে 575px পর্যন্ত ডিফল্ট ভাবে বামদিকে থাকবে । 576px থেকে 767px পর্যন্ত ডানদিকে থাকবে । 768px এর উপরে বামদিকে থাকবে।



.float-none .float-sm-left 0px থেকে 575px পর্যন্ত ডিফল্ট ভাবে নিচে নিচে দেখাবে । 576px এর উপরে পুর স্ক্রীন জুড়ে দেখাবে একই লাইনে ।