Displaying inline and multiline blocks of code using Bootstrap

Bootstrap provides a number of classes for displaying inline and multiline blocks of code.

Displaying Inline 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.

Below is an example displaying inline code using <code> tags in Bootstrap:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <!-- Include Bootstrap CSS -->
      
    <title>Displaying Inline Code</title>
</head>
<body>
    <div class="container">
        <h3>Inline Code</h3>
        <p>
            We define paragraphs in HTML using the 
            <code><p></code> tag.
        </p>
    </div>
</body>
</html>                    

chevron_right


Output:
Inline Code

Displaying Multiline Code Blocks: 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.



The .pre-scrollable class can be optionally added which sets the max height of the element to be 350px and adds a vertical scrollbar.

Below is an example displaying block of code:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
      
    <title>Bootstrap Playground</title>
</head>
  
<body>
    <div class="container">
  
    <h3>Code Blocks</h3>
    <!-- This block is not scrollable -->
    <pre>
        <code>
            <!-- Lines of code starts -->
            <h1>Title One</h1>
            <p>A line of sample text</p>
            <p>Another line of sample text</p>
            <p>Yet another line of sample text</p>
            <!-- Lines of code ends -->
        </code>
    </pre>
  
    <h3>Code blocks using .pre-scrollable class</h3>
      
    <!-- This block is vertically scrollable -->
    <pre class="pre-scrollable">
        <code>
            <!-- Lines of Code Starts -->
            <h1>Title One</h1>
            <p>A line of sample text</p>
            <p>Another line of sample text</p>
            <p>Yet another line of sample text</p>
            <!-- Lines of code ends -->
        </code>
    </pre>
    </div>
</body>
</html>                    

chevron_right


Output:
Code Blocks

Indicating Sample Output: If it is needed to display output of any compiled program, in that case to indicate the output of a program, one can wrap the output using <samp> tags.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
      
    <title>Bootstrap Playground!</title>
</head>
<body>
    <div class="container">
        <h3>Sample Output</h3>
          
        <!-- Below is a sample output text displayed 
            using the samp tags -->
        <samp>
            The sample output text is displayed 
            in a fixed-width font.
        </samp>
    </div>
</body>
</html>                    

chevron_right


Output:
Sample Output

Representing Variables: Variables could be indicated using the <var> tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <!-- ADD Bootstrap CSS -->
      
    <title>Bootstrap Playground</title>
</head>
  
<body>
    <div class="container">
        <h3>Variables</h3>
        <var>y</var> = <var>m</var><var>x</var
                        + <var>c</var>
    </div>
</body>
</html>                    

chevron_right


Output:
Variables

User Input: User input could be styled using the <kbd> tags as shown in the below program.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <!-- ADD Bootstrap CSS -->
      
    <title>Hello, world!</title>
</head>
  
<body>
    <div class="container">
        <h3>User input</h3>
          
        <!-- In the below tags kbd tags is used to 
              highlight inputs -->
        Type <kbd>ls</kbd> to list all files in the 
        current directory. <br>
        To copy files, select the files and 
        press <kbd><kbd>ctrl</kbd> + <kbd>c</kbd></kbd><br>
        To paste files, select the files and 
        press <kbd><kbd>ctrl</kbd> + <kbd>v</kbd></kbd><br>
    </div>
</body>
</html>                    

chevron_right


Output:
User Input



My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.