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


Bootstrap Display class

বুটস্ট্র্যাপ Display প্রপার্টি রেস্পন্সিভ ওয়েবসাইট তৈরি করতে সাহায্য করে। বিভিন্ন ডিভাইস এর কোন জায়গায় কোন কোন এলেমেন্ট কে দেখাতে হবে আর কোন গুলোকে দেখাতে হবে না তা নির্ধারণ করা হয় এই প্রোপার্টির কিছু ক্লাস দ্বারা ।

.d-inline - দুটি Heading ট্যাগকে একটি লাইনে দেখানোর জন্য এই ক্লাস ব্যবহার করা হয় ।


bootstrap display inline property

.d-block - span ট্যাগের ভিতরে যা লেখা হয় সেটি যদি heading ট্যাগের মত দেখাতে চায় সেই জন্য এই ক্লাসটি ব্যবহার করা হয়। আপনারা জানেন span ট্যাগে যতটা লেখা হয় ততটা জায়গা ধারন করে । এই ক্লাসটি লেখার ফলে পুরো জায়গা ধারন করে রাখবে।

bootstrap display block property

.d-inline-block - একটি div এর height & width না দিয়ে যতটা লেখা আছে ততটা ছোট করে প্রকাশ করার জন্য এই ক্লাসটি ব্যবহার করা হয় ।

bootstrap display block property

Responsive Hide Property :

ওয়েবপেজ এর কোন অবজেক্ট কে বিভিন্ন ডিভাইস লুকিয়ে রাখার জন্য নিচের বুস্টট্র্যাপ ক্লাস গুলো ব্যবহার করা হয় ।

ক্লাস মিডিয়া
d-none কোন মিডিয়া ডিভাইসে দেখা যাবে না ।
d-none d-sm-block 576px এর নিচে ডিভাইসে দেখা যাবে না । 576 px এর উপরে সব ডিভাইসে দেখা যাবে ।
d-sm-none d-md-block সব ডিভাইসে দেখা যাবে শুধু মাত্র 576px থেকে 767 px এর small ডিভাইসে দেখা যাবে না
d-md-none d-lg-block সব ডিভাইসে দেখা যাবে শুধু মাত্র 768px থেকে 991 px এর মিডিয়াম ডিভাইসে দেখা যাবে না
d-lg-none d-xl-block সব ডিভাইসে দেখা যাবে শুধু মাত্র 992px থেকে 1199 px এর Large ডিভাইসে দেখা যাবে না
d-xl-none সব ডিভাইসে দেখা যাবে শুধু মাত্র 1200px এর উপরে Extra Large ডিভাইসে দেখা যাবে না

Responsive Show Property :

ওয়েবপেজ এর কোন অবজেক্ট কে কোন ডিভাইস দেখানো হবে তার জন্য নিচের বুস্টট্র্যাপ ক্লাস গুলো ব্যবহার করা হয় ।

ক্লাস মিডিয়া
d-block সব মিডিয়া ডিভাইসে দেখা যাবে ।
d-block d-sm-none শুধু মাত্র 0px থেকে 575px এর ডিভাইস দেখা যাবে এবং অন্য কোন ডিভাইসে দেখা যাবে না ।
d-none d-sm-block d-md-none শুধু মাত্র 576px থেকে 767 px এর small ডিভাইসে দেখা যাবে
d-none d-md-block d-lg-none শুধু মাত্র 768px থেকে 991 px এর মিডিয়াম ডিভাইসে দেখা যাবে
d-none d-lg-block d-xl-none শুধু মাত্র 992px থেকে 1199 px এর Large ডিভাইসে দেখা যাবে
d-none d-xl-block শুধু মাত্র 1200px এর উপরে Extra Large ডিভাইসে দেখা যাবে