Template use font families "Poppins" & "Nunito". Go to SCSS folder > base > _typography.scss
/*=== Typography ===*/
/*-- Poppins font --*/
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Thin.ttf") format("truetype");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-ExtraLight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("./../fonts/poppins/Poppins-Light.ttf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("./../fonts/poppins/Poppins-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
}
/*-- Nunito font --*/
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-ExtraLight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
}
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>
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>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/img/demo-img/1.jpg" class="img-fluid" alt="Responsive image">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/img/demo-img/2.jpg" class="img-thumbnail" alt="Thumbnail image">Image Style
Four type of image style in template .img-rectangle, .img-round-radius, .img-round, .img-pill.
<img src="assets/img/demo-img/2.jpg" class="img-thumbnail" alt="Thumbnail image">
