How to display code with Bootstrap ?
Last Updated :
12 Aug, 2021
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 >
< link rel = "stylesheet" href =
< script src =
</ script >
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< p >
< code >< html ></ html ></ code > is
wrapped as an inline element.
</ p >
< p >
To display code as standalone block
element we use < pre > tag as:
< pre >
< head >
< title >
GeeksforGeeks Bootstrap Code Example
</ title >
</ head >
</ pre >
</ p >
</ body >
</ html >
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...