I attempted to replicate a sign-in page using Bootstrap from this link:
Prior to this, I had already created a page without using Bootstrap code.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mainpage.aspx.cs" Inherits="project.Mainpage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>System</title>
<link href="Styles/login.css" rel="stylesheet" />
<link href="Styles/main.css" rel="stylesheet" />
<link href="Content/bootstrap.css" rel="stylesheet" />
<!-- Google Web fonts -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,700italic,400,800,700,600' rel='stylesheet' type='text/css'/>
</head>
<body style="background-image:url(images/slide07.jpg);background-repeat:no-repeat">
<img class="logo" alt="LOGO" src="images/logomain.png" />
<br /><br />
<form id="form1" runat="server" class="fordiv">
<div id="box">
<span>
<img src="images/none.png" id="avtar" />
</span>
<div style="margin-left: 190px;margin-top: -170px";>
<span>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
</span>
<span>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox><br /><br />
</span>
<span>
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
</span>
</div>
</div><br /><br />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
<table class="table" style="border: medium groove #FFFFFF; width: 100%; margin-top: 200px; ">
<tr>
<td>
<img style="margin-left: 10px;" src="images/passd.jpg" />
</td>
<td>
<img src="images/1.jpg" />
</td>
<td>
<img src="images/2.jpg" />
</td>
<td>
<img src="images/3.jpg" />
</td>
<td>
<img src="images/4.jpg" />
</td>
</tr>
</table>
<br /><br /><br />
</body>
</html>
Now, I am attempting to create a responsive design using Bootstrap by trying the following:
<div class="container">
<img class="logo" alt="LOGO" src="images/logomain.png" /><br /><br />
<form class="form-signin" runat="server" >
<h2 class="form-signin-heading">Please sign in</h2><br /><br />
<label for="inputEmail" class="sr-only">Email address</label>
<asp:TextBox CssClass="textbx" ID="txt_us" runat="server" placeholder="Enter UserName"></asp:TextBox><br /><br />
<label for="inputPassword" class="sr-only">Password</label>
<asp:TextBox CssClass="textbx" ID="txt_pwd" runat="server" placeholder="Enter Password" TextMode="Password"></asp:TextBox>
<br /><br />
<asp:Button ID="Button1" CssClass="button" runat="server" Text="LOGIN" OnClick="Button1_Click" />
<asp:Label ID="Label1" CssClass="info" visible="false" runat ="server" Text="" BorderColor="Black"></asp:Label>
</form>
</div>
However, the display looks awkward. Any solutions?