ASP.NET

How to Create Responsive Website Using ASP.Net With Bootstrap

Introduction
 
This article will help you to create a responsive website using ASP.NET with Bootstrap. Learn more about Bootstrap from here.
 
Step 1

Download the responsive CSS and JavaScript files from Bootstrap.com.

Step 2
 
Open your Visual Studio then add your downloaded file into your project then add index.aspx page and call your necessary files with in the head tag from that downloaded folder.
  1. <head runat="server">      
  2.     <title></title>      
  3.    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  4.     <script src="js/bootstrap.min.js"></script>    
  5.     <link href="css/bootstrap.min.css" rel="stylesheet" />    
  6. </head>     
Step 3
 
Consider <div class="row"></div> as a new line. Whatever you want to design in a row you should design with in a <div class="row">My design</div>.
 
Then <div class="col-lg-12"></div>
  1.  <div class="row">  
  2.     <div class="col-lg-12">  
  3.         My design  
  4.     </div>  
  5. </div>  
Full Example
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Responsive_Website.index" %>  
  2. <!DOCTYPE html>  
  3. <html  
  4.     xmlns="http://www.w3.org/1999/xhtml">  
  5.     <head runat="server">  
  6.         <title></title>  
  7.         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  8.         <script src="js/bootstrap.min.js"></script>  
  9.         <link href="css/bootstrap.min.css" rel="stylesheet" />  
  10.     </head>  
  11.     <body>  
  12.         <form id="form1" runat="server">  
  13.             <div class="container">  
  14.                 <div class="row">  
  15.                     <div class="col-lg-3"></div>  
  16.                     <div class="col-lg-6">  
  17.                         <form class="form-signin">  
  18.                             <h2 class="form-signin-heading">Please sign in</h2>  
  19.                             <label for="inputEmail" class="sr-only">Email address</label>  
  20.                             <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>  
  21.                                 <label for="inputPassword" class="sr-only">Password</label>  
  22.                                 <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>  
  23.                                     <div class="checkbox">  
  24.                                         <label>  
  25.                                             <input type="checkbox" value="remember-me">    
  26.                                                 Remember me   
  27.                                         </label>  
  28.                                     </div>  
  29.                                 <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>  
  30.                         </form>  
  31.                     </div>  
  32.                     <div class="col-lg-3"></div>  
  33.                 </div>  
  34.             </div>  
  35.         </form>  
  36.     </body>  
  37. </html>   
Output (on large screens) 
 
 
Output (on small screens)
 
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs