Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to display code with Bootstrap ?

  • Last Updated : 12 Aug, 2021

To display the code in our webpage, bootstrap has some tags that can be used to display the code.

Method 1: Inline code using <code> tag to display the code inline. The <code> tag wraps an inline snippet of code. Inline code should be wrapped in <code> tags. The resulting text will be displayed in a fixed-width font and given a red font color.
Note: The < and > tags should be replaced with &lt; and &gt; respectively.

Syntax:

<code>
    <!--inline code goes here-->
</code>

Method 2: Code block using <pre> tag to display the code as a standalone block element. This tag is also used when we want to display multiple lines of code. Multiline code should be wrapped in <pre> tags. The resulting text will be displayed in a fixed-width font with spaces and line breaks being preserved.

 



Syntax:

<pre>
    <!-- code block goes here -->
</pre>

Step By Step Guide to display Code with Bootstrap:

Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>

Step 2: Add <code> tag to display inline code and <pre> tag to display code block.

<code>&lt;html&gt;&lt;/html&gt;</code> are 
wrapped as an inline elements.
      
<pre>
    &lt;head&gt;
        &lt;title&gt;
            GeeksforGeeks Bootstrap Code Example
        &lt;/title&gt;
    &lt;/head&gt;
</pre> 

Example:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Bootstrap Code Block Example</title>
  
    <!--Include latest bootstrap, CSS, jQuery CDN-->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
  
    <p>
        <!-- Include <code> tag for inline code -->
        <code><html></html></code> is 
        wrapped as an inline element.
    </p>
  
  
    <p>
        To display code as standalone block 
        element we use <pre> tag as:
  
        <!-- Include <pre> tag for multiple 
            lines of code -->
        <pre>
            <head>
                <title>
                    GeeksforGeeks Bootstrap Code Example
                </title>
            </head>
        </pre>
    </p>
</body>
  
</html>

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!