---

Search posts under Bootstrap:

---

Typography in Bootstrap

How to use Bootstrap Typography?

Bootstrap Typography

Using typography feature of Bootstrap you can create headings, paragraphs, lists and other inline elements. Let see learn each one of these in the following sections.

Headings:

HTML headings are used in the bootstrap. <h1> to <h6>.

<h1>dotnetfunda</h1>
<h2>techfunda</h2>
<h3>itfunda</h3>
<h4>kidsfunda</h4>
<h5>farmingfunda</h5>
<h6>fundoovideo</h6>
 

In the above code snippet we have defined the headings tag as<h1>, <h2>, <h3>, <h4>, <h5>, <h6> which are used to display the headings.   

output

<Small>:

<Small> is used to create small text along with the heading.

<div class="container">
    <h1>h1 heading <small>small text</small></h1>
    <h2>h2 heading <small>small text</small></h2>
    <h3>h3 heading <small>small text</small></h3>
    <h4>h4 heading <small>small text</small></h4>
    <h5>h5 heading <small>small text</small></h5>
    <h6>h6 heading <small>small text</small></h6>
</div>

Small

In the above code snippet we had defined how to make a large text to small text. We need <small> tag to make the text larger to small text.

output

<Mark>:

<Mark> element is used to highlight the text

<div class="container">
    <h3>Mark is used to highlight the text</h3>
<p>mark is used to <mark>highlight text</mark></p>
</div>

Mark

In the above code snippet we have used an element <mark> which is used to highlight the text, We have taken <h3> as heading and <p> to write the paragraph and we used the <mark> element in the tag <p> to highlight the text.

output

<Abbr>:

The <Abbr> element provides markup for abbreviations or acronyms, like WWW

<div class="container">
        <h1>Abbreviations</h1>
        <p>The abbr element is used to mark up an abbreviation or acronym:</p>
        <p><abbr title="World Wide Web">WWW</abbr></p>
    </div>

 ABBR

In the above code snippet we have defined how to use abbreviation. We have taken div class as container and <h1> as heading of abbreviations and <p> element as paragragh and we have <abbr> element as title =world wide web  as www.

output

Lead:

div class= "Lead" is used to display the font size larger.

<div class="lead">
        <h2>Dotnetfunda</h2>
       <p> dotnetfunda and techfunda
        are the online tutorials to learn .Net by step by step process</p>
    </div>

Lead

 In the above code snippet we have taken div class as lead which is used to make the fonrt sixe larger and <h2> as dotnetfunda and  we have <p> as paragraph in the div section.

output

<Emphasis>:

Emphasis uses some of the elements such as <strong>, <em>, <small>.

 <div>
        <em>dotnetfunda is a online tutorials for learning.Net </em><br />
        <strong>Techfunda is a online tutorials for learning .Net step by step</strong></br>
        <small>Itfunda is a online tutorials for providing ebooks for the starters</small>
    </div>

Emphasis

In the above code snippet we have defined the elements  as <small>, <strong>, <em> to display the texts. The <em> defines the texts in italic and <small> defines the text in small font and <strong> defines the text in bold.

output

<Blockquote>:

<blockquote> is a section which is from another source.

<blockquote>
       dotnetfunda is a online tutorials for learning .Net and techfunda is a online tutorial for learning .NET by step by step process. Itfunda is a online tutorial for providing ebooks for starters, kidsfunda is a website for kids to learn and entertain them 
    </blockquote>

Blockquote

In the above code snippet we have defined blockquote. The <blockquote> is used as section from another source.

output

 <dl>

<dl> describes the description lists and it supports a global attributes in bootstrap.

<dl>
        <dt>Microsft</dt>
        <dd>-SathyaNadella</dd>
        <dt>Google</dt>
        <dd>-SundarPichai</dd>
        <dt>DotNetFunda</dt>
        <dd>-SheoNarayan</dd>
    </dl>

dl

In the above code snippet we have defined <dl> as description list and we have <dt> and <dd>. we have defined in <dt>as company name and in <dd> we are having the ceo names.

output

<code>

Code is used to display the text in code format.

<p>dotnetfunda</p>
    <code>(a+b);</code></br>
    <p>techfunda</p>
    <code>(a-b);</code>

code

In the above code snippet we have defined the <code> it is used to display the text in the format. We have taken <p> as dotnetfunda and we have taken <code> as(a+b); It displays the text in code format  

output

<kbd>

It is used to indicate that the text is directly printed from keyboard.

 <p>use <kbd>ctrl+c </kbd>to copy the content from one souce to other</p>

 kbd

In the above code snippet ewhave defined how to use kbd. We have taken <p> as use ctrl+c to copy from one source to another in <p> tag. we have given <kbd> tag to ctrl+c which displays the text in the form of keyboard format.

OUTPUT

 <Pre>

pre element is used to display the code in multiple lines.

 <pre>
 dotnetfunda is a online tutorials for learning .Net
 and techfunda is a online tutorial for learning .NET by step by step process.
 Itfunda is a online tutorial for providing ebooks for starters,
 kidsfunda is a website for kids to learn and entertain them 
