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.
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> 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>
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> 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>
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
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>
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
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>
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 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>
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> 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>
In the above code snippet we have defined blockquote. The <blockquote> is used as section from another source.
output
<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>
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 is used to display the text in code format.
<p>dotnetfunda</p> <code>(a+b);</code></br> <p>techfunda</p> <code>(a-b);</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>
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 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>
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 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>
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 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>
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
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>
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
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>
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 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>
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 is used to display the list in the line
<ul class="list-inline"> <li>DotNetFunda</li> <li>TechFunda</li> <li>Milk</li> </ul> </pre>
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 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>
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
Delete element is used strike out the text
<p>dotnetfunda is online <del>tutorial</del></p>
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
The element <u> is used to enderline the text.
<p>dotnetfunda is online <u>tutorial</u></p>
In the above code snippet we have defined the<u> as underline. which is used to underline the text.
output
Views: 5486 | Post Order: 24