How to displaying responsive information
I have a webform where I want to display information from database, I have no issues with displaying the information in the database, except that I don't like how the front-end display is; I want the display in the front-end to look nice. I want the labels to be close to the display information labels (marked with "xxxx") and also be responsive in a minimized window and also have a thin border line, so that when printing out the information it will look nice.
Here is my HTML and CSS code:
<!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>Information</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]-->
<style>
.form-group{
margin-top:0%;
}
.auto-style2{
margin-top:0%;
}
</style>
</head>
<body style=" overflow-x:no-display;">
<form id="form1" runat="server">
<div>
<div class="navbar navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #00003D; 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: #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" href="Homepage.aspx"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="Home.aspx" style="color: #FFFFFF">| Home</a></li>
<li><a href="#" style="color: #FFFFFF">| About Us</a></li>
<li><a href="Verification.aspx" style="color: #FFFFFF">| Verification</a></li>
<li>
<a>
<asp:Label ID="user" runat="server" Font-Size="Large" Text="" ForeColor="White"></asp:Label></a>
</li>
<li>
<a>
<asp:Label ID="Units" runat="server" Font-Size="Medium" Text="" ForeColor="White"></asp:Label></a>
</li>
<li style="margin-right: 10px;">
<asp:Button ID="btnSignOut" runat="server" class="btn btn-primary navbar-btn" Text="Sign out" OnClick="btnSignOut_Click" />
</li>
</ul>
</div>
</div>
</div>
</div>
<br />
<br />
<br />
<div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 1%; margin-left: 2%; color: red; font-size: x-large;">JOSCHECK - THEFT REPORT</p>
<hr />
</div>
</div>
</div>
<div class="container-fluid" style="margin: 0 auto; align-content: center;">
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; margin-left: 10%; font-size: medium; 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%; font-size: medium; margin-left: 10%; color: black;">
<asp:Label ID="Label4" runat="server" Text="xxxxx" Font-Bold="true" CssClass="control-label"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; font-size: medium; 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%; font-size: medium; margin-left: 10%; color: black;">
<asp:Label ID="Label5" runat="server" Text="xxxxx" Font-Bold="true" CssClass=" control-label"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; font-size: medium; 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%; font-size: medium; margin-left: 10%; color: black;">
<asp:Label ID="Label6" runat="server" Text="xxxxx" Font-Bold="true" CssClass=" control-label"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; font-size: medium; 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%; font-size: medium; margin-left: 10%; color: black;">
<asp:Label ID="Label8" runat="server" Text="xxxxx" Font-Bold="true" CssClass=" control-label"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; font-size: medium; 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%; font-size: medium; margin-left: 10%; color: black;">
<asp:Label ID="Label10" runat="server" Text="xxxxx" Font-Bold="true" CssClass=" control-label"></asp:Label>
</p>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; font-size: medium; 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%; font-size: medium; margin-left: 10%; color: black;">
<asp:Label ID="Label12" runat="server" Text="xxxxx" Font-Bold="true" CssClass=" control-label"></asp:Label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-11">
<p class="auto-style2" style="margin-top: 3%; font-size: medium; margin-left: 10%; color: black;">
<asp:Button ID="Button1" runat="server" CssClass="btn btn-success" Text="Button" />
</p>
</div>
</div>
</div>
<footer>
<div class="container" style="background-color: #696969; height: 248px; margin-bottom: 0px; width: auto; font-family: Goudy Old Style;">
<p class="pull-right"><a href="#" style="color: white;">Back to Top</a></p>
<p style="color: white;"><a href="Home.aspx" style="color: white;">· Home</a></p>
<div class="container-fluid" style="text-align: center;">
<p style="color: white; font-size: small; margin-top: 3%; margin-left: 0%;">Contact Address: Nigerian Merit Award House</p>
<p style="color: white; font-size: small;">Maitama District Abuja, F.C.T</p>
<p style="color: white; font-size: small;">08138709222 08037445843 08023456781</p>
<asp:HyperLink ID="HyperLink5" runat="server" ImageUrl="~/images/facebook%20color.png" imagesize="20" NavigateUrl="http://www.facebook.com">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink6" runat="server" ImageUrl="~/images/Gmail-icon.png" NavigateUrl="http://www.gmail.com">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink7" runat="server" ImageUrl="~/images/linkedIn%20color.png" NavigateUrl="http://www.linkedin.com">HyperLink</asp:HyperLink>
<asp:HyperLink ID="HyperLink8" runat="server" ImageUrl="~/images/whatsapp%20green.png" image-size="30px" NavigateUrl="http://www.whatsapp.com">HyperLink</asp:HyperLink>
</div>
<br />
<br />
<p style="color: white; margin-bottom: -4%; font-weight: bold;">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>
The "xxxxx" are the labels where the information will be displayed from the database.
