making the gridview smaller using bootstrap stylesheet

Anjali Agarwal 1,386 Reputation points
2021-09-18T01:07:25.533+00:00

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>

below is the image of the bootstrap table:

Z71MW.png

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.

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,415 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Albert Kallal 5,231 Reputation points
    2021-09-18T17:09:28.157+00:00

    Ok, so say we have this grid:

    133297-image.png

    And our code to load the grid is this:

       Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
      
            If Not IsPostBack Then  
                LoadMyGrid()  
            End If  
      
        End Sub  
      
        Sub LoadMyGrid()  
      
            Using cmdSQL As _  
                New SqlCommand("SELECT TOP 12 id, City, HotelName, Rate from tblHotels ORDER BY City,HotelName",  
                New SqlConnection(My.Settings.TEST3))  
      
                cmdSQL.Connection.Open()  
                GridView1.DataSource = cmdSQL.ExecuteReader  
                GridView1.DataBind()  
      
            End Using  
      
        End Sub  
      
    

    Ok, so we now see/have this:

    133352-image.png

    Ok, so lets get bootstrap to format.

    So just use class "table", and if you want a nice "hover" effect when cursor is over each line, then toss in table hover. Say like this:

    133322-image.png

    Ok, now we get this:

    133240-image.png

    Ok, love how bootsrap makes a ugly grid just oh so nice!!

    Ok, so now say we want the grid smaller - say 60%

    So with this we get:

    133258-image.png

    But, to center, just set margins auto:

    eg this:

    133285-image.png

    so margin:auto will usealy center the content. (so size it somewhat smaller, and toss in margin:auto, and you now get this:

    133305-image.png

    Regards,
    Albert D. Kallal (Access MVP 2003-2017)
    Edmonton, Alberta Canada

    0 comments No comments