How to display code with Bootstrap ? Last Updated : 12 Aug, 2021 Comments Improve Suggest changes Like Article Like Report 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= "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> </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: Comment More infoAdvertise with us Next Article How to display code with Bootstrap ? V vrushaket Follow Improve Article Tags : Web Technologies Bootstrap Bootstrap-4 Bootstrap-Questions Similar Reads Bootstrap 5 Display in Print Bootstrap 5 Display in print is used to display or hide some content when printing. This can be combined with viewports also. For example, some content can be made to show to all viewports except large screens and it is also made invisible when we print that page. Bootstrap 5 Display in print Classe 2 min read How to create a Bootstrap panel with a heading ? A panel is a rectangular component of Bootstrap, typically used to add content to the website. It can also have a header or footer, or both. Bootstrap also provides various classes to add padding to the content or multiple colors to make it more attractive. CDN Link: First, include the style sheet t 1 min read Bootstrap 5 Display Notation Bootstrap 5 provides display notation classes to control the visibility of elements. Classes like d-none hide elements, d-block shows them as block-level elements, d-inline as inline elements, and d-flex as flex containers. These classes can be combined with breakpoints (d-md-block, d-lg-inline, etc 4 min read How to Create Form Layouts with Bootstrap ? Form Layouts in Bootstrap refer to the arrangement and presentation of form elements within a web page. To create Form Layouts with Bootstrap, utilize grid system classes to structure forms horizontally or vertically, and enhance them with input groups, inline forms, and responsive designs for impro 5 min read What is the Bootstrap page header ? Page header is used to add suitable spacing around the headings on a page and adds a horizontal line under the heading. This particularly helps a web page where you may have several post titles and need a way to add distinction to each of them. As header is always the first impression of the viewer. 2 min read Display Property in Bootstrap with Examples In Bootstrap, the display property controls the layout behavior of elements. Bootstrap provides utility classes like d-none (hide), d-block (display as block), d-inline (display as inline), etc., for responsive display manipulation. The available classes are: Class NameDescription.d-blockSets the di 2 min read How to create forms using Twitter Bootstrap ? Every website that you visit will have some sort of form in it to collect data from the users. A Form consists of input fields that allow the user to enter the data. Bootstrap provides us with a very easy way to add customizable & responsive forms to our web pages. In this article, we will learn 4 min read How to Use Bootstrap with React? Bootstrap is one of the most popular front-end frameworks, widely used to create visually appealing, responsive, and mobile-first websites quickly. It provides pre-designed UI components, grid systems, and various CSS classes that help you build mobile-first, responsive web applications quickly and 9 min read BootStrap 5 Utilities Changing Display Bootstrap 5 provides a lot of utilities to make a stylish, mobile-friendly, and responsive front-end website without using any CSS code. The utility layout is used for showing, hiding, aligning, and spacing content. BootStrap 5 Utilities Changing Display provides some display properties for setting 2 min read How to Check Twitter Bootstrap is Loaded or not ? Bootstrap is a very useful framework, which is offered by Twitter to make fully responsive websites. It provides CSS classes that are predefined and are usually meant to be directly used without any changes to it. To load Bootstrap into your website read this article Introduction and Installation. I 2 min read Like