Bootstrap Typography Examples
Bootstrap Typography includes following below mentioned elements that will aid you while you are implementing web layout of different specific structure.
I. Bootstrap Headings Stylesh1 to h6
All heading HTML tags are available from h1 to h6 with default size declining from 36px to 12 px with difference of 6px between every tag. Bootstrap gives them default font-size with Semi-bold font weight.
<div class="container"> <h1>H1 Heading Style in Bootstrap </h1> <h2>H2 Heading Style in Bootstrap </h2> <h3>H3 Heading Style in Bootstrap </h3> <h4>H4 Heading Style in Bootstrap <small>Secondary Heading</small></h4> <h5>H5 Heading Style in Bootstrap <small>Secondary Heading</small></h5> <h6>H6 Heading Style in Bootstrap <small>Secondary Heading</small></h6> </div>
II. Bootstrap Body Example
Bootstrap 3 body class has default size of 14px with line height value at 1.428 within paragraphs as well. <p> tag also has default of bottom margin with 10px by default. .lead class is also available for standout heading from Paragraph.
<div class="container"> <p class="lead">Tutorialmines<p> Here we are learning the basics of Bootstrap 3 version with typrography examples. Find more about questions, solutions, fixes and quizs only on tutorialmines now! </p> </div>
III. Bootstrap Inline Text Elements
There are many inline elements used in Bootstrap 3
- Marked text (<mark>): This tag is used within sentences for highlighting a special word.
- Deleted text (<del>): This tag specifies the deleted portion of the sentence.
- Strikethrough text (<s>): Strikes the content for their unused behaviour.
- Inserted text (<ins>): used for adding extra content to the paragraph.
- Underlined text (<u>): This tag adds underline to the focused word or sentence.
- Small text (<small>): Small tag reduces the font size respect ratio to their parent size.
- Bold (<strong>): This tag adds bold characteristics to the specific word or Sentence
- italics (<em>): This tag imparts inclined characteristic to the word or sentence respectively
<div class="container">
<ul>
<li>Mark tag is used for <mark>highligting</mark> a word in the sentence.</li>
<li><del> <del> tag is used to represent the line which needs to be removed.</del></li>
<li><s>With strikethorugh you can strike them for their unused behaviour</s></li>
<li><ins><ins> text is used to give higher stauts to the given sentence</ins></li>
<li><u>Give underline with <u> tag to the special words or sentences</u></li>
<li><small>Small tag is added for extra info or sceondary information related to main headings</small></li>
<li>Make your <strong>words</strong> or <strong>sentences bold</strong> with <strong> tag now!</li>
<li>italics<em> is added to make text inclined like <em>French Revolution</em></li>
</ul>
</div>IV. Bootstrap Alignment Classes
Bootstrap has default three classes for text alignment i.e. text-left (left), text-center (center), text-right (right). With .text-justify property there to provide uniform spacings between the characters
<div class="container"> <p class="text-left">This text starts from the left side.</p> <p class="text-center">This text will be shown in the center</p> <p class="text-right">This text will start from the right side of the window</p> </div>
V. Bootstrap 3 Transformation
There are basic transformation classes for specifically lowercase, uppercase and capitalize (which works on first character for every word with capitalize).
<div class="container"> <p class="text-lowercase">THIS all text will appear in lower case respectively</p> <p class="text-uppercase">All text within this specific class will become uppercase in the frontend</p> <p class="text-capitalize">This is the example for capitalize text being first letter capital for all</p> </div>
VI. Bootstrap 3 Abbreviations
Abbreviation are used for short form and on hover they depict the complete information about the abbr. It is done by title attribute placing them inside the tag only. .initialism is also added for bit smaller size from the rest of the line.
<div class="container"> <p>Please provide the solution to this problem <abbr title="As Soon As Possible"> ASAP</abbr></p> <p><abbr title="English Premier League" class="initialism"> EPL</abbr> and La Liga are two of the most popular football league in the world.</p> </div>
VII. Address Class in Bootstrap 3
Address tags are available to write them in respective order using <br> tag for making extra lines.
<div class="container"> <address> <strong>Internet World</strong><br> X Lany Y Street <br> Pandora 455454444<br> <abbr title="mobile number">P:</abbr> (123) 456-7890 </address> <address> <b>Name</b><br> <a href="mailto:#">example@example.com</a> </address> </div>
VIII. Bootstrap 3 Blockquotes Example
There are default CSS for <Blockquotes> tag in the bootstrap. You also can add them in reverse order by using class name .blockquote-reverse specifically and source is added by footer tag within the <Blockquotes> only
<div class="container">
<blockquote>
<p>Life takes its won turn when you want to be part of success</p>
<footer>Written by<cite title="Source Title">Anonymous</cite></footer>
</blockquote>
</div>IX. Bootstrap lists example
Bootstrap lists are ordered and unordered with multiple styles that can be given to them as per the design requirements. We will study Bootstrap lists in detail later with more suitable examples.
<div class="container">
<ul>
<li>Newspaper</li>
<li>Magzines</li>
<li>Book
<ul>
<li>PaperBack</li>
<li>E-book</li>
</ul> </li>
</ul>
</div>This is all about Bootstrap Typography with examples. Also checkout below a complete Bootstrap Typography List.
Bootstrap 3 Typography Classes
[table caption=”Bootstrap 3 Typography Classes List” width=”900″ colwidth=”100|700|100″ colalign=”Center|Center|Center”]
Class Name, Description
.lead, Add this to Make Paragraph Stand Out
.text-left,Indicates left-aligned text
.text-center,Indicates center-aligned text
.text-right,Indicates right-aligned text
.text-justify,Indicates justified text
.text-nowrap,Indicates no wrap text
.text-lowercase,Indicates lowercased text
.text-uppercase,Indicates uppercased text
.text-capitalize,Indicates capitalized text
.initialism, shows the text inside abbr element
.list-unstyled,Removes the default list-style and left margin on list items
.list-inline,Places all list items on a single line
.dl-horizontal, Lines up the terms dt and descriptions dd in dl elements side-by-side
.pre-scrollable, Makes a pre element scrollable
[/table]
Also Check out our Special Section
