Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap code blocks

Suggested Video Tutorials
Part 10 - Bootstrap paragraphs
Part 11 - Bootstrap blockquotes and lists
Part 12 - Bootstrap list groups

In this video we will discuss styling code blocks using bootstrap.

Bootstrap tags for styling code blocks
bootstrap code block example

Note : Angle brackets must be escaped for proper rendering

For styling inline snippets of code use <code> tag
<p>To highlight text use <code>&lt;mark&gt;</code> tag </p>
<p>To underline text use <code>&lt;u&gt;</code> tag </p>
<p>For bold text use <code>&lt;strong&gt;</code> tag </p>

Output :
bootstrap 3 code tag examples

For styling multiple lines of code use <pre> tag
<pre>&lt;strong&gt;Bold Text&lt;/strong&gt;
&lt;u&gt;Underlined Text&lt;/u&gt;
&lt;mark&gt;Highlighted Text&lt;/mark&gt;

Output :
bootstrap styling mutiple lines of code

To set a max-height of 350px and provide a y-axis scrollbar use .pre-scrollable class on <pre> tag
<pre class="pre-scrollable">public class Program
    public static void Main()
        Customer customer1 = new Customer()
            ID = 101,
            Name = "Mark",
            Salary = 5000
        Customer customer2 = new Customer()
            ID = 102,
            Name = "Pam",
            Salary = 7000
        Customer customer3 = new Customer()
            ID = 104,
            Name = "Rob",
            Salary = 5500
        Customer[] arrayCustomers = new Customer[2];
        arrayCustomers[0] = customer1;
        arrayCustomers[1] = customer2;
        List<customer> listCustomers = new List<customer>(2);
        Customer cust = listCustomers[0];
        Console.WriteLine("ID = {0}, Name = {1}, Salary = {2}",
                           cust.ID, cust.Name, cust.Salary);
        for (int i = 0; i < listCustomers.Count; i++)
            Customer customer = listCustomers[i];
            Console.WriteLine("ID = {0}, Name = {1}, Salary = {2}",
                     customer.ID, customer.Name, customer.Salary);
        foreach (Customer c in listCustomers)
            Console.WriteLine("ID = {0}, Name = {1}, Salary = {2}",
                                c.ID, c.Name, c.Salary);
        listCustomers.Insert(1, customer3);
        Console.WriteLine("ID = {0}, Name = {1}, Salary = {2}",
               listCustomers[1].ID, listCustomers[1].Name,
        Console.WriteLine("Index of Customer3 object in the List = "
                           + listCustomers.IndexOf(customer3));

Output : 
bootstrap code block scrollable

For styling variables use <var> tag
var <var>fullName</var> = <var>firstName</var> + <var>lastName</var>;

Output : 
bootstrap styling variables

For styling sample output use <samp> tag
<samp>Hello world!</samp>

Output : 
bootstrap samp tag example

For styling keyboard input use <kbd> tag
<h4>Visual Studio</h4>
    Keyboard shorcut for commenting code
    <kbd>CTRL</kbd> <kbd>K</kbd> and <kbd>CTRL</kbd> <kbd>C</kbd>
    Keyboard shorcut for uncommenting code
    <kbd>CTRL</kbd> <kbd>K</kbd> and <kbd>CTRL</kbd> <kbd>U</kbd>

Output : 
bootstrap keyboard input styles

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.