Skip to main content

Bootstrap - 05

Bootstrap Typography

Working with Headings

You can define all HTML headings, <h1> through <h6> — In the same way you define in simple HTML document. You can also utilize the heading classes .h1 through .h6 on other elements, if you want to apply the style on element's text same as headings.Moreover you can use the <small> tag or <span> tag with .small class to display the secondary text of any heading in a smaller and lighter variation.
<h1>h1. Bootstrap heading <small>Secondary text</small></h1>

Working with Paragraphs

Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition to that a bottom margin of half their line-height(10px by default) is applied to the all paragraphs (<p>).You can also make a paragraph stand out by just adding the class .lead..
You are free to use text formatting tags
  • <p>This is how a normal paragraph looks like in Bootstrap.</p>
  • <p class="lead">This is how a paragraph stands out in Bootstrap.</p>

  • <p class="text-left">Left aligned text.</p>
  • <p class="text-center">Center aligned text.</p>
  • <p class="text-right">Right aligned text.</p>
  • <p class="text-justify">Justified text.</p>
  • <p class="text-nowrap">No wrap text.</p>


  • <p><b>This is bold text</b></p>
  • <p><big>This is big text</big></p>
  • <p><code>This is computer code</code></p>
  • <p><em>This is emphasized text</em></p>
  • <p><i>This is italic text</i></p>
  • <p><mark>This is highlighted text</mark></p>
  • <p><small>This is small text</small></p>
  • <p><strong>This is strongly emphasized text</strong></p>
  • <p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
  • <p><ins>This text is inserted to the document</ins></p>
  • <p><del>This text is deleted from the document</del></p>

  • <p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
  • <p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
  • <p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>

  • <p class="text-muted">Muted: This text is grayed out.</p>
  • <p class="text-primary">Important: Please read the instructions carefully before proceeding.</p>
  • <p class="text-success">Success: Your message has been sent successfully.</p>
  • <p class="text-info">Note: You must agree with the terms and conditions to complete the sign up process.</p>
  • <p class="text-warning">Warning: There was a problem with your network connection.</p>
  • <p class="text-danger">Error: An error has been occurred while submitting your data.</p>

  • <blockquote>
  •      <p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
  •      <small>by <cite>Albert Einstein</cite></small>
  • </blockquote>

  • <blockquote class="pull-right">
  •      <p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
  •      <small>by <cite>Albert Einstein</cite></small>
  • </blockquote>



Comments

Post a Comment

Popular posts from this blog

Use Log4Net in C# windows form Application

we are going to learn on how to use the Log4Net library for creating logs. Create a new windows form application in VS. Install Log4Net library Add to AssemblyInfo.cs  Configure in  App.config Use in code  Install Log4Net library Then install the Log4Net library from the Nuget Package library.           log4net by The Apache software foundation 2.0.8 (i installed the latest). Add to AssemblyInfo.cs  After installing this package, open up AssemblyInfo .cs file under the Properties folder and add the log4net assembly information into it (under the other assembly information.).    [assembly: log4net.Config.XmlConfigurator(Watch= true )]  Configure in  App.config Now, open the App.config file and enter required details for LogNet to work. <configSections>       <section name="log4net" type="log4net.Config.Log4NetConfigurationSectionHandler,log4net, Version=1.2....
1 comment
Read more

#MVC : Why does Html.Label() not work with periods? or Why is @Html.Label() removing some characters

You are misusing the  Html.Label  method. It is for: Returns an HTML label element and the  property name of the property  that is represented by the specified expression. That's why it gets confused if you have a point  .  in the first parameter because it expects a property expression there. However, you can use the second overload: @Html . Label ( "" , String . Format ( "{0}. someText" , 1 )) Or just write out the HTML: <label> @String . Format ( "{0}. someText" , 1 )</ label > or <label class="WelcomeText" style="float: left">Welcome @Html.Label("", Model.USERID + " ( " + Model.ROLE + " )", new { @class = "WelcomeText" })</label> 
Post a Comment
Read more

#SQL CTE(Common Table expressions)

SQL Server 2005 and on wards, a very powerful feather has been added for the programmers' benefit called CTE. CTE is again a temporary result set derived from the underling definition.  Common Table Expressions offer the same functionality as a view, but are ideal for one-off usages where you don't necessarily need a view defined for the system. CTE offers the advantages of improved readability and ease in maintenance of complex queries . The query can be divided into separate, simple, logical building blocks. These simple blocks can then be used to build more complex, interim CTEs until the final result set is generated. Common Table Expression Syntax A Common Table Expression contains three core parts: The CTE name (this is what follows the WITH keyword) The column list (optional) The query (appears within parentheses after the AS keyword) The query using the CTE must be the first query appearing after the CTE. Syntax : WITH expression_name [ ( column_n...
Post a Comment
Read more