in Education by
How can you create a web page using Bootstrap?

1 Answer

0 votes
by

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. 

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part1</title>  
  7. </head>  
  8.   
  9. <body>  
  10.     <h1>Hello C# Corner</h1>  
  11. </body>  
  12.   
  13. </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.

  1. <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.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part1</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8. </head>  
  9.   
  10. <body>  
  11.     <h1>Hello C# Corner</h1>  
  12. </body>  
  13.   
  14. </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.

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="utf-8">  
  6.     <title>Bootstrap Part1</title>  
  7.     <meta name="viewport" content="width=device-width,initial-scale=1">  
  8.     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">  
  9. </head>  
  10.   
  11. <body>  
  12.     <h1>Hello C# Corner</h1>  
  13.     <script src="js/jquery-2.1.4.min.js"></script>  
  14.     <script src="js/bootstrap.min.js"></script>  
  15. </body>  
  16.   
  17. </html>  

Now we will open the file in a browser by double clicking on it and see the output.

Output

lets see the output

Related questions

0 votes
    How can you create Fixed Layout with Bootstrap?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    How can we create a dropdown menu in Bootstrap?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    How can you give a style to images in Bootstrap?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    How can you get Bootstrap?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    Explain the Bootstrap basic table?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    Explain Bootstrap buttons and its styles....
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    Explain the basic structure of the Bootstrap grid....
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    What are Containers in Bootstrap?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    What are the advantages of Bootstrap?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    Explain Bootstrap Grid System....
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    Explain the use of Bootstrap CSS class="navnav-list"....
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    Why choose Bootstrap for building websites?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    What is Bootstrap?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    What do you understand about Responsive websites?...
asked Apr 4, 2021 in Education by JackTerrance
0 votes
    Using which of the following, we can create a pager in Bootstrap? .carousel .collapse .pager None of the above...
asked Mar 2, 2021 in Technology by JackTerrance
...