React Bootstrap Code

React Code - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

React Bootstrap code is a set of classes which are used for styling text as inline codes, variables, users inputs, sample outputs or blocks of code.

Inline code

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

For example, <section> should be wrapped as inline. 
        
            
          import React from "react";

          const CodePage = () => {
            return (
              <p>
                For example, <code><section></code> should be wrapped as inline.
              </p>
            );
          }

          export default CodePage;

Code blocks

Use <pre>s for multiple lines of code. Once again, be sure to escape any angle brackets in the code for proper rendering. You may optionally add the .pre-scrollable className, which will set a max-height of 350px and provide a y-axis scrollbar.

<p>Sample text here...</p> <p>And another line of sample text here...</p> 
        
            
          import React from "react";

          const CodePage = () => {
            return (
              <pre>
                <code>
                  <p>Sample text here...</p>;
                  <p>And another line of sample text here...</p>
                </code>
              </pre>
            );
          }

          export default CodePage;

Variables

For indicating variables use the <var> tag.

y = mx + b 
        
            
          import React from "react";

          const CodePage = () => {
            return (
              <>
                <var>y</var> = <var>m</var><var>x</var> + <var>b</var>
              </>
            );
          }

          export default CodePage;

User input

Use the <kbd> to indicate input that is typically entered via keyboard.

To switch directories, type cd followed by the name of the directory.

To edit settings, press ctrl + , 

        
            
          import React from "react";

          const CodePage = () => {
            return (
              <>
                <p>
                  To switch directories, type <kbd>cd</kbd> followed by the name of the
                  directory.
                </p>
      
                <p>
                  To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd>
                </p>
              </>
            );
          }

          export default CodePage;

Sample output

For indicating sample output from a program use the <samp> tag.

This text is meant to be treated as sample output from a computer program. 
        
            
          import React from "react";

          const CodePage = () => {
            return (
              <samp>
                This text is meant to be treated as sample output from a computer program.
              </samp>
            );
          }

          export default CodePage;