How to display code with Bootstrap ?
To display the code in our webpage, bootstrap has some tags that can be used to display the code.
Method 1: Inline code using <code> tag to display the code inline. The <code> tag wraps an inline snippet of code. Inline code should be wrapped in <code> tags. The resulting text will be displayed in a fixed-width font and given a red font color.
Note: The < and > tags should be replaced with < and > respectively.
Syntax:
<code>
<!--inline code goes here-->
</code>Method 2: Code block using <pre> tag to display the code as a standalone block element. This tag is also used when we want to display multiple lines of code. Multiline code should be wrapped in <pre> tags. The resulting text will be displayed in a fixed-width font with spaces and line breaks being preserved.
Syntax:
<pre>
<!-- code block goes here -->
</pre>Step By Step Guide to display Code with Bootstrap:
Step 1: Include Bootstrap and jQuery CDN into the <head> tag before all other stylesheets to load our CSS.
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js”></script>
Step 2: Add <code> tag to display inline code and <pre> tag to display code block.
<code><html></html></code> are
wrapped as an inline elements.
<pre>
<head>
<title>
GeeksforGeeks Bootstrap Code Example
</title>
</head>
</pre> Example:
HTML
<!DOCTYPE html><html> <head> <title>Bootstrap Code Block Example</title> <!--Include latest bootstrap, CSS, jQuery CDN--> <link rel="stylesheet" href= <script src= </script> <script src= </script> <script src= </script></head> <body> <p> <!-- Include <code> tag for inline code --> <code><html></html></code> is wrapped as an inline element. </p> <p> To display code as standalone block element we use <pre> tag as: <!-- Include <pre> tag for multiple lines of code --> <pre> <head> <title> GeeksforGeeks Bootstrap Code Example </title> </head> </pre> </p></body> </html> |
Output:
Please Login to comment...