Bootstrap Code

In bootstrap, we can use a different type of HTML elements such as <code>, <kbd>, <pre>, <var>, etc. to change the style of inline and multiline code blocks depending on the way which you want to represent the code blocks.

Bootstrap Inline Code (<code>) Tag

In bootstrap, we can use <code> element to wrap the inline snippets of code like as shown below.

 

Live Preview

<div class="container">

    <p>Hi, Welcome to <code>Tutlane.com</code></p>

    <p>One <code>stop</code> solution for all <code>learning</code> needs.</p>

</div>

If you observe the above code, we wrapped inline snippets of code with <code> element based on our requirements.

 

The above example will return the result like as shown below.

 

Bootstrap inline code block example result

 

While using <code> element to wrap inline snippets code, you need to make sure to escape HTML angle brackets like as shown below.

 

<div class="container">

    <p>Hi, Welcome to <code>Tutlane.com</code></p>

    <p>You can use <code>&lt;meta&gt;</code> tag for SEO purposes.</p>

</div>

The above code will return the result like as shown below.

 

Bootstrap Inline Code Snippet Escape HTML Example Result

Bootstrap Code Block (<pre>) Tag

To wrap multiple lines of code use <pre> element in bootstrap. To render code block properly you need to make sure to escape HTML angle brackets same like <code> element.

 

Live Preview

<div class="container">

  <pre>

    Hi,

    Welcome to Tutlane.com

    This is example code block.</p>

  </pre>

</div>

If you observe the above example, we wrapped multiple lines of code using <pre> element.

 

The above example will return the result like as shown below.

 

Bootstrap multiple lines code blocks example result

 

This is how we can use <pre> element to wrap multiple lines of code in bootstrap.

Bootstrap User Input (<kbd>) Tag

In bootstrap, use <kbd> element to indicate input that is typically entered via keyboard like as shown below.

 

Live Preview

<div class="container">

To open the task manager on Windows, press <kbd>Ctr</kbd> + <kbd>Alt</kbd> + <kbd>Del</kbd>.

</div>

If you observe the above code, we used <kbd> element to indicate input that is typically entered from keyboard.

 

The above example will return the result like as shown below.

 

Bootstrap user input blocks example result

Bootstrap Variables (<var>) Tag

In bootstrap, to indicate the variables in your code use <var> tag. The <var> tag will render the content in italic font.

 

Live Preview

<div class="container">

   <var>x</var> + <var>y</var> + <var>z</var> = 20

</div>

The above example will return the result like as shown below.

 

x + y + z = 20

Bootstrap Sample (<samp>) Output

In bootstrap, to indicate the sample output from a program use <samp> tag like as shown below.

 

<div class="container">

<samp>This is a simple sample text with Bootstrap!</samp>

</div>

The above example will return the result like as shown below.

 

This is a simple sample text with Bootstrap!

This is how we can use different tag elements to show inline or multiline blocks of code in bootstrap. 

 

PREVIOUS

Bootstrap Lists
 
 

Topics Covered