Displaying inline and multiline blocks of code using Bootstrap

Last Updated : 16 Jan, 2019

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 < and > respectively. Below is an example displaying inline code using <code> tags in Bootstrap:

html

<!DOCTYPE html>
<html>
<head>
    <!-- Include Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    
    <title>Displaying Inline Code</title>
</head>
<body>
    <div class="container">
        <h3>Inline Code</h3>
        <p>
            We define paragraphs in HTML using the 
            <code>&lt;p&gt;</code> tag.
        </p>
    </div>
</body>
</html>

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:

html

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.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 -->
            &lt;h1&gt;Title One&lt;/h1&gt;
            &lt;p&gt;A line of sample text&lt;/p&gt;
            &lt;p&gt;Another line of sample text&lt;/p&gt;
            &lt;p&gt;Yet another line of sample text&lt;/p&gt;
            <!-- 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 -->
            &lt;h1&gt;Title One&lt;/h1&gt;
            &lt;p&gt;A line of sample text&lt;/p&gt;
            &lt;p&gt;Another line of sample text&lt;/p&gt;
            &lt;p&gt;Yet another line of sample text&lt;/p&gt;
            <!-- Lines of code ends -->
        </code>
    </pre>
    </div>
</body>
</html>

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.

html

<!DOCTYPE html>
<html>
<head>
    <!-- Add Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.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>

Output: Sample Output

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

html

<!DOCTYPE html>
<html>
<head>
    <!-- ADD Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.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>

Output: Variables

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

html

<!DOCTYPE html>
<html>
<head>
    <!-- ADD Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.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>

Output: User Input

BootStrap | Positioning an element with Examples

sayantanm19

Improve

Article Tags :

Displaying inline and multiline blocks of code using Bootstrap

Similar Reads

Thank You!

What kind of Experience do you want to share?