বুটস্ট্রাপ সিএসএস এইচটিএমএল জাভাস্ক্রিপ্ট জেকুয়েরি পিএইচপি এসকিউএল এঙ্গুলার জেএস
ফোরাম
×

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

হোম-Home শুরু করুন-Get Started গ্রীড বেসিক-Grid Basic

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

টাইপোগ্রাফী-Typography টেবিল-Table ইমেজ-Image জামবোর্টন-Jumbotron বুটস্ট্রাপ Well এলার্ট-Alert বাটন-Button বাটন গ্রুপ-Button Group গ্লিফআইকন-Glypicon ব্যাজ/লেভেল-Badge/Label প্রোগ্রেস বার-Progress Bar পেজিনেশন-Pagination পেজার-Pager লিস্ট গ্রুপ-List Group প্যানেল-Panel ফরম-Form ইনপুট-Input ইনপুট(২)-Input(2) ইনপুটের আকার-Input Sizing সাহায্যকারী-Helper

JS কম্পোনেন্ট

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব/পিল-Tab/Pill ন্যাভবার-Navbar ক্যারোসেল-Carousel মোডাল-Modal টুলটিপ-Tooltip পপওভার-Popover স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

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

গ্রীড সিস্টেম-Grid System বুটস্ট্রাপ Stacked/Horizontal গ্রীড ছোট-Grid Small গ্রীড মিডিয়াম-Grid Medium গ্রীড বড়-Grid Large গ্রীড উদাহরণ-Grid Example

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

ড্রপডাউন-Dropdown কলাপ্স-Collapse ট্যাব-Tab বাটন-Button ক্যারোসেল-Carousel মোডাল-Modal স্ক্রলস্পাই-Scrollspy এফিক্স-Affix

 

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


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


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

.col-sm-4
.col-sm-4
.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>

ফলাফল