Typography

Template use font families "Poppins" & "Play". Go to CSS folder > base > _typography.css

                                             
<!DOCTYPE html> 
	<html lang="en"> 
	<!-- All your metas will be here --> 
	<meta charset="UTF-8"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<head> 
	<!-- Your Stylesheets, Title --> 
	... 
	</head> 
	<body> 
	<!-- Page screen Start --> 
	<!-- Cursor animation section --> 
	<div id="cursor" class="cursor"> 
	........ 
	</div> 
	<!-- The Preloader Loader Section --> 
	<div class="loader-mask"> 
	........ 
	</div> 
	<!-- Header section Start --> 
	<div id="header-main" data-header> 
	... 
	</div> 
	<nav class="main-header-menu"> 
	... 
	</nav> 
	<!-- Hero section Start --> 
	<div class="hero" id="hero"> 
		<div class="container "> 
			<nav class="main-menu"> 
			... 
			</nav> 
			<div class="main-hero animate-section"> 
				<div class="education-exper"> 
					<div class="row menu-resume"> 
					... 
					</div> 
					<div class="skill-set"> 
					... 
					</div> 
					<div class="design-exper"> 
					... 
					</div> 
					<div class="skillsets overflow-hidden"> 
					... 
					</div> 
				</div> 
			</div> 
		</div> 
	</div> 
	<!-- Footer section Start --> 
	<footer class="footer animate-section"> 
	... 
	</footer> 
	<!-- Page screen End --> 
	<!-- Your All Scripts will be here --> 
	... 
	</body> 
	</html>

HTML head tag incudes h1 to h6. and also available classes ".h1 " to ".h6" in bootstrap.

Heading tag h1

Heading tag h2

Heading tag h3

Heading tag h4

Heading tag h5

Heading tag h6

                                                    
<h1>Heading tag h1</h1>
<h2>Heading tag h2</h2>
<h3>Heading tag h3</h3>
<h4>Heading tag h4</h4>
<h5>Heading tag h5</h5>
<h6>Heading tag h6</h6>

Typography in documentation involves selecting readable fonts, maintaining appropriate font sizes, creating a hierarchy with varying styles, spacing lines for clarity, and using whitespace and alignment to balance content. Ensure good contrast, use bullet points for lists, maintain consistency, and prioritize accessibility for a visually pleasing and easily understandable document.

Color Style

Just use classes to change color ".text-primary, .text-secondary, .text-success, .text-danger, .text-warning and .text-info" in bootstrap.

Heading tag h1

Heading tag h2

Heading tag h3

Heading tag h4

Heading tag h5

Heading tag h6

                                            
<h1 class="text-primary">Heading tag h1</h1>
<h2 class="text-secondary">Heading tag h2</h2>
<h3 class="text-success">Heading tag h3</h3>
<h4 class="text-danger">Heading tag h4</h4>
<h5 class="text-warning">Heading tag h5</h5>
<h6 class="text-info">Heading tag h6</h6>

Icons

Template use two types of icons library "Material Icons" & "Remix Icons." Add material icon & remix icon link on head tag.

                                         
<link href="assets/css/vendor/materialdesignicons.min.css" rel="stylesheet"> 
<link href="assets/css/vendor/remixicon.css" rel="stylesheet">

Material Icon

                                         
<i class="mdi mdi-access-point"></i>

Remix Icon

                                         
<i class="mdi mdi-access-point"></i>

Code Preview

Tempalte use code library Prism. Add prism css on head tag.

                                         
<link href="assets/css/vendor/prism.css" rel="stylesheet">

Add prism js bottom of the body tag.

                                         
<script src="assets/js/vendor/prism.js"></script>

Simple code

Preview od simple code <div> and <section> tags.

<pre class="language-markup m-b-24">
    <code class="language-markup">
        <div>
        <section>
    </code>
</pre>

                                         
<div>
    <section>

Images

Responsive images

Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.

                                         
<img src="assets/image/content/main-first.png" alt="main-first" class="img-fluid">

Image thumbnails

In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.

                                         
<img src="assets/image/content/main-first.png" alt="main-first" class="img-fluid">

Image Style

Four type of image style in template .img-rectangle, .img-round-radius, .img-round, .img-pill.

                                         
<img src="assets/image/content/main-first.png" alt="main-first" class="img-fluid">