Bootstrap code:

Bootstrap framework allows you to display code using two different tags:

1. Using pre tag

If the code needs to be displayed as a standalone block element or if it has multiple lines, then you should use the <pre> tag.

2. Using code tag

 If you are going to be displaying code inline, you should use the <code> tag.

Example:

With below example I want to display C# LINQ source code using bootstrap source and pre tag

<p>with &lt;pre&gt; tag code as: 
       
<pre> var UserDetails = (from userData in DbContext.User where userData.ManagerId == 3
                                select userData).ToList();          
       
</pre>
       
<p>using code tag.</p>
       
 <code>
      var UserDetails = (from userData in DbContext.User
                         where userData.ManagerId == 3
                         select userData).ToList();         
  </code>

Output is:

In classic application you can create alert message by applying CSS. For successful message we apply green font color, for warning yellow color, error message we apply red color.

What if there is framework that have inbuilt feature that provide a way to style messages to the user?

Answer: Bootstrap framework provide a way to style messages to the user called Bootstrap alerts.
You can add an optional close icon to alert. For inline dismissal use the Alerts jQuery plugin. You can add a basic alert by creating a wrapper <div> and adding a class of .alert and one of the four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).

Example:

  <!--below are some alert messages created for leave application using bootstrap framework-->
    <div class="alert alert-success">Success! Well Leave application submitted.</div>
    <div class="alert alert-info">Info! Leave application processed to manager for approval.</div>
    <div class="alert alert-warning">Warning ,For you only 1 leave available in this quarter.</div>
    <div class="alert alert-danger">Error ! , require to select leave type.</div>

Link Alerts:

     To create link alerts use following steps:
1.      Add alert by creating basic wrapper <div>, then add class alert and use one of four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).
2.      Use the .alert-link utility class to quickly provide matching colored links within any alert.

Example:

<!--link alert messages created for leave application using bbotstrap framework-->
    <div class="alert alert-success">
<a href="#" class="alert-link">Success! Well Leave application submitted.</a> </div>
    <div class="alert alert-info">
 <a href="#" class="alert-link">Info! Leave application processed for approvel.</a> </div>
    <div class="alert alert-warning">
<a href="#" class="alert-link">Warning ! Dont submit this,onle one leave remaning.</a> </div>
    <div class="alert alert-danger">
 <a href="#" class="alert-link">Error ! ,require to select leave type.</a> </div>

Dismissal Alerts:

1.  Add alert by creating basic wrapper <div>, then add class alert and use one of four contextual classes (e.g., .alert-success, .alert-info, .alert-warning, .alert-danger).
2.  Also add optional .alert-dismissable to the above <div> class.
3.  Add a close button.

Example:

<div class="alert alert-danger alert-dismissable"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true"> &times; </button>Error ! ,require to select
leave type.</div>

In this article I will explain bootstrap feature Jumbotron, like name this component can optionally increases the size of headings and add a lot of margin and create big box around text for extra attention.

Points to remember:

1.  Jumbotron is displayed as gray text box, gray text box created around text with rounded corners.
2.   Inside a jumbotron you can put nearly any valid HTML, including other Bootstrap elements/classes.
3.  To get a jumbotron full width, and without rounded corners use the .jumbotron class outside all

Example:

  <div class="page-header">
      <h1>Leave Summery</h1>
         <h3> example with simple header</h3>
    </div>
    
 <div class="jumbotron">
         <h1>Leave Summery</h1>
        <h3> example with jambtron</h3>
    </div>

Jumbotron Example with full width, and without rounded corners:

<div class="jumbotron">
 <div class="container"> <h1>Leave Summery!</h1> <p>This is an example for jumbotron.
 </p> <p><a class="btn btn-primary btn-lg" role="button"> Learn more</a> </p> </div>
  </div>

Output: