Articles → BOOTSTRAP → Introduction To Bootstrap
Introduction To Bootstrap
What Is Bootstrap?
How To Get Bootstrap
- Go to the website http://getbootstrap.com/.
- Click on the button ‘Download Bootstrap’ (see the following figure)
Click to Enlarge
- Once you click on the button another page appears shown in the following figure.
Click to Enlarge
- Click on Download Bootstrap and bootstrap files get downloaded in compressed format (zip file).
- Css
- Fonts
- Js
Click to Enlarge
Create Your First Bootstrap Web Page
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>
<div>
<h2>Getting started</h2>
<p>
ASP.NET Web API is a framework that makes it easy to build HTTP services that reach
a broad range of clients, including browsers and mobile devices. ASP.NET Web API
is an ideal platform for building RESTful applications on the .NET Framework.
</p>
</div>
<div>
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
</div>
<div>
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
</div>
</div>
</body></html>
Click to Enlarge
- Add bootstrap.min.css in the header section of the page.
- Add jquery and bootstrap.min.js file at the bottom of the page.
- On the main div (most outer div), add a class attribute with the value container.
<!DOCTYPE html>
<html lang="en"
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
</head>
<body>
<div class="container">
<div>
<h2>Getting started</h2>
<p>
ASP.NET Web API is a framework that makes it easy to build HTTP services that reach
a broad range of clients, including browsers and mobile devices. ASP.NET Web API
is an ideal platform for building RESTful applications on the .NET Framework.
</p>
</div>
<div>
<h2>Get more libraries</h2>
<p>NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.</p>
</div>
<div>
<h2>Web Hosting</h2>
<p>You can easily find a web hosting company that offers the right mix of features and price for your applications.</p>
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js"></script>
</body></html>
Click to Enlarge