How to Create Responsive Website Using ASP.Net With Bootstrap

Sesuraj
9y
94.8k
0
1

Article

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.

<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</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>

<div class="row">
<div class="col-lg-12">
My design
</div>
</div>

Full Example

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Responsive_Website.index" %>
<!DOCTYPE html>
<html
xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<div class="container">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<form class="form-signin">
<h2 class="form-signin-heading">Please sign in</h2>
<label for="inputEmail" class="sr-only">Email address</label>
<input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me">
Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</form>
</body>
</html>

Output (on large screens)

Output (on small screens)

Up Next

Ebook Download

View all

ASP.NET MVC 5: A Beginner’s Guide

Read by 10.8k people

Download Now!

Learn

View all