How do I make my GridView to sit at the center of the page and also make other things like dropdown list box and button to sit well on the page and be responsive too?
<body>
<form id="form1" runat="server">
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header" style="font-size: medium; font-weight: bold;">
<li>
<a><asp:Label ID="Units" runat="server" Font-Size="smaller" Text="A & M Business" ForeColor="White"></asp:Label></a>
</li>
<li>
<a href="#"><asp:Label ID="user" runat="server" Font-Size="x-small" Text="ukosimons@gmail.com" ForeColor="White"></asp:Label><img alt="" src="images/img1.jpg" height="20" /></a>
</li>
</div>
<ul class="list-unstyled components">
<p>Admin Dashboard</p>
<li>
<a href="#h">Authenticated Documents</a>
</li>
<li>
<a href="#">Cars</a>
</li>
<li>
<a href="#">Phones</a>
</li>
<li>
<a href="#">Reciepts</a>
</li>
</ul>
</nav>
<div id="content">
<nav id="topnav" class="navbar navbar-expand-lg navbar-default navbar-inverse navbar-fixed-top" role="navigation" style="background-color: #DCDCDC; font-size:small; font-family: 'Comfortaa';">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<br /> <h3 style="font-size: medium; font-weight:bolder; color:#00003D;">josSecure</h3>
<button class="btn btn-dark d-inline-block d-lg-none ml-auto" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<i class="fas fa-align-justify"></i>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="dropdown" id="Pbutton" style="margin-right: 10px;">
<script src="https://js.paystack.co/v1/inline.js"></script>
<asp:Button type="button" ID="lipaybutton" runat="server" class="btn btn-primary navbar-btn" Text="eWallet" Style="font-size: small;" />
</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: small" />
</li>
</ul>
</div>
</div>
</nav>
<h2 style="margin-left:10px;">Activity Page</h2><br />
<asp:Button ID="Button1" runat="server" Text="Invite Team Member" Font-Size="Small" Class="btn btn-primary"/>
<asp:DropDownList runat="server" ID="ddlTables" OnSelectedIndexChanged="OnChange" Width="130px" height="20px" AutoPostBack="true">
<asp:ListItem Text="Select Document Type" />
<asp:ListItem Text="ID Cards" Value="Cards" />
<asp:ListItem Text="Certificates" Value="Certificates" />
<asp:ListItem Text="Reciepts" Value="Reciepts" />
<asp:ListItem Text="Tickets" Value="Tickets" />
</asp:DropDownList>
<asp:Label ID="Label1" runat="server" Font-Bold="true" Text="Start Date"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" Width="130px" height="20px" type="date"></asp:TextBox>
<asp:Label ID="Label2" runat="server" Font-Bold="true" Text="End Date"></asp:Label>
<asp:TextBox ID="Dat" runat="server" Width="130px" height="20px" type="date"></asp:TextBox>
<asp:Button ID="Button2" runat="server" Text="Search" Font-Size="Small" Class="btn btn-primary"/>
<br /><br /><br />
<asp:GridView runat="server" ID="gvDetails" CellPadding="4" ForeColor="#333333" GridLines="None" Height="287px" Width="440px">
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
<EditRowStyle BackColor="#999999" />
<EmptyDataTemplate>
<div style="text-align: center; font-weight:bolder; font-size:medium;">
<asp:Label ID="labelTemp" runat="server" Text="No Activity Recorded"></asp:Label>
</div>
</EmptyDataTemplate>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
<br /><br />
<div class="line"></div>
<h2>Lorem Ipsum Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</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>
<script src="js2/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.5/jquery.mCustomScrollbar.concat.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
// open or close navbar
$('#sidebar').toggleClass('active');
// close dropdowns
$('.collapse.in').toggleClass('in');
// and also adjust aria-expanded attributes we use for the open/closed arrows
// in our CSS
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
});
</script>
</body>
