Bootstrap typography is used for to manage the content text of the webpage. Bootstrap uses 14 pixel font size with line-height 1.4 with default font family Helvetica Neue, Helvetica, Arial, and sans-serif.
Typography is used to create headings, paragraphs, lists and other text related elements. Below is a short description about it -
Headings
All HTML headings h1 to h6 are same styled and different font size
<h1>Heading1 h1 and font size 36px</h1>
<h2>Heading1 h2 and font size 30px</h2>
<h3>Heading1 h3 and font size 24px</h3>
<h4>Heading1 h4 and font size 18px</h4>
<h5>Heading1 h5 and font size 14px</h5>
<h6>Heading1 h6 and font size 12px</h6>
Inline Subheadings
This is used to add a subheading text in heading tag. For it you just need to add <small> tag which will be placed in heading tag and you will get small and lighter text (small text will be rendered 85%).
You can add .small class also.
<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1>
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>
Lead Body
If you want to add emphasis to a paragraph, then the lead class will work for you, this will give you a large font size and font weight.
<p class = "lead">This is an example paragraph demonstrating the use of lead body copy.</p>
Emphasis
Bootstrap offers HTML's default emphasis tags with their style and it also offers you some class to manage it
<p class = "text-right">For right aligned text.</p>
<p class = "text-center">For center aligned text.</p>
<p class = "text-left">For left aligned text.</p>
<p class = "text-muted">For to make content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>
Note - Try is on your end for better understanding
Marker
This is used for to make highlighted text, in your all content text you need to add <mark> element as the following way:
<p> Mark element to <mark>highlight</mark> text.</p>
AddressesUsing <address> tag you can display the contact information on your web page.
You’ll need to use display: block; property to show <address> as a default.
Tags to add line breaks to the enclosed address text.
<address>
<strong>Some Company, Inc.</strong><br>
007 street<br>
Some City, State XXXXX<br>
<abbr title = "Phone">P:</abbr> +91 9876543210
</address>
Blockquotes
Blockquote is used in bootstrap same as usually we used it in HTML. Bootstrap have some style format and adding a <small> tag for identifying the source of quote and add some other options.
<blockquote>
This is a blockquote with a source title.
<small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>
Lists
Bootstrap offers some type of lists -
Ordered List -
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
Un-ordered List -
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Unstyled List -
<ul class = "list-unstyled">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Inline List -
<ul class = "list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Definition List-
<dl>
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
Horizontal Definition List
<dl class = "dl-horizontal">
<dt>Description 1</dt>
<dd>Item 1</dd>
<dt>Description 2</dt>
<dd>Item 2</dd>
</dl>
0 Comment(s)