তিনটি সমান কলাম

ডেস্কটপ থেকে শুরু করে এবং বড় ডেস্কটপে স্কেলিং করে তিনটি সমান-প্রস্থের কলাম পান । মোবাইল ডিভাইস, ট্যাবলেট এবং নীচে, কলামগুলি স্বয়ংক্রিয়ভাবে স্ট্যাক হবে৷

.col-md-4
.col-md-4
.col-md-4

তিনটি অসম কলাম

ডেস্কটপ থেকে শুরু করে তিনটি কলাম পান এবং বিভিন্ন প্রস্থের বড় ডেস্কটপে স্কেলিং করুন । মনে রাখবেন, গ্রিড কলাম একটি একক অনুভূমিক ব্লকের জন্য বারোটি পর্যন্ত যোগ করা উচিত। এর থেকেও বেশি, এবং কলামগুলি ভিউপোর্ট যাই হোক না কেন স্ট্যাক করা শুরু করে।

.col-md-3
.col-md-6
.col-md-3

দুই কলাম

ডেস্কটপ থেকে শুরু করে বড় ডেস্কটপে স্কেলিং করে দুটি কলাম পান ।

.col-md-8
.col-md-4

সম্পূর্ণ প্রস্থ, একক কলাম

পূর্ণ-প্রস্থ উপাদানগুলির জন্য কোনও গ্রিড ক্লাসের প্রয়োজন নেই।


দুটি নেস্টেড কলাম সহ দুটি কলাম

ডকুমেন্টেশন অনুযায়ী, নেস্টিং করা সহজ—একটি বিদ্যমান কলামের মধ্যে শুধু কলামের সারি রাখুন। এটি আপনাকে ডেস্কটপ থেকে শুরু করে দুটি কলাম দেয় এবং বড় ডেস্কটপে স্কেলিং করে , বড় কলামের মধ্যে আরও দুটি (সমান প্রস্থ)।

মোবাইল ডিভাইসের আকার, ট্যাবলেট এবং নিচে, এই কলামগুলি এবং তাদের নেস্টেড কলামগুলি স্ট্যাক হবে৷

.col-md-8
.col-md-6
.col-md-6
.col-md-4

মিশ্র: মোবাইল এবং ডেস্কটপ

বুটস্ট্র্যাপ 3 গ্রিড সিস্টেমের চারটি স্তর রয়েছে: xs (ফোন), এসএম (ট্যাবলেট), এমডি (ডেস্কটপ) এবং এলজি (বড় ডেস্কটপ)। আপনি আরও গতিশীল এবং নমনীয় লেআউট তৈরি করতে এই শ্রেণীর প্রায় যেকোনো সমন্বয় ব্যবহার করতে পারেন।

ক্লাসের প্রতিটি স্তর স্কেল করে, মানে আপনি যদি xs এবং sm-এর জন্য একই প্রস্থ সেট করার পরিকল্পনা করেন, তাহলে আপনাকে শুধুমাত্র xs নির্দিষ্ট করতে হবে।

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

মিশ্র: মোবাইল, ট্যাবলেট এবং ডেস্কটপ

.col-xs-12 .col-sm-6 .col-lg-8
.col-sm-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

কলাম ক্লিয়ারিং

অসম বিষয়বস্তু সহ বিশ্রী মোড়ক রোধ করতে নির্দিষ্ট ব্রেকপয়েন্টে ফ্লোটগুলি পরিষ্কার করুন।

.col-xs-6 .col-sm-3
আপনার ভিউপোর্টের আকার পরিবর্তন করুন বা একটি উদাহরণের জন্য আপনার ফোনে এটি পরীক্ষা করুন৷
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

অফসেট, পুশ, এবং পুন রিসেট

নির্দিষ্ট ব্রেকপয়েন্টে অফসেট, পুশ এবং টান রিসেট করুন।

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0