</pre>

 pre

In the above code snippet we have defined how to use <pre> element. It is used to display the code in multiple line.

output

Contextual colors

Contextual colors provide menaings throuh the colors

<div>
        <p class="text-success">dotnetfunda is an online tutorial</p>
        <p class="text-primary">dotnetfunda is an online tutorial</p>
        <p class="text-danger">dotnetfunda is an online tutorial</p>
        <p class="text-info">dotnetfunda is an online tutorial</p>
        <p class="text-warning">dotnetfunda is an online tutorial</p>
        <p class="text-danger">dotnetfunda is an online tutorial</p>
    </div>

Contextual colors

In the above code snippet we  have defined the contextual colors as providing class as text-success, different elements provide their own colors according to their names.

output

Contextual background colors:

Contextual background colors adds the color to the back ground by using the elements as <bg-success>

<div>
        <p class="bg-success">dotnetfunda is an online tutorial</p>
        <p class="bg-primary">dotnetfunda is an online tutorial</p>
        <p class="bg-danger">dotnetfunda is an online tutorial</p>
        <p class="bg-info">dotnetfunda is an online tutorial</p>
        <p class="bg-warning">dotnetfunda is an online tutorial</p>
        <p class="bg-danger">dotnetfunda is an online tutorial</p>
    </div>

 Contextual bakground colors

In the above code snippet we have tag <p>. WE are prociding the class to p as bg-primary, bg-success etc to background color to the text.

output

Text-alignment :

These elements are used to allign the text in the center , middle and right side of the page.

<div>
        <p class="text-left">dotnetfunda is an online tutorial</p>
        <p class="text-center">dotnetfunda is an online tutorial</p>
        <p class="text-right">dotnetfunda is an online tutorial</p>
        
    </div>

Text-alignment

 In the above code snippet ew have assigned thete text to left, center and right by using text-left, text-right, text-center assigning to the <p> tag to the class.

output

dl-horizontal

It is used to display the texty in the horizontal form.

<div>
        <dl class="dl-horizontal">
            <dt>DotNetFunda</dt>
            <dd>-SheoNarayan</dd>
            <dt>TechFunda</dt>
            <dd>-SheoNarayn</dd>
        </dl>
    </div>

Dl-horizontal

In the above code snippet we have taken <div> section in that div section we have <dl> as class=dl-horizontal  and we have taken <dt> as DotNetFunda and <dd> as SheoNarayan. In the nextline we are taking <dt> as TechFunda and we are giving the <dd> as SheoNarayan.

output

List-unstyled

List-unstyled removes the list style.

<ul class="list-unstyled">
        <li>Coffee</li>
        <li>
            Tea
            <ul>
                <li>Black tea</li>
                <li>Green tea</li>
            </ul>
        </li>
        <li>Milk</li>
    </ul>

 List-unstyled

In the above code snippet we have defined the list unstyled. WE have taken ul  as class  as list-unstyled  and we are taking <li> as coffee and tea. we are giving the <ul> in tea as <li>blacktea and <li>greentea. and milk.

output

List-inline

List-inline is used to display the list in the line 

<ul class="list-inline">
        <li>DotNetFunda</li>
        <li>TechFunda</li>
        <li>Milk</li>
    </ul>
</pre>

List-Inline

In the above code snippet we had defined the list-inline. We have taken class as Listinline and  wehave <li> elements as Dotnetfunda, techfunda and milk and it prints the output values as inline

output

 prescrollable

prescrollable is used to scroll the bar down 

<pre class="pre-scrollable"> dotnetfunda is a online tutorials for learning .Net 
and techfunda is a online tutorial for learning .NET by step by step process.
 Itfunda is a online tutorial for providing ebooks for starters, 
kidsfunda is a website for kids to learn and entertain them  dotnetfunda is a online tutorials for learning .Net 
and techfunda is a online tutorial for learning .NET by step by step process.
 Itfunda is a online tutorial for providing ebooks for starters,
 kidsfunda is a website for kids to learn and entertain them dotnetfunda is a online tutorials for learning
 .Net and techfunda is a online tutorial for learning .NET by step by step process.
 Itfunda is a online tutorial for providing ebooks for starters, 
kidsfunda is a website for kids to learn and entertain them  </pre>

Prescrollable

In the above code snippet we have taken elements as prescrollable which is used to scroll the text in the preformat. wehave taken class as prescrollable and the scroll bar comes in the output.

output

<del>

Delete element is used strike out the text

    <p>dotnetfunda is online <del>tutorial</del></p>

Delete

In the above code we have taken <p> tag to define the delete element we have given <del> tag in the <p> tag it strikes off the text.

output

<u>

The element <u> is used to enderline the text.

 <p>dotnetfunda is online <u>tutorial</u></p>

Underline

In the above code snippet we have defined the<u> as underline. which is used to underline the text.

output