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