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 < and > respectively.
Below is an example displaying inline code using <code> tags in Bootstrap:
<!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><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> <!-- 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 --> <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> |
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> <!-- 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:
Representing Variables: Variables could be indicated using the <var> tag.
<!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:
User Input: User input could be styled using the <kbd> tags as shown in the below program.
<!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:
Please Login to comment...