Bootstrap Tutorial How to Setting up bootstrap

In this video we will discuss how to download, set-up and create our first bootstrap web page.

To get started with Bootstrap the first step is to download Bootstrap from http://getbootstrap.com. This website also has all the documentation you need to get started with bootstrap.

As of this recording the version is 3.3.6. With the download you get a single zip folder which contains all the required bootstrap components.

Unzip the ZIP folder and you should see the following folder structure. Notice there are 3 sub-folders (css, fonts & js). Let us understand the use of each file, folder by folder.



Here are the steps to create your first web page with Bootstrap

1. Create a new empty ASP.NET web application project. Name it BootstrapDemo
2. To use bootstrap in your website, copy the folder that contains 3 sub-folders (css, fonts, & js) in your website project folder.
3. Add a new HTML file to the project. Name it index.html.
3. There is a basic template available at the following link. Copy and paste the template code in index.html
http://getbootstrap.com/getting-started/#template
4. Finally modify the code in index.html as shown below, to make sure bootstrap is working as expected.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Example</title>
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <h1 class="text-primary">Hello, Bootstrap!</h1>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
    </script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
</body>

</html>

Please note : The viewport meta tag ensure proper rendering and touch zooming on a mobile device.

5. At this point, the project structure in solution explorer should be as shown below.

Post a Comment

Previous Post Next Post