Skip to content

Instantly share code, notes, and snippets.

@imamuddinwp

imamuddinwp/Bootstrap-4-Typography.html

Last active August 1, 2019 06:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save imamuddinwp/047400ee072ac7a55f0abcd14d95bf0d to your computer and use it in GitHub Desktop.
Save imamuddinwp/047400ee072ac7a55f0abcd14d95bf0d to your computer and use it in GitHub Desktop.
Download ZIP
Hey there; it's me! Imam Uddin; imamcu07. Here is the all details on about bootstrap 4 typography. If you have any opinion; please leave a comment. For more details of me: https://about.me/imamcu07
Raw
Bootstrap-4-Typography.html
<!-- Bootstrap 4 Practise : powered by ImAmUdDiN : https://about.me/imamcu07 -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example Template</title>
<meta charset="utf-8">
<!-- Viewport Meta Tag -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<!-- YOUR CONTENT STARTS HERE -->
<div class="container-fluid">
<h1>h1 বুটস্ট্রাপ হেডিং (৩৬পিক্সেল)</h1>
<h2>h2 বুটস্ট্রাপ হেডিং (৩০পিক্সেল)</h2>
<h3>h3 বুটস্ট্রাপ হেডিং (২৪পিক্সেল)</h3>
<h4>h4 বুটস্ট্রাপ হেডিং (১৮পিক্সেল)</h4>
<h5>h5 বুটস্ট্রাপ হেডিং (১৪পিক্সেল)</h5>
<h6>h6 বুটস্ট্রাপ হেডিং (১২পিক্সেল)</h6>
</div>
<div class="container-fluid">
<h1>h1 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h1>
<h2>h2 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h2>
<h3>h3 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h3>
<h4>h4 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h4>
<h5>h5 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h5>
<h6>h6 বুটস্ট্রাপ হেডিং <small>সেকেন্ডারি টেক্সট</small></h6>
</div>
<div class="container">
<h3><code>mark</code> এলিমেন্টের উদাহরণ</h3>
<p>টেক্সকে <mark>হাইলাইট</mark> করার জন্য mark এলিমেন্ট ব্যবহার করা হয়।</p>
</div>
<div class="container">
<h3><code>abbr</code> এলিমেন্টের উদাহরণ</h3>
<p><abbr title="রাজধানী উন্নয়ন কর্তৃপক্ষ">রাজউক</abbr> বাংলাদেশের গণপূর্ত মন্ত্রণালয়ের অধীনে একটি সরকারি সংস্থা
যা রাজধানী ঢাকার উন্নয়ন প্রকল্পসমূহের পরিকল্পনা ও বাস্তবায়ন করে থাকে।</p>
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>
</div>
<div class="container">
<h3><code>ব্লক কোট </code> এলিমেন্টের উদাহরণ</h3>
<blockquote class="blockquote text-center">
<p class="mb-0">বাংলাদেশ দক্ষিণ এশিয়ার একটি জনবহুল রাষ্ট্র। বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের
পশ্চিম, উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত। বাংলাদেশের ভূখণ্ড
ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ। পার্শ্ববর্তী দেশের রাজ্য পশ্চিমবঙ্গ ও ত্রিপুরা-সহ বাংলাদেশ একটি ভৌগোলিকভাবে
জাতিগত ও ভাষাগত "বঙ্গ" অঞ্চলটির মানে পূর্ণ করে। "বঙ্গ" ভূখণ্ডের পূর্বাংশ পূর্ব বাংলা নামে পরিচিত ছিল, যা বর্তমানে বাংলাদেশ
নামের দেশ। পৃথিবীতে যে ক'টি রাষ্ট্র জাতিরাষ্ট্র হিসেবে মর্যাদা পায় তার মধ্যে বাংলাদেশ অন্যতম।</p>
<footer class="blockquote-footer">এই লাইন গুলো <cite title="Source Title"> উইকিপিডিয়া </cite> থেকে সংগৃহীত</footer>
</blockquote>
<blockquote class="blockquote text-center">
<p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<div class="container">
<h3><code>Block quote</code> এলিমেন্টের উদাহরণ</h3>
<blockquote class="blockquote text-right">
<p>বাংলাদেশ দক্ষিণ এশিয়ার একটি জনবহুল রাষ্ট্র। বাংলাদেশের সাংবিধানিক নাম গণপ্রজাতন্ত্রী বাংলাদেশ। ভূ-রাজনৈতিকভাবে বাংলাদেশের
পশ্চিম, উত্তর ও পূর্ব সীমান্তে ভারত, দক্ষিণ-পূর্ব সীমান্তে মায়ানমার ও দক্ষিণ উপকূলের দিকে বঙ্গোপসাগর অবস্থিত। বাংলাদেশের ভূখণ্ড
ভৌগোলিকভাবে একটি উর্বর ব-দ্বীপের অংশ বিশেষ। পার্শ্ববর্তী দেশের রাজ্য পশ্চিমবঙ্গ ও ত্রিপুরা-সহ বাংলাদেশ একটি ভৌগোলিকভাবে
জাতিগত ও ভাষাগত "বঙ্গ" অঞ্চলটির মানে পূর্ণ করে। "বঙ্গ" ভূখণ্ডের পূর্বাংশ পূর্ব বাংলা নামে পরিচিত ছিল, যা বর্তমানে বাংলাদেশ
নামের দেশ। পৃথিবীতে যে ক'টি রাষ্ট্র জাতিরাষ্ট্র হিসেবে মর্যাদা পায় তার মধ্যে বাংলাদেশ অন্যতম।</p>
<footer class="blockquote-footer"> এই লিখা গুলো <cite title="Source Title">উইকিপিডিয়া</cite> থেকে সংগৃহীত</footer>
</blockquote>
<div class="container">
<h3><code>dl</code> এলিমেন্টের উদাহরণ</h3>
<dl>
<dt>Coffee</dt>
<dd>- Black hot drink</dd>
<dt>MIlk</dt>
<dd>- White cold drink</dd>
<dt>Cold-drinks</dt>
<dd>- carbonated beverage soft drinks</dd>
</dl>
</div>
<div class="container">
<h3>code এলিমেন্টের উদাহরণ</h3>
<p>এই এইচটিএমএল কোডগুলোর মাধ্যমে একটি ডকুমেন্টের মধ্যে হেডিং এবং প্যারাগ্রাফ তৈরি করা হয়ঃ
<code>h1</code> - <code>h6</code> এবং <code>p</code></p>
</div>
<div class="container">
<h3><code>kbd</code> এলিমেন্টের উদাহরণ</h3>
<p>সেভ ডায়ালগ বক্স ওপেন করার জন্য <kbd>ctrl + s</kbd> চাপুন।</p>
</div>
<div class="container">
<h3><code>pre</code> এলিমেন্টের উদাহরণ</h3>
<pre><code>pre</code> এলিমেন্টের মধ্যের টেক্সট ফিক্সড প্রস্থের
ফন্টে প্রদর্শিত হয়, এছাড়াও এর
মধ্যের স্পেস এবং
লাইন ব্রেকগুলো
ব্রাউজার গননা করে।
</pre>
</div>
<div class="container">
<h3> <code>Text Color & Background</code> টেক্সট কালারের উদাহরণ</h3>
<p class="text-muted">এই টেক্সটি মিউটেড।</p>
<p class="text-primary">এই টেক্সটটি গুরুত্বপূর্ণ।</p>
<p class="text-success">এই টেক্সটের দ্বারা সফলতা বুঝাচ্ছে।</p>
<p class="text-info">এই টেক্সটি কিছু তথ্য রিপ্রেজেন্ট করে।</p>
<p class="text-warning">এই টেক্সটটি সতর্কতা বুঝাচ্ছে।</p>
<p class="text-danger">এই টেক্সটটি বিপদজনক বুঝাচ্ছে।</p>
</div>
<div class="container">
<h3> <code>Inline Text</code> টেক্সট উদাহরণ</h3>
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>
</div>
<div class="container">
<h3> <code>List</code> উদাহরণ</h3>
<ul class="list-unstyled">
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa</li>
<li>Facilisis in pretium nisl aliquet</li>
<li>Nulla volutpat aliquam velit
<ul>
<li>Phasellus iaculis neque</li>
<li>Purus sodales ultricies</li>
<li>Vestibulum laoreet porttitor sem</li>
<li>Ac tristique libero volutpat at</li>
</ul>
</li>
<li>Faucibus porta lacus fringilla vel</li>
<li>Aenean sit amet erat nunc</li>
<li>Eget porttitor lorem</li>
</ul>
</div>
<!-- YOUR CONTENT ENDS HERE -->
<!-- JavaScript: placed at the end of the document so the pages load faster -->
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<!-- Popper -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<!-- Latest compiled and minified Bootstrap JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment