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

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

হোম-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

 


উদাহরণঃ টেক্সট কালার সংক্রান্ত ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Helper Classes 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">
        <h2>টেক্সট</h2>
        <p class="text-muted">এই প্যারাগ্রাফটি "text-muted" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="text-muted" href="#">এই লিংকটি "text-muted" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="text-primary">এই প্যারাগ্রাফটি "text-primary" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="text-primary" href="#">এই লিংকটি "text-primary" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="text-success">এই প্যারাগ্রাফটি "text-success" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="text-success" href="#">এই লিংকটি "text-success" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="text-info">এই প্যারাগ্রাফটি "text-info" ক্লাস  দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="text-info" href="#">এই লিংকটি "text-info" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="text-warning">এই প্যারাগ্রাফটি "text-warning" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="text-warning" href="#">এই লিংকটি "text-warning" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="text-danger">এই প্যারাগ্রাফটি "text-danger" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="text-danger" href="#">এই লিংকটি "text-danger" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
	</div>

   </body>
</html>

ফলাফল






উদাহরণঃ ব্যাকগ্রাউন্ড কালার সংক্রান্ত ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Helper Classes 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">
        <h2>ব্যাকগ্রাউন্ড</h2>
        <p class="bg-primary">এই প্যারাগ্রাফটি "bg-primary" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="bg-primary" href="#">এই লিংকটি "bg-primary" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="bg-success">এই প্যারাগ্রাফটি "bg-success" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="bg-success" href="#">এই লিংকটি "bg-success" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="bg-info">এই প্যারাগ্রাফটি "bg-info" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="bg-info" href="#">এই লিংকটি "bg-info" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
        <p class="bg-warning">এই প্যারাগ্রাফটি "bg-warning" ক্লাস ক্লাসের মাধ্যমে স্টাইল করা হয়েছে।</p>
        <a class="bg-warning" href="#">এই লিংকটি "bg-warning" ক্লাস ক্লাসের মাধ্যমে স্টাইল করা হয়েছে।</a>
        <p class="bg-danger">এই প্যারাগ্রাফটি "text-danger" ক্লাস দ্বারা স্টাইল করা হয়েছে।</p>
        <a class="bg-danger" href="#">এই লিংকটি "text-danger" ক্লাস দ্বারা স্টাইল করা হয়েছে।</a>
	</div>

   </body>
</html>

ফলাফল






উদাহরণঃ .pull-left এবং .pull-right ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Helper Classes 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">
        <h2>উদাহরণ</h2>
        <div class="pull-right">একটি ইলিমেন্টকে ডানদিকে নেয়ার জন্য pull-right ক্লাসটি ব্যবহার করা হয়।</div>
        <div class="pull-left">একটি ইলিমেন্টকে বামদিকে নেয়ার জন্য pull-left ক্লাসটি ব্যবহার করা হয়।</div>
   </div>

   </body>
</html>

ফলাফল






উদাহরণঃ .center-block ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Helper Classes 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">
        <h2>উদাহরণ</h2>
        <div class="center-block" style="background-color:green;color:white;width:200px;">
        এই div এলিমেন্টটি পেজের মাঝখানে অবস্থান করবে।
        </div>
    </div>

   </body>
</html>

ফলাফল






উদাহরণঃ .clearfix ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Helper Classes 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>
      <style>
      div {
            color: white;
      }
      </style>
   </head>

   <body>

      <div class="container-fluid">
            <div class="row">
               <div class="col-xs-6 col-sm-3" style="background-color:red;">
                  প্রথম কলাম<br>
                  প্রতিক্রিয়া দেখার জন্য ব্রাউজারের স্ক্রিন ছোট বড় করুন!
               </div>
               <div class="col-xs-6 col-sm-3" style="background-color:green;">দ্বিতীয় কলাম</div>

               <div class="clearfix visible-xs"></div>
               <div class="col-xs-6 col-sm-3" style="background-color:blue;">তৃতীয় কলাম</div>
               <div class="col-xs-6 col-sm-3" style="background-color:yellow;">চতুর্থ কলাম</div>
         </div>
      </div>

   </body>
</html>

ফলাফল






উদাহরণঃ .show এবং .hidden ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Helper Classes 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">
         <h2>উদাহরণ</h2>
         <p>একটি এলিমেন্টকে শো করার জন্য .show ক্লাসটি ব্যবহার করা হয়।</p>
         <p class="show">এই এলিমেন্টটি ব্রাউজার স্ক্রিনে দেখা যাবে।</p>
         <p>একটি ইলিমেন্টকে হাইড করার জন্য .hidden ক্লাসটি ব্যবহার করা হয়।</p>
         <p class="hidden">এই এলিমেন্টটি ব্রাউজার স্ক্রিনে দেখা যাবে না।</p>
      </div>

   </body>
</html>

ফলাফল






উদাহরণঃ .sr-only ক্লাসের ব্যবহার

<!DOCTYPE html>
<html>
   <head>
      <title>Bootstrap Helper Classes 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">
         <h2>উদাহরণ</h2>
         <p>স্ক্রিনরিডার ছাড়া বাকি সকল ডিভাইসে একটি এলিমেন্টকে হাইড করার জন্য .sr-only ক্লাসটি ব্যবহার করা হয়।</p>
         <a class="sr-only" href="#">এই কন্টেন্টটি ব্রাউজার প্রদর্শন করবে না।</a>
      </div>

   </body>
</html>

ফলাফল