question

AnjaliAgarwal-1903 avatar image
0 Votes"
AnjaliAgarwal-1903 asked AlbertKallal-4360 answered

making the gridview smaller using bootstrap stylesheet

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.

dotnet-aspnet-webforms
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

AlbertKallal-4360 avatar image
0 Votes"
AlbertKallal-4360 answered

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



image.png (17.6 KiB)
image.png (51.2 KiB)
image.png (18.6 KiB)
image.png (60.5 KiB)
image.png (61.5 KiB)
image.png (19.4 KiB)
image.png (63.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.