Example:
Using Downloaded Bootstrap
Now we will create an HTML file that displays a "Hello C# Corner" message in our web browser.
Step 1
Creating a Basic HTML file.
First we will open any code editor and create a new html file, and we will write the following code and then save the file name as "hello.html" on the particuler location. We will include HTML5 doctype at the beginning of the page, with the lang attribute and the correct character set.
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <title>Bootstrap Part1</title>
- </head>
-
- <body>
- <h1>Hello C# Corner</h1>
- </body>
-
- </html>
Step 2
Bootstrap 3 is mobile-first.
Using Bootstrap 3 we will design our HTML page to be responsive to mobile devices. To ensure proper rendering and enable touch zooming, we will add the following <meta> tag inside the <head> element.
- <meta name="viewport" content="width=device-width,initial-scale=1">
The width=device-width is used to set the width of the page to follow the screen-width of the device. The initial-scale=1 is used to set the initial zoom level when the page is first loaded by the browser.
Now the code will look like this.
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <title>Bootstrap Part1</title>
- <meta name="viewport" content="width=device-width,initial-scale=1">
- </head>
-
- <body>
- <h1>Hello C# Corner</h1>
- </body>
-
- </html>
Step 3
Making an HTML File a Bootstrap Template.
For making this file a Bootstrap Template, after Downloading Bootstrap by the above procedure we will include Bootstrap CSS and JS files. We should include JS files at the bottom of the HTML page before closing <body> tag. by the following code.
- <!DOCTYPE html>
- <html lang="en">
-
- <head>
- <meta charset="utf-8">
- <title>Bootstrap Part1</title>
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
- </head>
-
- <body>
- <h1>Hello C# Corner</h1>
- <script src="js/jquery-2.1.4.min.js"></script>
- <script src="js/bootstrap.min.js"></script>
- </body>
-
- </html>
Now we will open the file in a browser by double clicking on it and see the output.
Output