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 < and > 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= 
"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> 
</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> 