HOME HTML CSS Javascript PHP Laravel

Text / Typography :

Hello guys ! today we will learn about Text / Typography in Bootstrap 4 !

Text typography in Bootstrap is a feature for styling and formatting the text content. It is used to create customized headings, inline subheadings, lists, paragraphs, aligning, adding more design-oriented font styles, and much more

Bootstrap provide classes for performing diffrent tasks on fonts !

Like making font bold , italic , underline etc !

class dicription
.font-weight-bold Bold texts
.font-weight-bolder Bold texts
.font-italic Italic texts
.lead Makes a paragraph stand out
.small Small text
.text-left Text align left
.text-right Text align right
.text-center Text align center
.text-decoration-none Text decoration none
.text-justify justified text
.text-lowercase turn text in lowecase
.text-reset Resets the color of a text or a link
.text-uppercase turn text in uppercase

Example :

PHP Example

Edit it yourself 



<!DOCTYPE html>
<html lang="en">
<head>
  <title>Grid 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/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>

<p>
<span class="font-weight-bold ">I am bold .</span><br>
<span class="font-italic">I am italic .</span><br>
<span class="text-left">I am Left .</span><br>
<span class="text-right">I am Right .</span><br>
<span class="text-center">I am Center .</span><br>
<span class="text-uppercase">I am uppercase .</span><br>
<span class="text-lowercase">I am lowercase .</span><br>
</p>

</body>
</html>