Bootstrap 4 Codes

In this tutorial, learn how to display inline codes, multiline codes, variables, keyboard inputs, and sample output using Bootstrap 4 classes.

Bootstrap 4 Inline Codes

Inline codes are the code snippet that you place inline with the text content. To wrap inline code snippets, you can use <code> element that contains the Bootstrap 4 predefined CSS to display codes as given below:

Output

The <menu> tag is for menus and <header> is for headers in HTML.

The above example wraps the two inline codes and displays them within the text content.

Bootstrap 4 Multiline Code Blocks

The multi-lines of codes can display using the combination of the <pre> and <code> elements. Also, converts the angle brackets to the symbols to properly render the elements as given below:

Output

<h2>This is a heading.</h2>
<p>This is a paragraph</p>

The above example shows the codes without executing them in the output.

Writing Variables

To write variables, you can use the <var> tag for each variable symbols as given below:

Output

The first equation of motion is:
v = u + at

User Inputs From Keyboard

The user inputs from the keyboard can be displayed using the <kbd> tag. The converted text indicates the keyboard inputs that can be any buttons of the keyboard as given below:

Output

Saving word docs requires ctrl + s keyboard shortcut.

The above example shows the keyboard shortcut to save the word document. You can check the keyboard input highlight in the above output.

Display Sample Output of a Program

The sample output is the result of the computer program executed. It can be displayed using the <samp> tag as given in the example below:

Output

This is a sample output generated from a computer program.

The output in the above example shows the result of a computer program. You can create the same text to display your sample text in the output