বুটস্ট্রাপ গ্রীড উদাহরণ

এই পেজের মধ্যে আমরা বুটস্ট্রাপ গ্রীড লে-আউটের কিছু বেসিকে উদাহরণ দেয়ার চেষ্টা করেছি।

তিনটি সমান কলামের জন্য

.col-sm-4

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে সমান প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। কিন্তু মোবাইল ফোনের ক্ষেত্রে কলামগুলো নিচে নিচে অবস্থান করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container-fluid">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	    <div class="col-sm-4" style="background-color:#ff9999;color:white;">four column</div>
	    <div class="col-sm-4" style="background-color:#c299ff;color:white;">four column</div>
	    <div class="col-sm-4" style="background-color:#b3ffb3;color:white;">four column</div>
	  </div>
	</div>

</body>
</html>

ফলাফল

তিনটি অসমান কলামের জন্য

.col-sm-3

.col-sm-6

.col-sm-3

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট তিনটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container-fluid">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	    <div class="col-sm-6" style="background-color:#ff9999;color:white;">six column</div>
	    <div class="col-sm-3" style="background-color:#c299ff;color:white;">three column</div>
	    <div class="col-sm-3" style="background-color:#b3ffb3;color:white;">three column</div>
	  </div>
	</div>

</body>
</html>

ফলাফল

দুটি অসমান কলামের জন্য

.col-sm-9

.col-sm-3

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container-fluid">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	    <div class="col-sm-9" style="background-color:#ff9999;color:white;">nine column</div>
	    <div class="col-sm-3" style="background-color:#c299ff;color:white;">three column</div>
	  </div>
	</div>

</body>
</html>

ফলাফল

দুটি কলামের মধ্যে আরো দুটি নেস্টেড কলাম

নিম্নলিখিত উদাহরণে দেখানো হয়েছে যে ছোট স্ক্রিনের জন্য কিভাবে ভিন্ন প্রস্থ বিশিষ্ট দুইটি কলাম তৈরি করা যায়, যা মিডিয়াম এবং বড় স্ক্রিনের জন্য একই ভাবে কাজ করবে। দুটি কলামের মধ্যে বড় কলামটিকে আবার সমান দুই ভাগে ভাগ করা হয়েছে। মোবাইল ডিভাইসের ক্ষেত্রে সবগুলো কলামই নিচে নিচে অবস্থান করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container-fluid">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	      <div class="col-sm-9" style="background-color:#ff9999;color:white;">nine column
	          <div class="row">
	              <div class="col-sm-4" style="background-color:red;color:white;">four column</div>
	              <div class="col-sm-8" style="background-color:green;color:white;">eight column</div>
	          </div>
	      </div>
	      <div class="col-sm-3" style="background-color:#c299ff;color:white;">three column</div>
	  </div>
	</div>

</body>
</html>

ফলাফল

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

বুটস্ট্রাপ গ্রীড সিস্টেমে চারটি ক্লাস রয়েছে: xs(মোবাইল), sm(ট্যাবলেট), md(ডেস্কটপ) and lg(বড় ডেস্কটপ)। ডাইনামিক ও ফ্লেক্সিবল লে-আউট তৈরি করার ক্ষেত্রে ক্লাসগুলো একত্রে ব্যবহার করা যায়।

টিপস: বুটস্ট্রাপ গ্রীড সিস্টেমে ছোট ক্লাসগুলোকে বেশি প্রাধান্য দেয়া হয়েছে। আপনি যদি xs এবং sm ক্লাসে একই লে-আউট পেতে চান তাহলে শুধুমাত্র xs ক্লাস উল্লেখ করলেই হবে।

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	     <div class="col-xs-8 col-md-5" style="background-color:#ff9999;color:white;">mobile-9column | dekstop-7column</div>
	     <div class="col-xs-4 col-md-7" style="background-color:#c299ff;color:white;">mobile-3column | dekstop-5column</div>
	  </div>
	
	  <div class="row">
	     <div class="col-xs-7 col-md-2" style="background-color:#c299ff;color:white;">mobile-7column | dekstop-2column</div>
	     <div class="col-xs-5 col-md-10" style="background-color:#ff9999;color:white;">mobile-5column | dekstop-10column</div>
	  </div>
	
	  <div class="row">
	     <div class="col-xs-6" style="background-color:#ff9999;color:white;">mobile-6column</div>
	     <div class="col-xs-6" style="background-color:#c299ff;color:white;">mobile-6column</div>
	  </div>
	</div>

</body>
</html>

