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:
<!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: