Having Issue with adding Textbox and Button
Question
-
User-527908287 posted
Hello,
I am currently having and issues with adding two textboxes and a button to appear vertically to the right of my web form, and inside a jumbotron. The attached code of my web form will show what I mean. I want to make the labels, textboxes and button appear to the right and also appear well when in a smaller screen. Please I need help.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Homepage.aspx.cs" Inherits="Homepage" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Joscheck Home</title> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"/> <link href="css/StyleSheet.css" rel="stylesheet" /> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body style=" background-color:#DCDCDC; background-image:url('images/Dox.png'); overflow-x:hidden;"> <form id="form1" runat="server"> <div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color:#200662; font-family:Nunito;"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color:#200662;color:white"> <span class="sr-only">Toggle Navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="Homepage.aspx"></a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#" style="color: #FFFFFF">Home</a></li> <li><a href="About.aspx" style="color: #FFFFFF">About Us</a></li> <li><a href="Login.aspx"style="color: #FFFFFF">Register</a></li> </ul> </div> </div> </div> <hr /><br /> <div class="jumbotron" style="margin-top: 0%; background-image: url('images/homeimg.jpg'); height: 350px; background-size: 100%;"> <p style="margin-left:10%;"> <i style="color: coral; font-family:St Ryde; margin-top:0%; font-size:x-large; font-style:normal">Search Our Database For Verification</i> </p> <div class="form-horizontal col-md-6" style="margin-left:0%; border-right:0px;"> <h1 style="font-size:x-large; margin-top:0%; color:#200662;">Login</h1><hr style="color:#200662";/><br /> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-2 control-label" Text="Username"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Username" CssClass="form-control" Width="300px" runat="server" placeholder="email Address"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-xs-11"> <asp:Label ID="Label2" runat="server" Font-Bold="true" class="text-note" CssClass="col-md-2 control-label" Text="Password"></asp:Label> <div class="col-md-3"> <asp:TextBox ID="Password" CssClass="form-control" Width="300px" runat="server" placeholder="Password" TextMode="Password"></asp:TextBox> </div> </div> </div> <div class="form-group"> <div class="col-md-2"></div> <div class="col-md-6"> <asp:Button ID="Button1" runat="server" Width="300" margin-top="0%" Text="Login" Font-Size="larger" Class="btn btn-success"/> <br /> <asp:Label ID="Label7" runat="server"></asp:Label> </div> </div> </div> </div> <div class="container"> <div class="row"> <div class="section"> <div class="col-md-4"> <h2 style="color: red; margin-top: 0; font-size: x-large; font-family: Capoon PERSONAL USE;">How It Works...</h2> </div> </div> </div> </div> <div class="container"> <!-- Example row of columns --> <div class="row"> <div class="section"> <div class="col-lg-4"> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Car Verification and Tracking</h2> <hr /> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> <div class="col-md-4"> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Phone Verification and Tracking</h2> <hr /> <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> <div class="col-md-4"> <h2 style="color: #200662; margin-top: 0; font-size: larger; font-family: St Ryde;">Tracking System for Children and Homes Buglars</h2> <hr /> <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Ut fermentum justo sit amet risus.</p> <p><a class="btn btn-primary" href="#" role="button">Read More »</a></p> </div> </div> </div> <hr /><footer class="container" style="background-color:black; width:auto; height:auto;"> <p class="pull-right" style="color: white;"><a href="#">Back to Top</a></p> <p style="color: white;">Copyright © 2018 Doxtrak Tech. All Rights Reserved. · <a href="Homepage.aspx">Home</a> · <a href="About.aspx">About Us</a> · <a href="#">Contact</a> ·</p> </footer> </form> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
