Align GridView Center of Page using Bootstrap and CSS in ASP.Net

anjali600
 
on Sep 17, 2021 10:58 PM
Sample_142003.zip
410 Views

I want to make the Gridview in asp.net web forms a little bit smaller and centered using bootstrap stylesheets.

below is my code:

<table class="table table-sm " >
    <asp:GridView ID="grdTest" runat="server" GridLines="Horizontal"  
        CssClass="table  table-sm table-bordered table-condensed table-responsive-sm table-hover table-striped" >   
    </asp:GridView>
</table>

how can I make it smaller and centered on the screen?

Right now, it is stretching the entire content page.

any help will be appreciated.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 18, 2021 03:49 AM
on Sep 18, 2021 03:50 AM

Hi anjali600,

Refer below code.

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
    integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
    integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
    integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<table class="table table-sm">
    <tr>
        <td align="center">
            <asp:GridView ID="grdTest" runat="server" GridLines="Horizontal" Width="25%" Style="min-width: 160px"
                CssClass="table table-sm table-bordered table-condensed table-responsive-sm table-hover table-striped">
            </asp:GridView>
        </td>
    </tr>
</table>

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[] { new DataColumn("Calculation"), new DataColumn("Value") });
        dt.Rows.Add("Test 1", 1235);
        dt.Rows.Add("Test 2", 66666);
        dt.Rows.Add("Test 3", 9999);
        dt.Rows.Add("Test 4", 666555);
        grdTest.DataSource = dt;
        grdTest.DataBind();
    }
}