Rendering of a Web Page in Bootstrap 3
As you know, there are numerous browsers and devices, so it is important to add some additional information in a HTML file using meta tags. This thing will ensure proper rendering of a web page.
We want our web page to fit in the window of any device. This means we want our website to consume 100% of browser window space. Also, our web page is going to contain characters from Unicode character set. For this, we will use following meta tags.
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">
As of now, the latest version of Internet Explorer is 11.0. In this browser and also in couple of previous versions, we have an option to browse a website in compatibility mode. With the help of compatibility mode, you can select any of the previous versions and browse the website. Previous versions of IE have some serious issues with CSS properties. In such scenario, if user choose to run our website in compatibility mode, our web page will not render properly. To fix this, we are going to tell the browser to use latest rendering engine of IE using following meta tags.
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script>
Please copy and paste all the tags in index.html file as shown below.
<!DOCTYPE html> <html> <head> <title>Bootstrap Tutorial </title> <link rel="stylesheet" type="text/css" href="css/bootstrap.css"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/respond.js/1.4.2/respond.min.js"></script> <script src="js/jquery.js"></script> <script src="js/bootstrap.js"></script> </head> <body> </body> </html>
