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


Bootstrap Responsive Text

মোবাইল, ট্যাবলেট, কম্পিউটার , ল্যাপটপ ও টিভি বিভিন্ন ডিভাইসে লেখা বা প্যারাগ্রাফকে ভিন্ন ভিন্ন স্থানে দেখানোর জন্য Bootstrap এর কিছু নিদিষ্ট ক্লাস আছে যা নিচে আলোচনা করা হল । bootstrap লেখার জন্য class="Nm" ব্যবহার করতে হবে আর সেই class এর ভিতরে নিদিষ্ট class এর নাম লিখতে হবে যেটা আগে থেকে bootstrap এ লেখা আছে তার কাজ কি ।


বিভিন্ন ডিভাইস এর বিবরণ :

xs-এর সম্পূর্ণ নাম Extra Small Device. 0px থেকে 575px এর ডিভাইসকে এক্সট্রা স্মল ডিভাইস বলা হয়।

sm - এর সম্পূর্ণ নাম Small Device. 576px থেকে 767px এর ডিভাইসকে স্মল ডিভাইস বলা হয়।

md - এর সম্পূর্ণ নাম Medium Device. 768px থেকে 991px এর ডিভাইসকে মিডিয়াম ডিভাইস বলা হয়।

lg - এর সম্পূর্ণ নাম Large Device. 992px থেকে 1199px এর ডিভাইসকে লারজ ডিভাইস বলা হয়।

xl - এর সম্পূর্ণ নাম Extra Large Device. 1200px এর উপরের ডিভাইসকে এক্সট্রা লারজ ডিভাইস বলা হয়।

Bootstrap Responsive Text ব্যবহৃত ক্লাস এর নাম গুলো নিচে দেওয়া হল :


.text-sm-righttext-md-right
.text-lg-righttext-xl-right
.text-sm-centertext-md-center
.text-lg-centertext-xl-center
.text-sm-lefttext-md-left
.text-lg-lefttext-xl-left

.text-sm-right ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 576px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি ডান দিকে দেখাবে । এখানে মনে রাখবেন 576px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap code tag

this is sm-right class 576px +



.text-md-right ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 768px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি ডান দিকে দেখাবে । এখানে মনে রাখবেন 768px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap code tag

this is md-right class 768px +



.text-lg-right ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 992px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি ডান দিকে দেখাবে । এখানে মনে রাখবেন 992px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap code tag

this is lg-right class 992px +



.text-xl-right ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 1200px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি ডান দিকে দেখাবে । এখানে মনে রাখবেন 1200px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap xl right class

this is xl-right class 1200px +



.text-sm-center ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 576px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি মাঝখানে দেখাবে । এখানে মনে রাখবেন 576px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap sm center class

this is sm-center class 576px +



.text-md-center ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 768px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি মাঝখানে দেখাবে । এখানে মনে রাখবেন 768px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap md center class

this is md-center class 768px +



.text-lg-center ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 992px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি মাঝখানে দেখাবে । এখানে মনে রাখবেন 992px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap  text-lg-center class

this is lg-center class 992px +



.text-xl-center ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 1200px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি মাঝখানে দেখাবে । এখানে মনে রাখবেন 1200px এর নিচে লেখা বাম দিকে দেখাবে।

bootstrap  text-xl-center class

this is xl-center class 1200px +



.text-sm-left ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 576px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি বাম দিকে দেখাবে ।

bootstrap  text-sm-left class

this is text-sm-left class



.text-md-left ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 768px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি বাম দিকে দেখাবে ।

bootstrap  text-md-left class

this is text-md-left class



.text-lg-left ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 992px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি বাম দিকে দেখাবে ।

bootstrap  text-lg-left class

this is text-lg-left class



.text-xl-left ক্লাস কে যদি কোন লেখার মধ্যে ব্যবহার করা হয় তাহলে 1200px এর উপরে কোন ডিভাইস থেকে ওয়েবপেজটি ওপেন করলে লেখাটি বাম দিকে দেখাবে ।

bootstrap  text-xl-left class

this is text-xl-left class