MStoreComponents
Live previewDocsBuy now

Code

—  Displaying inline and multiline blocks of code. See Bootstrap documentation.

Inline code

Wrap inline snippets of code with <code>. Be sure to escape HTML angle brackets.

<p>Wrap inline snippets of code with <code>&lt;code&gt;</code>.</p>
p Wrap inline snippets of code with <code>&lt;code&gt;</code>.

User input

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

<p>
  To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
  To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>
</p>
p
  | To switch directories, type <kbd>cd</kbd> followed by the name of the directory.
  | To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd>

Variables

y = mx + b 
<var>y</var> = <var>mx</var> + <var>b</var>
var y 
| =
var mx 
| + 
var b

Code block

<p>Sample text here...</p>
<p>And another line of sample text here...</p>
<pre>
  <code>&lt;p&gt;Sample text here...&lt;/p&gt;
  &lt;p&gt;And another line of sample text here...&lt;/p&gt;</code>
</pre>
pre
  code
    &lt;p&gt;Sample text here...&lt;/p&gt;
    &lt;p&gt;And another line of sample text here...&lt;/p&gt;

Code block scrollable

<div class="team-card mx-auto">
  <div class="team-card-inner">
    <div class="team-thumb">
      <img src="path-to-image.jpg" alt="Team Member Picture"/>
    </div>
    <div class="team-social-bar text-center">
      <a class="social-btn sb-twitter" href="#"><i class="icon-twitter"></i></a>
      <a class="social-btn sb-github" href="#"><i class="icon-github"></i></a>
      <a class="social-btn sb-stackoverflow" href="#"><i class="icon-stackoverflow"></i></a>
      <a class="social-btn sb-skype" href="#"><i class="icon-skype"></i></a>
    </div>
    <a class="team-contact-link" href="tel:+19871625346">
      <i class="fe-icon-phone"></i>
      &nbsp;+1 (987) 162 53 46
    </a>
    <a class="team-contact-link" href="mailto:info@example.com">
      <i class="fe-icon-mail"></i>
      &nbsp;info@example.com
    </a>
  </div>
  <span class="team-position">Lead Programmer</span>
  <h4 class="team-name">William Smith</h4>
</div>
<pre class="pre-scrollable">
  <code>
    Code goes here...
  </code>
</pre>
pre.pre-scrollable
  code.
    | Code goes here...

Code highlighting

<div class="team-card mx-auto">
  <div class="team-card-inner">
    <div class="team-thumb">
      <img src="path-to-image.jpg" alt="Team Member Picture"/>
    </div>
    <div class="team-social-bar text-center">
      <a class="social-btn sb-twitter" href="#"><i class="icon-twitter"></i></a>
      <a class="social-btn sb-github" href="#"><i class="icon-github"></i></a>
      <a class="social-btn sb-stackoverflow" href="#"><i class="icon-stackoverflow"></i></a>
      <a class="social-btn sb-skype" href="#"><i class="icon-skype"></i></a>
    </div>
    <a class="team-contact-link" href="tel:+19871625346">
      <i class="fe-icon-phone"></i>
      &nbsp;+1 (987) 162 53 46
    </a>
    <a class="team-contact-link" href="mailto:info@example.com">
      <i class="fe-icon-mail"></i>
      &nbsp;info@example.com
    </a>
  </div>
  <span class="team-position">Lead Programmer</span>
  <h4 class="team-name">William Smith</h4>
</div>
<pre class="line-numbers">
  <code class="lang-html">
    Code goes here...
  </code>
</pre>
pre.line-numbers
  code.lang-html.
    | Code goes here...