বুটস্ট্রাপ টাইপোগ্রাফী ক্লাসসমূহের উদাহরণ - Bootstrap Typography Example
উদাহরণঃ বুটস্ট্রাপ .lead ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>প্যারাগ্রাফকে লক্ষণীয় করে তোলার জন্য .lead ক্লাসটি ব্যবহার করা হয়ঃ</p>
<p class="lead">.lead ক্লাস ব্যবহৃত প্যারাগ্রাফ।</p>
<p>এটি একটি সাধারণ প্যারাগ্রাফ।</p>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ .small ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>প্যারাগ্রাফকে সাধারণ আকারের চেয়ে ছোট আকারের করার জন্য .small ক্লাসটি ব্যবহার করা হয়ঃ</p>
<p class="small">.small ক্লাস ব্যবহৃত প্যারাগ্রাফ।</p>
<p>এটি একটি সাধারণ প্যারাগ্রাফ।</p>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ .text-left ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>.text-left ক্লাস টেক্সটকে বামে এ্যালাইন করেঃ</p>
<p class="text-left">বামে এ্যালাইনকৃত টেক্সট।</p>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ .text-center ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>.text-center ক্লাস টেক্সটকে মাঝে এ্যালাইন করেঃ</p>
<p class="text-center">মাঝে এ্যালাইনকৃত টেক্সট।</p>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ .text-right ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>.text-right ক্লাস টেক্সটকে ডানে এ্যালাইন করেঃ</p>
<p class="text-right">ডানে এ্যালাইনকৃত টেক্সট।</p>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ .text-justify এবং .text-nowrap ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>
<h3>.text-justify ক্লাস টেক্সটকে justify করে।</h3p>
<h3>.text-nowrap ক্লাস টেক্সটে no-wrap যুক্ত করে।</h3>
<p class="text-justify">Justified Text. Justified Text. Justified Text. Justified Text. Justified Text.</p>
<p class="text-nowrap">nowrap text. nowrap text. nowrap text. nowrap text. nowrap text. nowrap text.
nowrap text. nowrap text. nowrap text. nowrap text. nowrap text. nowrap text.
nowrap text. nowrap text. nowrap text. nowrap text. nowrap text. nowrap text.</p>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ Text Transform ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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-lowercase">THIS LINE WILL TRANSFORM INTO LOWERCASE LETTER.</p>
<p class="text-uppercase">this line will transform into lowercase letter.</p>
<p class="text-capitalize">this line will transform into capitalize letter.</p>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ .list-unstyled এবং .list-inline ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>
<h3>.text-unstyle ক্লাসের ব্যবহার</h3>
<ul class="list-unstyled">
<li>চা</li>
<li>কফ</li>
<li>দু</li>
</ul>
<h3>.text-inline ক্লাসের ব্যবহার</h3>
<ul class="list-inline">
<li>Home</li>
<li>Service</li>
<li>Contract</li>
<li>About us</li>
</ul>
</div>
</body>
</html>
ফলাফল
উদাহরণঃ বুটস্ট্রাপ .dl-horizontal ক্লাসের ব্যবহার
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Typography 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>.dl-horizontal ক্লাস ব্যবহার করলে ইহা প্রথমে ডিফল্ট dl এর মতই দেখায়, কিন্তু যখন ব্রাউজার উইন্ডো বড় করা হয়,
তখন ইহা পাশাপাশি দেখায়ঃ</p>
<dl class="dl-horizontal">
<dt>কফি </dt>
<dd>- গরম কফি</dd>
<dt>আম </dt>
<dd>- পাকা আম</dd>
</dl>
</div>
</body>
</html>
ফলাফল
