Hello,
Please how can I make the labels to align better on my web forms and display in the center of the web form?
Here is my HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Information</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/bootstrap.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]-->
<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet'/>
<link href='https://fonts.googleapis.com/css?family=Nunito' rel='stylesheet'/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<style>
.form-group{
margin-top:0%;
}
.auto-style2{
margin-top:0%;
}
</style>
</head>
<body style=" background-color:#DCDCDC; overflow-x:no-display;">
<form id="form1" runat="server">
<div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; font-family: 'Comfortaa';">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" style="background-color: #00003D; border-color: white; border-width: 1px; 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" style="color: white; margin-top: -3%; font-family: 'Nunito';"><span>
<img alt="LOGO22" src="images/LOGO22.png" height="40" /> </span>JOSCHECK</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="Home.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Home</a></li>
<li><a href="AcustomID.aspx" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">About</a></li>
<li class="dropdwon">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">QR Code <b class="caret"></b></a>
<ul class="dropdown-menu" style="background-color: #00003D;">
<li class="dropdown-header"><a href="QRCode.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Generate QR Code</a></li>
<li class="dropdown-header"><a href="QRScan.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Check QR Code</a></li>
</ul>
</li>
<li class="dropdwon">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Car<b class="caret"></b></a>
<ul class="dropdown-menu" style="background-color: #00003D;">
<li class="dropdown-header"><a href="RegisterVehicle.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Vehicle</a></li>
<li class="dropdown-header"><a href="Report.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report Stolen Car</a></li>
<li class="dropdown-header"><a href="Verification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Verify Vehicle</a></li>
</ul>
</li>
<li class="dropdwon">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" style="color: #FFFFFF; font-size: small; border-right: solid 1px #555; border-left: solid 1px #111;">Phone<b class="caret"></b></a>
<ul class="dropdown-menu" style="background-color: #00003D;">
<li class="dropdown-header"><a href="PhoneRegistration.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Register Phone</a></li>
<li class="dropdown-header"><a href="PhoneReport.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Report</a></li>
<li class="dropdown-header"><a href="PhoneVerification.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Phone Check</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown"><asp:Label ID="user" runat="server" Font-Size="smaller" Text="" ForeColor="White"></asp:Label><img alt="" src="images/img1.jpg" height="20" /><b class="caret"></b></a>
<ul class="dropdown-menu" style="background-color: #00003D;">
<li class="dropdown-header"><a href="DashBoard.aspx" style="color: #FFFFFF; font-size: small; background-color: #00003D;">Admin Dashboard</a></li>
<li class="dropdown-header"><a href="#" style="color: #FFFFFF; font-size: small; background-color: #00003D;">xxxxx</a></li>
</ul>
</li>
<li>
<a><asp:Label ID="Units" runat="server" Font-Size="smaller" ForeColor="White"></asp:Label></a>
</li>
<li class="dropdown" style="margin-right: 10px;">
<script src="https://js.paystack.co/v1/inline.js"></script>
<asp:Button type="button" ID="paybutton" runat="server" class="btn btn-primary navbar-btn" Text="Wallet Deposit" Style="width: 115px; font-size: smaller;" OnClick="paybutton_Click" />
</li>
<li class="dropdown" style="margin-right: 10px;">
<asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" Text="Sign Out" Style="font-size: smaller" OnClick="btnSignOut_Click" />
</li>
</ul>
</div>
</div>
</div>
<br /> <br />
<div class="jumbotron" style=" margin-left:auto; margin-top:0%; position:center;">
<p class="auto-style2" style="margin-top:1%; margin-left:2%; color:red; font-size:x-large;">WARNING!! This Property has been Reported stolen; Check Details Below</p><hr />
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label1" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Vehicle Inspection Number:"></asp:Label>
</p>
<div class="col-md-3">
<p class="auto-style2" style="margin-top: 3%; margin-left:10%; color: black;">
<asp:Label ID="Label4" runat="server" Font-Bold="true" CssClass="control-label" Text="ABQ097546677"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label2" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Full Name:"></asp:Label>
</p>
<div class="col-md-3">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label5" runat="server" Font-Bold="true" CssClass=" control-label" Text="Richard Camile"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label3" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Phone Number:"></asp:Label>
</p>
<div class="col-md-3">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label6" runat="server" Font-Bold="true" CssClass=" control-label" Text="+497543672765011"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label7" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Type of Vehicle:"></asp:Label>
</p>
<div class="col-md-3">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color:black;">
<asp:Label ID="Label8" runat="server" Font-Bold="true" CssClass=" control-label" Text="Ford Explorer"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label9" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Date Stolen:"></asp:Label>
</p>
<div class="col-md-3">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label10" runat="server" Font-Bold="true" CssClass=" control-label" Text="7/13/2020"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label11" runat="server" Font-Bold="true" CssClass="col-md-4 control-label" Text="Stolen Location:"></asp:Label>
</p>
<div class="col-md-3">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:Label ID="Label12" runat="server" Font-Bold="true" CssClass=" control-label" Text="Europe"></asp:Label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; color: black;">
<asp:LinkButton ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
</p>
</div>
</div>
</div>
<footer>
<div class="navbar-fixed-bottom" style="background-color:#696969; width:auto; margin-top:0%;">
<p style="color: white;"><a href="Homepage.aspx" style="color: white;">Home</a> ·</p>
<p style="color: white; text-align: center;">Copyright © 2020 Joscheck Tech. All Rights Reserved.</p>
</div>
</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>
