making the gridview smaller using bootstrap stylesheet

Anjali Agarwal 921 Reputation points

I want to make the Gridview in 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" >   


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.

ASP.NET Web Forms
ASP.NET Web Forms
A part of the ASP.NET web application framework that can be used to create ASP.NET web applications.
550 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. Albert Kallal 3,801 Reputation points

    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  
            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))  
                GridView1.DataSource = cmdSQL.ExecuteReader  
            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:


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

    0 comments No comments