Bootstrap 5 Tutorial In Hindi #21 | Bootstrap 5 Typography Classes.

Hello Dear Readers, Today In this Post, You will learn Bootstrap 5 Tutorial In Hindi #21 | Bootstrap 5 Typography Classes. Earlier I have shared a Bootstrap 5 Tutorial In Hindi #20 | Bootstrap 5 Text Formatting Classes. and now it’s time to Bootstrap 5 Typography Classes.

 

In this tutorial, You will learn full Bootstrap 5. If you want to go deep into the tutorial so you can watch the full video which is I like below Hope it will help you all thank you for visiting.

 

In this tutorial, you will learn Bootstrap Tutorial In Hindi, Bootstrap 5 Typography Classes. Bootstrap 5 Tutorial In Hindi You can learn what is bootstrap framework, what are the advantages of the bootstrap tutorial in Hindi. Make sure to Subscribe, Share the video, and Like it, for more tutorials in Hindi like this one!

 

Typography

Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.

 

Global settings

Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.

  • Use a native font stack that selects the best font-family for each OS and device.
  • For a more inclusive and accessible type scale, we use the browser’s default root font-size (typically 16px) so visitors can customize their browser defaults as needed.
  • Use the $font-family-base$font-size-base, and $line-height-base attributes as our typographic base applied to the <body>.
  • Set the global link color via $link-color.
  • Use $body-bg to set a background-color on the <body> (#fff by default).

These styles can be found within _reboot.scss, and the global variables are defined in _variables.scss. Make sure to set $font-size-base in rem.

Play Video

Headings

All HTML headings, <h1> through <h6>, are available.

<h1></h1>h1. Bootstrap heading
<h2></h2>h2. Bootstrap heading
<h3></h3>h3. Bootstrap heading
<h4></h4>h4. Bootstrap heading
<h5></h5>h5. Bootstrap heading
<h6></h6>

h6. Bootstrap heading

 

<h1></h1>h1. Bootstrap heading
<h2></h2>h2. Bootstrap heading
<h3></h3>h3. Bootstrap heading
<h4></h4>h4. Bootstrap heading
<h5></h5>h5. Bootstrap heading
<h6></h6>h6. Bootstrap heading

Display headings

Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a display heading—a larger, slightly more

 

Abbreviations

Stylized implementation of HTML’s <abbr> element for abbreviations and acronyms to show the expanded version on hover. Abbreviations have a default underline and gain a help cursor to provide additional context on hover and to users of assistive technologies.

Add .initialism to an abbreviation for a slightly smaller font-size.

 

Description list alignment

Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a .text-truncate class to truncate the text with an ellipsis.

opinionated heading style.

 

Responsive font sizes

In Bootstrap 5, we’ve enabled responsive font sizes by default, allowing text to scale more naturally across device and viewport sizes. Have a look at the RFS page to find out how this works.

Leave a Reply

Your email address will not be published.