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">