Silicon UI Kit

##### Menu

Preview Docs

### Content

Typography Icon font Code Images & figures Tables

### Components

Accordion Alerts Audio player Badges Blog components Breadcrumb Buttons Button group Cards Carousel (Slider) Collapse Dropdowns Forms Gallery (Lightbox) Image comparison slider Input group List group Modal Navbar Offcanvas Pagination Parallax Pills Placeholders Popovers Portfolio components Pricing Progress bars Social buttons Spinners Steps Tabs Team Testimonials / reviews Toasts Tooltips Video popup

### Utilities

Bootstrap Silicon

# Code

Displaying inline and multiline blocks of code.

Bootstrap docs

## 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>

## 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>

## Variables

y = mx + b

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

## 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>

## Code block scrollable

    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td>+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td>+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td>+3 285 42 88</td>
          </tr>
          <tr>
            <th scope="row">4</th>
            <td>Jane</td>
            <td>Birkins</td>
            <td>Support</td>
            <td>+3 774 28 50</td>
          </tr>
        </tbody>
      </table>
    </div>

    <pre class="overflow-auto" style="height: 20rem;">
      <code>
        Code goes here...
      </code>
    </pre>

## Code highlighting

    <div class="table-responsive">
      <table class="table">
        <thead>
          <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Position</th>
            <th>Phone</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>John</td>
            <td>Doe</td>
            <td>CEO, Founder</td>
            <td>+3 555 68 70</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Anna</td>
            <td>Cabana</td>
            <td>Designer</td>
            <td>+3 434 65 93</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Kale</td>
            <td>Thornton</td>
            <td>Developer</td>
            <td>+3 285 42 88</td>
          </tr>
        </tbody>
      </table>
    </div>

    <pre class="line-numbers">
      <code class="lang-html">
        HTML code goes here...
      </code>
    </pre>

Top