Post
Ask Question

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)
 
 


Similar Articles