making the gridview smaller using bootstrap stylesheet

Question

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:

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.

Answer 1

Ok, so say we have this grid:

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:

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:

Ok, now we get this:

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:

But, to center, just set margins auto:

eg this:

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

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