ফলাফল

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

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

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	     <div class="col-xs-6 col-md-4 col-lg-3" style="background-color:#ff9999;color:white;">mobile-6column | dekstop-4column | big-dekstop-3column</div>
	     <div class="col-xs-6 col-md-8 col-lg-9" style="background-color:#c299ff;color:white;">mobile-6column | dekstop-8column | big-dekstop-9column</div>
	  </div>
	
	  <div class="row">
	     <div class="col-xs-3 col-md-6 col-lg-4" style="background-color:#c299ff;color:white;">mobile-3column | dekstop-6column | big-dekstop-4column</div>
	     <div class="col-xs-9 col-md-6 col-lg-8" style="background-color:#ff9999;color:white;">mobile-9column | dekstop-6column | big-dekstop-8column</div>
	  </div>
	</div>

</body>
</html>

ফলাফল

ফ্লোট ক্লিয়ার

নির্দিষ্ট ব্রেকপয়েন্টে অদ্ভুত wrapping প্রতিরোধ করতে ফ্লোট ক্লিয়ার করুন(.clearfix ক্লাসের মাধ্যমে):

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	    <div class="col-xs-6 col-sm-3" style="background-color:#c299ff;color:white;">
	    প্রথম কলাম
	    <br>
	   প্রতিক্রিয়া দেখার জন্য ব্রাউজারের উইন্ডোর আকার ছোট বড় করুন।
	    </div>
	    <div class="col-xs-6 col-sm-3" style="background-color:#ff9999;color:white;">দ্বিতীয় কলাম</div>
	    <!-- নির্দিষ্ট ভিউপোর্টের আকার অনুযায়ী clearfix যুক্ত করুন-->
	    <div class="clearfix visible-xs"></div>
	    <div class="col-xs-6 col-sm-3" style="background-color:#b3ffb3;color:white;">তৃতীয় কলাম</div>
	    <div class="col-xs-6 col-sm-3" style="background-color:#c299ff;color:white;">চতুর্থ কলাম</div>
	  </div>
	</div>

</body>
</html>

ফলাফল

কলাম অফসেট

কলামকে ডানদিকে সরিয়ে নেয়ার জন্য .col-*-offset-* ক্লাস ব্যবহার করুন। এটি কলামের বাম দিকের মার্জিন বৃদ্ধি(কলামের প্রস্থের সমান) করেঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container-fluid">
	  <h1>Hello Learners!</h1>
	  <div class="row">
	    <div class="col-sm-5 col-md-6" style="background-color:#ff9999;color:white;">.col-sm-5 .col-md-6</div>
	    <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0" style="background-color:#c299ff;color:white;">.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0</div>
	</div>
	</div>

</body>
</html>

ফলাফল

Push এবং Pull - কলাম ক্রম পরিবর্তন

গ্রীড কলামের ক্রম পরিবর্তন করার জন্য .col-*-push-* ক্লাস ব্যবহার করুনঃ

উদাহরণ

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Grid Example</title>
	  <meta charset="utf-8">
	  <meta name="viewport" content="width=device-width, initial-scale=1">
	  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   </head>

<body>

    <div class="container-fluid">
	  <h1>Hello Learners!</h1>
	 <div class="row">
	    <div class="col-sm-4 col-sm-push-8" style="background-color:#ff9999;color:white;">.col-sm-4 .col-sm-push-8</div>
	    <div class="col-sm-8 col-sm-pull-4" style="background-color:#c299ff;color:white;">.col-sm-8 .col-sm-pull-4</div>
	</div>
	</div>

</body>
</html>

ফলাফল

« পূর্ববর্তী

পরবর্তী »

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য

বুটস্ট্রাপ টিউটোরিয়াল

সিএসএস কম্পোনেন্ট

JS কম্পোনেন্ট

বুটস্ট্রাপ গ্রীড সিস্টেম

বুটস্ট্রাপ রেফারেন্স

বুটস্ট্রাপ গ্রীড উদাহরণ

তিনটি সমান কলামের জন্য

উদাহরণ

ফলাফল

তিনটি অসমান কলামের জন্য

উদাহরণ

ফলাফল

দুটি অসমান কলামের জন্য

উদাহরণ

ফলাফল

দুটি কলামের মধ্যে আরো দুটি নেস্টেড কলাম

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

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

উদাহরণ

ফলাফল

ফ্লোট ক্লিয়ার

উদাহরণ

ফলাফল

কলাম অফসেট

উদাহরণ

ফলাফল

Push এবং Pull - কলাম ক্রম পরিবর্তন

উদাহরণ

ফলাফল

আমাদের টিউটোরিয়াল সমূহ

ক্লায়েন্ট সাইড টিউটোরিয়াল

সার্ভার সাইড টিউটোরিয়ায়াল

প্রোগ্রামিং টিউটোরিয়ায়াল

অন্যান্য