Articles → BOOTSTRAP → Introduction To Bootstrap

Introduction To Bootstrap






What Is Bootstrap?







How To Get Bootstrap




  1. Go to the website http://getbootstrap.com/.
  2. Click on the button ‘Download Bootstrap’ (see the following figure)
  3. Picture showing the bootstrap web portal for downloading bootstrap

    Click to Enlarge

  4. Once you click on the button another page appears shown in the following figure.
  5. Picture showing the bootstrap web portal for downloading bootstrap

    Click to Enlarge

  6. Click on Download Bootstrap and bootstrap files get downloaded in compressed format (zip file).




  1. Css
  2. Fonts
  3. Js


Picture showing the list of folders when bootstrap is downloaded on the system

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>




Picture showing the web page without bootstrap implemented

Click to Enlarge



  1. Add bootstrap.min.css in the header section of the page.
  2. Add jquery and bootstrap.min.js file at the bottom of the page.
  3. 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>




Picture showing the web page with bootstrap implemented

Click to Enlarge




Posted By  -  Karan Gupta
 
Posted On  -  Sunday, January 24, 2016

Query/Feedback


Your Email Id  
 
Subject 
 
Query/FeedbackCharacters remaining 250