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


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 :


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 :


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 : 


For styling variables use <var> tag

var <var>fullName</var> = <var>firstName</var> + <var>lastName</var>;

Output : 


For styling sample output use <samp> tag

<h4>Output</h4>

<samp>Hello world!</samp>

Output : 


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 :