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:
<!DOCTYPE html>
<html>
<head>
<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>
|
Output:
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:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Playground</title>
</head>
<body>
<div class="container">
<h3>Code Blocks</h3>
<pre>
<code>
<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>
</code>
</pre>
<h3>Code blocks using .pre-scrollable class</h3>
<pre class="pre-scrollable">
<code>
<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>
</code>
</pre>
</div>
</body>
</html>
|
Output:
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.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Playground!</title>
</head>
<body>
<div class="container">
<h3>Sample Output</h3>
<samp>
The sample output text is displayed
in a fixed-width font.
</samp>
</div>
</body>
</html>
|
Output:
Representing Variables: Variables could be indicated using the <var> tag.
<!DOCTYPE html>
<html>
<head>
<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:
User Input: User input could be styled using the <kbd> tags as shown in the below program.
<!DOCTYPE html>
<html>
<head>
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<h3>User input</h3>
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:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...