Guide to building a responsive grid with 4 columns in each row using the GridView component

Hey there, I am just starting out with c# and bootstrap. I am trying to style my table similar to the image provided using gridview and ensure it is responsive. However, I am a bit lost on how to go about implementing this.

The aspx code I have so far is:

<div class="table-responsive"> 
    <asp:GridView runat="Server" id="data" CssClass="table table-hover table-bordered"/>
</div>

This is the css code I've tried:

.table-responsive{
    margin: 20px;
}

Unfortunately, the output of my table doesn't quite match what I am aiming for.

Answer №1

To achieve the desired structure, you should utilize a FormView instead of a GridView. Within the ItemTemplate of the FormView, incorporate a table with the necessary content.

For more information, refer to: Using the FormView's Templates

Answer №2

If you're not familiar with c#, using bootstrap can help you structure your layout by utilizing classes like row, col-sm-3, col-md-3, and col-lg-3 for various screen sizes.

<div class="table-responsive"> 
    <div class="row">
        <div class="col-sm-3 col-md-3">section1</div>
        <div class="col-sm-3 col-md-3">section2</div>
        <div class="col-sm-3 col-md-3">section3</div>
        <div class="col-sm-3 col-md-3">section4</div>
    </div>
</div>

For further assistance, visit http://getbootstrap.com/css/#grid

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I optimize Javascript and CSS that are being used on my website but are not physically hosted on my website?

On my website, I have a plugin called "Contact Us" that was created and is being operated by Dropifi. Lately, I've been working on optimizing my site for SEO/Speed using Google's PageSpeed Insights tool. I enabled compression with GZip for all el ...

Transform HTML code into a Word document

Is there a way to transform an HTML page into a Word document? Say I have a webpage that I want to convert into a Word file. How can I go about converting an HTML Page into a Word Document? Also, how do we add a Page Break in a Word document? ...

Is it possible to apply a template file to all of my HTML pages for consistency?

I'm currently in the process of developing a website and looking for a template that I can use across all pages - including a news page, home page, about page, projects page, etc. I am aware that Dreamweaver offers this feature, but is there a way to ...

The Sacred Chalice Trio Vertical Stretch Design

Recently, I've been working on creating a three column layout with percentage width. I stumbled upon the concept of the Holy Grail web design through some online articles and resources. To implement this layout, I referred to an example from The Perfe ...

What steps can be taken to fix the errors in the following code snippet?

Looking for solutions to fix the errors in the code below? Code namespace Phonebook { using System; using System.Data.Entity; public partial class ContactsEntities : DbContext { public ContactsEntities() : base("name=Contac ...

Break your PDF into separate files, combine multiple PDFs together, add

I am looking to create a feature where users can view a PDF on a website, select specific pages to split, combine them into a new PDF, and then download it. Another scenario I am considering is an admin wanting to display content from PDF books on a websi ...

Entity Framework - Formatting SQL COLUMN Time(7) in a Gridview Display

I've come across numerous tutorials on how to fill a grid view using Entity Framework, but I'm having trouble figuring out how to manipulate the data before displaying it on the grid view. The only workaround I've found so far is to create a ...

A reliable approach for dynamically altering SVG graphics

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

Setting a hidden field value in an ASP.NET textbox using a server-side tag when it loses focus

How can I pass the value of a hidden field to a javascript method in an inline manner, using the server tag, within the textbox onblur event? <asp:HiddenField ID="hdnMaxLen" runat="server" Value="10" ...

What is the process for implementing DragAcceptFiles in C#?

Is there a simpler way to implement DragAcceptFiles on the main window of a C# project with minimal code? After researching online, it appears that I will need to DllImport DragAcceptFiles and override WndProc to handle WM_DROPFILES messages. Is there a ...

View live updates in Chrome using Postman

In the process of setting up an alternative login method, I am sending an Email(<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4531203631052228242c296b2629d564aa">[email protected]</a>) and a SessionKey(asdasd@3), ...

The issue with OnClientClick not functioning properly upon the initial attempt

When I click on an image button, I want to open a PDF file in a new window. Currently, the file only opens after two clicks, but I need it to open on the first click. Below is the code I am using: //Find control in Grid view GridViewRow row = (GridViewR ...

A deadlock is caused by the slow execution of Application_Start in the global.asax file

My global.asax Application_Start code takes around 2-3 minutes to complete due to long database queries and other processes. Whenever I deploy a new version of the site, deadlocks occur on aspnet_isapi.dll causing the application to not start. The only w ...

Issue with Top Bar not resizing properly when window is made smaller (HTML,CSS)

Hey there, I'm currently working on a website and encountering an issue with the top bar not resizing when the browser window is made smaller. I've tried looking for solutions on different websites but haven't had any luck. Any assistance yo ...

The identifier 'gridview1' is not recognized in the current scope

I am a beginner in C#. I have been following a simple example on YouTube to connect to an SQL database. However, when using GridView1, I encountered an error. Below is the code snippet from my WebForm1.aspx.cs: using System.Linq; using System.Web; using S ...

The Bootstrap 4-alpha.6 Jumbotron is failing to display correctly or appear as expected

While I have successfully compiled the full source of Bootstrap using Gulp, NPM, and Bower, I am encountering an issue with getting the jumbotron to display properly. Despite my efforts, the jumbotron does not appear on the page, not even the text. Initia ...

Using AngularJS to Retrieve a Specific DOM Element Using its Unique Identifier

Example Please take a look at this Plunkr example. Requirement I am looking for a way to retrieve an element by its id. The provided code should be capable of applying a CSS class to any existing DOM element within the current view. This functionality ...

Inconsistency in spacing found in Bootstrap grid system

I have encountered a strange issue with a bootstrap grid layout. Here is the relevant code snippet: <div class="row"> <div class="col-xs-10 col-xs-offset-1 col-sm-6 col-sm-offset-2"> <img src="< ...

Position the Radio Buttons on Top of the Image

I need assistance with positioning radio buttons on top of an image at a specific location. Both the image and radio buttons are currently in a Div container, but I am unsure about the next steps. Below is where I would like to place the radio buttons (red ...

Using Twitter Bootstrap's modal to trigger a controller action

Is there another method to call a controller action and display the result in a Twitter Bootstrap modal window before it is shown? Here is my GSP code: <g:javascript> $(document).ready(function() { $('#myModal').on('show& ...