×

Html & Html5

The World's best Software Development Study Portal

Typography


Bootstrap we are having some tags which we can use in HTML .


1. Heading Tags - We are having h1-h6 heading tags each having different font-weight.
Let’s have an example :-


<!DOCTYPE html>

<html lang="en">

<head>

<title> bootstrap 4 Example </title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container">

<h1>My Name is Manish</h1>

<h2>My Name is Manish </h2>

<h3>My Name is Manish </h3>

<h4>My Name is Manish </h4>

<h5>My Name is Manish </h5>

<h6>My Name is Manish </h6>

</div>

</body>

</html>

Output of this Program


bootstrapimage



Here all heading tags have different font-weight.

2. Display Tags- We are having 4 display tags .
Let’s have an example :-


<!DOCTYPE html>

<html lang="en">

<head>

<title>bootstrap 4 Example </title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

</head>

<body>

<div class="container">

<h1 class="display-1">My Name is Manish </h1>

<h2 class="display-2">My Name is Manish </h2>

<h3 class="display-3">My Name is Manish </h3>

<h4 class="display-4">My Name is Manish </h4>

</div>

</body>

</html>

Output of this Program


bootstrapimage





So in every display class we can see font text is lean.


There are many more class and tags in Bootstrap . Let’s notice their name and description :-



Class Description
.font-weight-bold Bold text
.font-weight-bolder Bolder text
.font-italic Italic text
.font-weight-light Light weight text
.font-weight-lighter Lighter weight text
.font-weight-normal Normal text
.lead Makes a paragraph stand out
.small Indicates smaller text (set to 85% of the size of the parent)
.text-left Indicates left-aligned text
.text-*-left Indicates left-aligned text on small, medium, large or xlarge screens
.text-break Prevents long text from breaking layout
.text-center Indicates center-aligned text
.text-*-center Indicates center-aligned text on small, medium, large or extralarge screens





Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute