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

#EF : DbEntityValidationException - How can I easily tell what caused the error?

While calling  SaveChanges  on my  DbContext , I get the following exception: System.Data.Entity.Validation.DbEntityValidationException: Validation failed for one or more entities. See 'EntityValidationErrors' property for more details. This is all fine and dandy, but I don't want to attach a debugger every time this exception occurs. More over, in production environments I cannot easily attach a debugger so I have to go to great lengths to reproduce these errors. How can I see the details hidden within the  DbEntityValidationException ? Answer :  The easiest solution is to override SaveChanges on your entities class. You can catch the DbEntityValidationException, unwrap the actual errors and create a new DbEntityValidationException with the improved message. Create a partial class next to your SomethingSomething.Context.cs file. Use the code at the bottom of this post. That's it. Your implementation will automatically use the overriden Save...
Post a 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