লেআউট জন্য ইউটিলিটি
দ্রুত মোবাইল-বন্ধুত্বপূর্ণ এবং প্রতিক্রিয়াশীল বিকাশের জন্য, বুটস্ট্র্যাপ কন্টেন্ট দেখানো, লুকিয়ে রাখা, সারিবদ্ধ করা এবং ফাঁক করার জন্য কয়েক ডজন ইউটিলিটি ক্লাস অন্তর্ভুক্ত করে।
সম্পত্তির সাধারণ মানগুলিকে প্রতিক্রিয়াশীলভাবে টগল করার জন্য আমাদের ডিসপ্লে ইউটিলিটিগুলিdisplay
ব্যবহার করুন ৷ নির্দিষ্ট ভিউপোর্ট জুড়ে দেখানো বা লুকানোর জন্য আমাদের গ্রিড সিস্টেম, বিষয়বস্তু বা উপাদানগুলির সাথে এটি মিশ্রিত করুন।
বুটস্ট্র্যাপ 4 ফ্লেক্সবক্সের সাথে তৈরি করা হয়েছে, তবে প্রতিটি উপাদান display
পরিবর্তন করা হয়নি display: flex
কারণ এটি অনেক অপ্রয়োজনীয় ওভাররাইড যোগ করবে এবং অপ্রত্যাশিতভাবে মূল ব্রাউজার আচরণ পরিবর্তন করবে। আমাদের বেশিরভাগ উপাদান ফ্লেক্সবক্স সক্ষম সহ নির্মিত।
display: flex
আপনার যদি কোনো উপাদান যোগ করতে .d-flex
হয়, তাহলে প্রতিক্রিয়াশীল ভেরিয়েন্টের (যেমন, .d-sm-flex
) সাথে বা কোনো একটি দিয়ে তা করুন। সাইজিং, অ্যালাইনমেন্ট, স্পেসিং এবং আরও অনেক কিছুর display
জন্য আমাদের অতিরিক্ত ফ্লেক্সবক্স ইউটিলিটিগুলি ব্যবহারের অনুমতি দিতে আপনার এই শ্রেণী বা মানটির প্রয়োজন হবে ।
উপাদান এবং উপাদানগুলি কীভাবে ব্যবধান এবং আকার করা হয় তা নিয়ন্ত্রণ করতে margin
এবং padding
ব্যবধানের ইউটিলিটিগুলি ব্যবহার করুন । বুটস্ট্র্যাপ 4 একটি 1rem
মান ডিফল্ট $spacer
ভেরিয়েবলের উপর ভিত্তি করে ব্যবধান ইউটিলিটিগুলির জন্য একটি পাঁচ-স্তরের স্কেল অন্তর্ভুক্ত করে। সমস্ত ভিউপোর্টের জন্য মান চয়ন করুন (যেমন, এর .mr-3
জন্য margin-right: 1rem
), বা নির্দিষ্ট ভিউপোর্টগুলিকে লক্ষ্য করার জন্য প্রতিক্রিয়াশীল রূপগুলি বেছে নিন (যেমন, ব্রেকপয়েন্ট থেকে শুরু করার .mr-md-3
জন্য )।margin-right: 1rem
md
যখন টগল display
করার প্রয়োজন হয় না, আপনি আমাদের দৃশ্যমানতা ইউটিলিটিগুলিরvisibility
সাথে একটি উপাদানের টগল করতে পারেন ৷ অদৃশ্য উপাদানগুলি এখনও পৃষ্ঠার বিন্যাসকে প্রভাবিত করবে, তবে দর্শনার্থীদের থেকে দৃশ্যত লুকানো থাকে৷