Create responsive pre tag box using Bootstrap classes in HTML,PHP

How to Use pre tag with Bootstrap classes to show multiple line of codes inside HTML,PHP web page.

pre tag is used to show any type of HTML, PHP code inside html and php page. This tag is mostly used where website developer needs to display multiple lines of code inside their web page without affecting current page content. So all the code define inside pre tag will not affect current open web page content. So here is the complete step by step tutorial for Create responsive pre tag box using Bootstrap classes in HTML,PHP.

How to Create responsive pre tag box using Bootstrap classes in HTML,PHP.

https://www.android-examples.com/demo/heading-tag.html
Code for pre-tag.html file.

 <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Pre Tag</title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">
<h1>Display Code on Webpage</h1>
 
<pre>

This is first line.
This is Second line.

</pre>
 
</div>
</body>
</html>

Screenshot:

Create responsive pre tag box using Bootstrap classes in HTML,PHP

Leave a Reply

Your email address will not be published. Required fields are marked *