Support us .Net Basics C# SQL ASP.NET Aarvi MVC Slides C# Programs Subscribe Download

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;
</pre>

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);
        listCustomers.Add(customer1);
        listCustomers.Add(customer2);
        listCustomers.Add(customer3);
        Customer cust = listCustomers[0];
        Console.WriteLine("ID = {0}, Name = {1}, Salary = {2}",
                           cust.ID, cust.Name, cust.Salary);
        Console.WriteLine("--------------------------------");
       
        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);
        }
        Console.WriteLine("--------------------------------");
       
        foreach (Customer c in listCustomers)
        {
            Console.WriteLine("ID = {0}, Name = {1}, Salary = {2}",
                                c.ID, c.Name, c.Salary);
        }
        Console.WriteLine("--------------------------------");
       
        listCustomers.Insert(1, customer3);
        Console.WriteLine("ID = {0}, Name = {1}, Salary = {2}",
               listCustomers[1].ID, listCustomers[1].Name,
               listCustomers[1].Salary);
        Console.WriteLine("--------------------------------");
       
        Console.WriteLine("Index of Customer3 object in the List = "
                           + listCustomers.IndexOf(customer3));
        Console.WriteLine("--------------------------------");
    }
}</pre>

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
<h4>Output</h4>
<samp>Hello world!</samp>

Output : 
bootstrap samp tag example

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

Output : 
bootstrap keyboard input styles

bootstrap tutorial for beginners

1 comment:

It would be great if you can help share these free resources