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-familyfor 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-baseattributes as our typographic base applied to the<body>. - Set the global link color via
$link-color. - Use
$body-bgto set abackground-coloron the<body>(#fffby 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.
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.
