বুটস্ট্রাপ সিএসএস হেল্পার ক্লাস উদাহরণ - Bootstrap Helper Classes Example
উদাহরণঃ টেক্সট কালার সংক্রান্ত ক্লাসের ব্যবহার
<!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>
ফলাফল
