---
title: "GravityView CSS guide"
date: 2026-04-23
author: "GravityKit"
link: "https://www.gravitykit.com/docs/gravityview/customizing-your-views/css-guide/"
---

This guide covers the HTML structure and CSS classes for all GravityView layouts. It is designed for developers who want to customize the appearance of GravityView Views using CSS.

## Table of contents

- [Container wrapper](#container-wrapper)
- [Table layout](#table-layout)
- [List layout](#list-layout)
- [Layout Builder layout](#layout-builder-layout)
- [DataTables layout](#datatables-layout)
- [Maps layout](#maps-layout)
- [DIY layout](#diy-layout)
- [Edit Entry](#edit-entry)
- [Search bar widget](#search-bar-widget)
- [The gv\_class() function](#the-gvclass-function)
- [Grid system](#grid-system)
- [Other styles](#other-styles)
- [CSS customization filters](#css-customization-filters)
- [Related links](#related-links)

## Container wrapper

The outermost View wrapper uses the pattern `div#gv-view-{View ID}-{counter}`. This ID is unique per View instance on a page.

All layouts share the following container classes added by the `gv_container_class()` function:

- `.gv-container` — Standard container class on all Views
- `.gv-container-{id}` — View-specific container (e.g., `gv-container-47`)

The following state classes are added conditionally:

- `.gv-container-no-results` — Added when there are zero entries to display
- `.gv-hidden` — Added when "Hide Until Searched" is active and no search has been performed, or when `no_entries_options === 3`
- Custom CSS class — User-defined class from View settings (`$context->view->settings->get('class')`)

Each layout also has an outermost template wrapper `` with a layout-specific class:

- `.gv-template-table` — Table layout
- `.gv-template-list` — List layout
- `.gv-template-layout-builder` — Layout Builder layout
- `.gv-template-datatables` — DataTables layout

This wrapper HTML can be modified using the [`gravityview/view/wrapper_container` filter](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-view-wrapper_container/). See also: [All about the View container](https://www.gravitykit.com/docs/gravityview/customizing-your-views/all-about-the-view-container/). The container classes listed above apply to ALL layouts.

## Table layout

### Multiple entries

The Table layout renders entries as table rows with column headers.

**Class hierarchy:**

```
div#gv-view-{id}-1.gv-template-table
├── div.gv-grid.gv-widgets-header (widget zone)
│   └── div.gv-grid-row
│       └── div.gv-grid-col-1-1.gv-left
└── div.gv-table-view.gv-table-container.gv-table-multiple-container.gv-container.gv-container-{id}
    └── table.gv-table-view
        ├── thead > tr > th.gv-field-{form}-{field}
        ├── tbody > tr.alt > td.gv-field-{form}-{field}
        └── tfoot > tr > th.gv-field-{form}-{field}
```

```
div#gv-view-{id}-1.gv-template-table
├── div.gv-grid.gv-widgets-header (widget zone)
│   └── div.gv-grid-row
│       └── div.gv-grid-col-1-1.gv-left
└── div.gv-table-view.gv-table-container.gv-table-multiple-container.gv-container.gv-container-{id}
    └── table.gv-table-view
        ├── thead > tr > th.gv-field-{form}-{field}
        ├── tbody > tr.alt > td.gv-field-{form}-{field}
        └── tfoot > tr > th.gv-field-{form}-{field}
```

**HTML example:**

```

  
    
      
        
      
    
  

  
    
      
        
          
            Entry ID
          
          
            Name
          
        
      
      
        
          12
          
            John Doe
          
        
        
          13
          
            Jane Smith
          
        
      
      
        
          
            Entry ID
          
          
            Name
          
        
      
    
  

```

```
div id="gv-view-47-1" class="gv-template-table">
  div class="gv-grid gv-widgets-header">
    div class="gv-grid-row">
      div class="gv-grid-col-1-1 gv-left">
        
      div>
    div>
  div>

  div class="gv-table-view gv-table-container gv-table-multiple-container gv-container gv-container-47">
    table class="gv-table-view">
      thead>
        tr>
          th id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">
            span class="gv-field-label">Entry IDspan>
          th>
          th id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            span class="gv-field-label">Namespan>
          th>
        tr>
      thead>
      tbody>
        tr class="alt" data-row="0">
          td id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">12td>
          td id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            a href="/your-view-page/entry/12/">John Doea>
          td>
        tr>
        tr class="" data-row="1">
          td id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">13td>
          td id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            a href="/your-view-page/entry/13/">Jane Smitha>
          td>
        tr>
      tbody>
      tfoot>
        tr>
          th id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">
            span class="gv-field-label">Entry IDspan>
          th>
          th id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            span class="gv-field-label">Namespan>
          th>
        tr>
      tfoot>
    table>
  div>
div>
```

### Single entry

The single-entry view uses horizontal row orientation: each `` contains one field with the label in `` and value in ``.

**Key differences:**

- Container uses `.gv-table-single-container` instead of `.gv-table-multiple-container`
- Table uses `.gv-table-view-content` class
- Each field is a table row (horizontal orientation)
- Back link appears before the container

**HTML example:**

```

  ← Go back

  
    
    
      
        Entry ID
        12
      
      
        Name
        John Doe
      
      
        Additional details
        
      
      
        Photo
        
          
            
          
        
      
    
    
  

```

```
p class="gv-back-link">
  a data-viewid="47" href="/your-view-page/">← Go backa>
p>

div class="gv-table-view gv-table-container gv-table-single-container gv-container gv-container-47">
  table class="gv-table-view-content">
    thead>thead>
    tbody>
      tr id="gv-field-1-id" class="gv-field-1-id">
        th scope="row">span class="gv-field-label">Entry IDspan>th>
        td>12td>
      tr>
      tr id="gv-field-1-1" class="gv-field-1-1">
        th scope="row">span class="gv-field-label">Namespan>th>
        td>John Doetd>
      tr>
      tr id="gv-field-1-5" class="gv-section gv-field-1-5">
        th scope="row">span class="gv-field-label">Additional detailsspan>th>
        td>td>
      tr>
      tr id="gv-field-1-8" class="gv-field-1-8">
        th scope="row">span class="gv-field-label">Photospan>th>
        td>
          a class="gravityview-fancybox" href="..." rel="gv-field-1-8-12">
            img src="..." alt="Photo" class="gv-image gv-field-id-8">
          a>
        td>
      tr>
    tbody>
    tfoot>tfoot>
  table>
div>
```

### No results state

When there are no entries, the Table layout displays the message inside a `` spanning all columns:

```

  
    
      No entries match your request.
    
  

```

```
tbody>
  tr>
    td colspan="3" class="gv-no-results gv-no-results-text">
      p>No entries match your request.p>
    td>
  tr>
tbody>
```

Or with an embedded form (`no_entries_options = 1`):

```

  
    
      
    
  

```

```
tbody>
  tr>
    td colspan="3" class="gv-no-results gv-no-results-form">
      
    td>
  tr>
tbody>
```

**Note:** The no-results markup differs by layout. Table uses `` inside the table structure, while List and Layout Builder use `` elements.

### Table-specific notes

- The `gv_class()` function generates `.gv-field-{form}-{field}` classes on `` and `` elements
- Sort links appear in headers with `.gv-sort` and state classes (`.gv-icon-caret-up-down`, `.gv-icon-sort-asc`, `.gv-icon-sort-desc`)
- The `.alt` class alternates on table rows in ``
- Mobile responsive: `` and `` hidden at ≤575.98px; `` elements use `:before` pseudo-elements with `data-label` attribute values

**Filter:** [`gravityview/template/table/entry/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-template-table-entry-class/) modifies CSS class on each `` row.

## List layout

### Multiple entries

The List layout displays entries as individual list items with title, content, and footer zones.

**Class hierarchy:**

```
div#gv-view-{id}-1.gv-template-list
└── div.gv-list-container.gv-list-multiple-container.gv-container.gv-container-{id}
    └── div#gv_list_{entry_id}.gv-list-view
        ├── div.gv-list-view-title
        │   ├── h3.gv-field-{form}-{field} > a (linked title)
        │   └── div.gv-list-view-subtitle > h4
        ├── div.gv-grid.gv-list-view-content
        │   ├── div.gv-grid-col-1-3.gv-list-view-content-image
        │   └── div.gv-grid-col-2-3.gv-list-view-content-description
        └── div.gv-grid.gv-list-view-footer
            ├── div.gv-grid-col-1-2.gv-left
            └── div.gv-grid-col-1-2.gv-right
```

```
div#gv-view-{id}-1.gv-template-list
└── div.gv-list-container.gv-list-multiple-container.gv-container.gv-container-{id}
    └── div#gv_list_{entry_id}.gv-list-view
        ├── div.gv-list-view-title
        │   ├── h3.gv-field-{form}-{field} > a (linked title)
        │   └── div.gv-list-view-subtitle > h4
        ├── div.gv-grid.gv-list-view-content
        │   ├── div.gv-grid-col-1-3.gv-list-view-content-image
        │   └── div.gv-grid-col-2-3.gv-list-view-content-description
        └── div.gv-grid.gv-list-view-footer
            ├── div.gv-grid-col-1-2.gv-left
            └── div.gv-grid-col-1-2.gv-right
```

**HTML example:**

```

  

    
      
        John Doe
      
      
        
          Software Engineer at Example Corp
        
      
    

    
      
        
          
            
          
        
      
      
        
          A brief description of the directory listing goes here.
        
      
    

    
      
        123 Main Street
      
      
        
          View Details
        
      
    

  

```

```
div id="gv-view-22-1" class="gv-template-list">
div class="gv-list-container gv-list-multiple-container gv-container gv-container-22">

  div id="gv_list_5" class="gv-list-view">

    div class="gv-list-view-title">
      h3 class="gv-field-2-1">
        a href="/your-view-page/entry/5/">John Doea>
      h3>
      div class="gv-list-view-subtitle">
        h4 id="gv-field-2-2" class="gv-field-2-2">
          Software Engineer at Example Corp
        h4>
      div>
    div>

    div class="gv-grid gv-list-view-content">
      div class="gv-grid-col-1-3 gv-list-view-content-image">
        div id="gv-field-2-8" class="gv-field-2-8">
          a class="gravityview-fancybox" href="...image.jpg" rel="gv-field-2-8-5">
            img src="...image.jpg" width="250" alt="Featured Image"
                 class="gv-image gv-field-id-8">
          a>
        div>
      div>
      div class="gv-grid-col-2-3 gv-list-view-content-description">
        div id="gv-field-2-3" class="gv-field-2-3">
          p>A brief description of the directory listing goes here.p>
        div>
      div>
    div>

    div class="gv-grid gv-list-view-footer">
      div class="gv-grid-col-1-2 gv-left">
        div id="gv-field-2-4.1" class="gv-field-2-4.1">123 Main Streetdiv>
      div>
      div class="gv-grid-col-1-2 gv-right">
        div id="gv-field-2-entry_link" class="gv-field-2-entry_link">
          a href="/your-view-page/entry/5/">View Detailsa>
        div>
      div>
    div>

  div>

div>
div>
```

### Single entry

**Key differences:**

- Container uses `.gv-list-single-container`
- Back link appears first
- Title is NOT linked (plain text in ``)
- Content zone does NOT have `.gv-grid` class
- No footer zone
- Fields may include `span.gv-field-label`

**HTML example:**

```

  
    ← Go back
  

  

    
      John Doe
      
        
          Software Engineer at Example Corp
        
      
    

    
      
        
          
        
        
          123 Main StreetSpringfield, Illinois 62701United States
        
      

      
        
          A detailed description of the listing goes here.
        
        
          Website:
          example.com
        
        
          Email address:
          john@example.com
        
        
          Phone:
          (555) 123-4567
        
      
    

  

```

```
div id="gv-view-22-1" class="gv-template-list">
div class="gv-list-container gv-list-single-container gv-container gv-container-22">

  p class="gv-back-link">
    a data-viewid="22" href="/your-view-page/">← Go backa>
  p>

  div id="gv_list_5" class="gv-list-view">

    div class="gv-list-view-title">
      h3 class="gv-field-2-1">John Doeh3>
      div class="gv-list-view-subtitle">
        h4 id="gv-field-2-2" class="gv-field-2-2">
          Software Engineer at Example Corp
        h4>
      div>
    div>

    div class="gv-list-view-content">
      div class="gv-list-view-content-image gv-grid-col-1-3">
        div id="gv-field-2-entry_map" class="gv-field-2-entry_map">
          
        div>
        div id="gv-field-2-4" class="gv-field-2-4">
          123 Main Streetbr>Springfield, Illinois 62701br>United States
        div>
      div>

      div class="gv-list-view-content-description">
        div id="gv-field-2-3" class="gv-field-2-3">
          p>A detailed description of the listing goes here.p>
        div>
        div id="gv-field-2-7" class="gv-field-2-7">
          span class="gv-field-label">Website:span>
          p>a href="https://www.example.com" target="_blank">example.coma>p>
        div>
        div id="gv-field-2-6" class="gv-field-2-6">
          span class="gv-field-label">Email address:span>
          p>a href="mailto:john@example.com">john@example.coma>p>
        div>
        div id="gv-field-2-5" class="gv-field-2-5">
          span class="gv-field-label">Phone:span>
          p>a href="tel:(555)%20123-4567">(555) 123-4567a>p>
        div>
      div>
    div>

  div>
div>
div>
```

### No results state

Same pattern as Table layout — uses `.gv-no-results`, `.gv-no-results-text`, or `.gv-no-results-form` classes.

**Filter:** [`gravityview/template/list/entry/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-template-list-entry-class/) modifies entry wrapper classes.

## Layout Builder layout

### Multiple entries

The Layout Builder uses a BEM-style grid system for complete layout control.

**Class hierarchy:**

```
div#gv-view-{id}-1.gv-template-layout-builder
├── div.gv-grid.gv-widgets-header (widget zone)
└── div.gv-layout-builder-container.gv-layout-builder-multiple-container.gv-container.gv-container-{id}
    └── div.gv-layout-builder-view.gv-layout-builder-view--entry.gv-grid
        ├── div.gv-grid-row
        │   ├── div.gv-grid-col-2-3
        │   │   └── div.gv-field-{form}-{field}
        │   │       └── div.gv-grid-value
        │   └── div.gv-grid-col-1-3
        │       └── div.gv-field-{form}-{field}
        │           └── div.gv-grid-value
        └── div.gv-grid-row
            └── div.gv-grid-col-1-1
                └── div.gv-field-{form}-{field}
                    └── div.gv-grid-value
```

```
div#gv-view-{id}-1.gv-template-layout-builder
├── div.gv-grid.gv-widgets-header (widget zone)
└── div.gv-layout-builder-container.gv-layout-builder-multiple-container.gv-container.gv-container-{id}
    └── div.gv-layout-builder-view.gv-layout-builder-view--entry.gv-grid
        ├── div.gv-grid-row
        │   ├── div.gv-grid-col-2-3
        │   │   └── div.gv-field-{form}-{field}
        │   │       └── div.gv-grid-value
        │   └── div.gv-grid-col-1-3
        │       └── div.gv-field-{form}-{field}
        │           └── div.gv-grid-value
        └── div.gv-grid-row
            └── div.gv-grid-col-1-1
                └── div.gv-field-{form}-{field}
                    └── div.gv-grid-value
```

**HTML example:**

```

  
    
      
        
      
    
  

  

    
      
        
          
            
              John Doe
            
          
        
        
          
            
              September 16, 2025
            
          
        
      
      
        
          
            Springfield, IL
          
          
            
              Full time
            
          
        
      
    

  

```

```
div id="gv-view-63-1" class="gv-template-layout-builder">

  div class="gv-grid gv-widgets-header">
    div class="gv-grid-row">
      div class="gv-grid-col-1-1 gv-left">
        
      div>
    div>
  div>

  div class="gv-layout-builder-container gv-layout-builder-multiple-container gv-container gv-container-63">

    div class="gv-layout-builder-view gv-layout-builder-view--entry gv-grid">
      div class="gv-grid-row">
        div class="gv-grid-col-2-3">
          div id="gv-field-3-1" class="gv-field-3-1">
            div class="gv-grid-value">
              a href="/your-view-page/entry/8/">John Doea>
            div>
          div>
        div>
        div class="gv-grid-col-1-3">
          div id="gv-field-3-date_created" class="gv-field-3-date_created">
            div class="gv-grid-value">
              September 16, 2025
            div>
          div>
        div>
      div>
      div class="gv-grid-row">
        div class="gv-grid-col-1-1">
          div id="gv-field-3-4" class="gv-field-3-4">
            div class="gv-grid-value">Springfield, ILdiv>
          div>
          div id="gv-field-3-5" class="gv-field-3-5">
            div class="gv-grid-value">
              Full time
            div>
          div>
        div>
      div>
    div>

  div>
div>
```

**Note:** The BEM modifier `.gv-layout-builder-view--entry` distinguishes entry blocks. The `.gv-featured-entry` class is available in the stylesheet for styling featured entries, but it is not applied automatically. To add it, use the [`gravityview/template/layout-builder/entry/class`](#entry-row-filters) filter to conditionally add the class (e.g., for starred entries).

### Single entry

**Key differences:**

- Container uses `.gv-layout-builder-single-container`
- Back link inside container
- Single grid row with all fields stacked in `.gv-grid-col-1-1`
- Fields include `span.gv-field-label` before value

**HTML example:**

```

  
    ← Go back
  

  
    
      

        
          Date created
          September 16, 2025
        

        
          Name
          John Doe
        

        
          Category
          Full time
        

        
          Location
          Springfield, IL
        

        
          Description
          
            A detailed description of the entry goes here.
          
        

      
    
  

```

```
div class="gv-layout-builder-container gv-layout-builder-single-container gv-container gv-container-63">

  p class="gv-back-link">
    a data-viewid="63" href="/your-view-page/">← Go backa>
  p>

  div class="gv-layout-builder-view gv-layout-builder-view--entry gv-grid">
    div class="gv-grid-row">
      div class="gv-grid-col-1-1">

        div id="gv-field-3-date_created" class="gv-field-3-date_created">
          span class="gv-field-label">Date createdspan>
          div class="gv-grid-value">September 16, 2025div>
        div>

        div id="gv-field-3-1" class="gv-field-3-1">
          span class="gv-field-label">Namespan>
          div class="gv-grid-value">John Doediv>
        div>

        div id="gv-field-3-6" class="gv-field-3-6">
          span class="gv-field-label">Categoryspan>
          div class="gv-grid-value">Full timediv>
        div>

        div id="gv-field-3-4" class="gv-field-3-4">
          span class="gv-field-label">Locationspan>
          div class="gv-grid-value">Springfield, ILdiv>
        div>

        div id="gv-field-3-3" class="gv-field-3-3">
          span class="gv-field-label">Descriptionspan>
          div class="gv-grid-value">
            p>A detailed description of the entry goes here.p>
          div>
        div>

      div>
    div>
  div>
div>
```

### No results state

```

  
    No entries match your request.
  

```

```
div class="gv-no-results">
  div class="gv-layout-builder-view-title">
    h3>No entries match your request.h3>
  div>
div>
```

**Filter:** [`gravityview/template/layout-builder/entry/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-template-layout-builder-entry-class/) modifies entry class.

## DataTables layout

### Multiple entries

The DataTables layout extends the Table layout with the [DataTables.net](https://datatables.net/) JavaScript library. The underlying table structure reuses Table layout classes, but adds DataTables-specific wrappers and controls.

**Class hierarchy:**

```
div#gv-view-{id}-1.gv-template-datatables
├── div.gv-grid.gv-widgets-header (widget zone)
└── div#gv-datatables-{id}.gv-datatables-container.gv-container.gv-container-{id}
    └── div#DataTables_Table_0_wrapper.dataTables_wrapper
        ├── div.dt-buttons (export buttons)
        ├── div.dataTables_length (page size selector)
        ├── div.dataTables_processing (loading indicator)
        ├── table.gv-datatables.display.dataTable.nowrap.dtr-inline
        │   ├── thead > tr > th.gv-field-{form}-{field}.sorting
        │   ├── tbody > tr.odd|.even > td
        │   └── tfoot > tr > th
        ├── div.dataTables_info (entry count)
        └── div.dataTables_paginate.paging_simple_numbers (pagination)
```

```
div#gv-view-{id}-1.gv-template-datatables
├── div.gv-grid.gv-widgets-header (widget zone)
└── div#gv-datatables-{id}.gv-datatables-container.gv-container.gv-container-{id}
    └── div#DataTables_Table_0_wrapper.dataTables_wrapper
        ├── div.dt-buttons (export buttons)
        ├── div.dataTables_length (page size selector)
        ├── div.dataTables_processing (loading indicator)
        ├── table.gv-datatables.display.dataTable.nowrap.dtr-inline
        │   ├── thead > tr > th.gv-field-{form}-{field}.sorting
        │   ├── tbody > tr.odd|.even > td
        │   └── tfoot > tr > th
        ├── div.dataTables_info (entry count)
        └── div.dataTables_paginate.paging_simple_numbers (pagination)
```

**HTML example:**

```

  
    
      
        
      
    
  

  
    

      
        
          CSV
        
        
          Excel
        
        
          Print
        
        
          Columns▼
        
      

      
        Show
          
            10
            25
            50
            All
           entries
        
      

      
        Loading data…
        
      

      
        
          
            
              Name
            
            
              Department
            
          
        
        
          
            
              John Doe
            
            Engineering
          
          
            
              Emily Smith
            
            Marketing
          
        
        
          
            
              Name
            
            
              Department
            
          
        
      

      
        Showing 1 to 10 of 10 entries
      

      
        Previous
        
          1
        
        Next
      

    
  

```

```
div id="gv-view-85-1" class="gv-template-datatables">

  div class="gv-grid gv-widgets-header">
    div class="gv-grid-row">
      div class="gv-grid-col-1-1 gv-left">
        
      div>
    div>
  div>

  div id="gv-datatables-85" class="gv-datatables-container gv-container gv-container-85">
    div id="DataTables_Table_0_wrapper" class="dataTables_wrapper">

      div class="dt-buttons">
        button class="dt-button buttons-csv buttons-html5" type="button">
          span>CSVspan>
        button>
        button class="dt-button buttons-excel buttons-html5" type="button">
          span>Excelspan>
        button>
        button class="dt-button buttons-print" type="button">
          span>Printspan>
        button>
        button class="dt-button buttons-collection buttons-colvis" type="button">
          span>Columnsspan>span class="dt-down-arrow">▼span>
        button>
      div>

      div class="dataTables_length" id="DataTables_Table_0_length">
        label>Show
          select name="DataTables_Table_0_length">
            option value="10">10option>
            option value="25">25option>
            option value="50">50option>
            option value="-1">Alloption>
          select> entries
        label>
      div>

      div class="dataTables_processing" role="status" style="display: none;">
        div class="dataTables_processing_text">Loading data…div>
        div>div>div>div>div>div>div>div>div>div>
      div>

      table data-viewid="85"
             class="gv-datatables display dataTable nowrap dtr-inline"
             id="DataTables_Table_0">
        thead>
          tr>
            th id="gv-field-4-1" class="gv-field-4-1 sorting" scope="col">
              span class="gv-field-label">Namespan>
            th>
            th id="gv-field-4-3" class="gv-field-4-3 sorting" scope="col">
              span class="gv-field-label">Departmentspan>
            th>
          tr>
        thead>
        tbody>
          tr class="odd">
            td data-row-index="0" data-column-index="0" class="dtr-control">
              a href="...">John Doea>
            td>
            td data-row-index="0" data-column-index="1">Engineeringtd>
          tr>
          tr class="even">
            td data-row-index="1" data-column-index="0" class="dtr-control">
              a href="...">Emily Smitha>
            td>
            td data-row-index="1" data-column-index="1">Marketingtd>
          tr>
        tbody>
        tfoot>
          tr>
            th class="gv-field-4-1" scope="col">
              span class="gv-field-label">Namespan>
            th>
            th class="gv-field-4-3" scope="col">
              span class="gv-field-label">Departmentspan>
            th>
          tr>
        tfoot>
      table>

      div class="dataTables_info" role="status" aria-live="polite">
        Showing 1 to 10 of 10 entries
      div>

      div class="dataTables_paginate paging_simple_numbers">
        a class="paginate_button previous disabled">Previousa>
        span>
          a class="paginate_button current" aria-current="page">1a>
        span>
        a class="paginate_button next disabled">Nexta>
      div>

    div>
  div>
div>
```

### Separating GravityView classes from DataTables library classes

**GravityView classes:**

- `gv-template-datatables`, `gv-datatables-container`, `gv-datatables`, `gv-field-{form}-{field}`, `gv-field-label`, `gv-container`, `gv-container-{id}`

**DataTables library classes:**

- `dataTables_wrapper`, `dataTable`, `display`, `nowrap`, `dtr-inline`, `dtr-control`, `sorting`, `odd`, `even`, `dataTables_length`, `dataTables_filter`, `dataTables_info`, `dataTables_paginate`, `paginate_button`, `current`, `previous`, `next`, `disabled`

**DataTables Buttons extension classes:**

- `dt-buttons`, `dt-button`, `buttons-csv`, `buttons-excel`, `buttons-print`, `buttons-html5`, `buttons-collection`, `buttons-colvis`, `dt-down-arrow`

### Single entry

The DataTables single-entry view uses the standard Table layout single-entry template — no DataTables-specific markup. See the Table layout section.

**Filter:** `gravityview_datatables_table_class` modifies table CSS classes. See [DataTables styling documentation](https://datatables.net/manual/styling/) for DataTables library classes.

**External documentation:** [DataTables.net styling documentation](https://datatables.net/manual/styling/)

## Maps layout

The Maps layout displays entries as markers on a Google Map with an entry listing table below (or above) the map. The map container is placed in the header widget zone, and the entry listing uses the standard Table layout with a `.gv-has-map` modifier.

### Map container

The map is rendered inside the header widget area using Google Maps JavaScript API.

**HTML example:**

```

  

```

```
div id="gv-map-canvas-31"
     class="gv-map-canvas gk-map-canvas gk-multi-entry-map gk-map-visible gk-map-markers-generated gk-map-generated"
     data-entryid=""
     data-gk-map='{"view_id":31,"entry_id":"","is_multi_entry_map":true,"markers_data":[...]}'
     data-gk-map-settings='{"MapOptions":{...},"icon":{...},"layers":{...}}'
     style="position: relative; overflow: hidden;">
  
div>
```

### Entry listing

The entry listing uses the standard Table layout structure with the `.gv-has-map` modifier:

```

  
    
      
        
          Name
        
      
    
    
      
        
          John Doe
        
      
    
    
  

```

```
div class="gv-table-view gv-table-container gv-table-multiple-container gv-container gv-container-31 gv-has-map">
  table class="gv-table-view">
    thead>
      tr>
        th id="gv-field-5-1" class="gv-field-5-1" data-label="Name">
          span class="gv-field-label">Namespan>
        th>
      tr>
    thead>
    tbody>
      tr class="alt" data-row="0">
        td id="gv-field-5-1" class="gv-field-5-1" data-label="Name">
          John Doe
        td>
      tr>
    tbody>
    tfoot>tfoot>
  table>
div>
```

### Info window structure

Info windows (marker popups) are rendered when a marker is clicked. The HTML is stored in the `data-gk-map` JSON attribute.

**Without image:**

```

  
    
      
        John Doe
      
    
    123 Main Street, Springfield, Illinois 62701
  

```

```
div class="gv-infowindow-container gv-infowindow-no-image">
  div class="gv-infowindow-content">
    h4>
      a href="/your-view-page/entry/3/" class="gv-infowindow-entry-link">
        John Doe
      a>
    h4>
    p>123 Main Street, Springfield, Illinois 62701p>
  div>
div>
```

**With image:**

```

  
    
  
  
    
      Business Name
    
    Address details
  

```

```
div class="gv-infowindow-container">
  div class="gv-infowindow-image">
    img src="..." alt="...">
  div>
  div class="gv-infowindow-content">
    h4>
      a href="..." class="gv-infowindow-entry-link">Business Namea>
    h4>
    p>Address detailsp>
  div>
div>
```

### Geolocation search

The geolocation search field adds location-based filtering with address autocomplete, current-location button, and radius/unit selectors.

**HTML example:**

```

  
  
  
  

  
    Geolocation Radius
  

  
    
      
      
        
      
    
  

  
    
      1
      5
      10
    
    
      Kilometers
      Miles
    
  

```

```
div class="gv-search-box gk-search-geolocation-field">
  input type="hidden" class="gk-maps-search-current-geolocation-has-search" value="0">
  input type="hidden" class="gk-maps-current-view" value="31">
  input type="hidden" name="lat" class="gk-maps-search-geolocation-lat" value="0" disabled>
  input type="hidden" name="long" class="gk-maps-search-geolocation-lng" value="0" disabled>

  div class="gv-grid-col-1-1">
    label for="search-box-filter_geolocation">Geolocation Radiuslabel>
  div>

  div class="gv-grid-col-1-1">
    div class="gk-maps-search-geolocation-address-autocomplete-container">
      input type="text"
             class="gk-maps-search-geolocation-address-autocomplete pac-target-input"
             name="address_search" value="" placeholder="Enter a location">
      button type="button" class="gk-maps-search-current-geolocation"
              title="Click to use current location">
        svg>svg>
      button>
    div>
  div>

  div class="gv-grid-col-1-1">
    select name="filter_geolocation"
            class="gk-maps-search-current-geolocation-radius">
      option value="1">1option>
      option value="5" selected>5option>
      option value="10">10option>
    select>
    select name="unit" class="gk-maps-search-current-geolocation-unit">
      option value="km">Kilometersoption>
      option selected value="mi">Milesoption>
    select>
  div>
div>
```

### Maps-specific classes

**GravityView Maps classes (`gk-*` prefix):**

- `gk-map-canvas` — Map canvas container
- `gk-multi-entry-map` — Multi-entry map identifier
- `gk-map-visible`, `gk-map-markers-generated`, `gk-map-generated` — Map state classes
- `gk-search-geolocation-field` — Geolocation search container
- `gk-maps-search-geolocation-address-autocomplete` — Address input
- `gk-maps-search-current-geolocation` — Current location button
- `gk-maps-search-current-geolocation-radius` — Radius selector
- `gk-maps-search-current-geolocation-unit` — Unit selector (km/mi)

**Info window classes:**

- `gv-infowindow-container` — Outer wrapper
- `gv-infowindow-no-image` — Modifier for entries without images
- `gv-infowindow-image` — Image container
- `gv-infowindow-content` — Content area
- `gv-infowindow-entry-link` — Link to entry detail

**Google Maps library classes (`gm-*` prefix):**

These classes are generated by the Google Maps JavaScript API — they are NOT GravityView classes:

- `gm-style`, `gm-bundled-control`, `gm-fullscreen-control`, `gm-style-cc`, `gm-style-mtc`, etc.

## DIY layout

The DIY layout provides minimal markup for maximum customization flexibility. Unlike other layouts, DIY intentionally has almost no structural HTML.

### Multiple entries

**Class hierarchy:**

```
div#gv-view-{id}-{seq}.gv-container.gv-container-{id}.gv-diy-container.gv-diy-multiple-container
└── div#gv_diy_{entry_slug}.gv-diy-view
    ├── {field value} (bare output, no wrapper by default)
    ├── Value (with container tag)
    └── {Before HTML}{value}{After HTML} (with Before/After Output)
```

```
div#gv-view-{id}-{seq}.gv-container.gv-container-{id}.gv-diy-container.gv-diy-multiple-container
└── div#gv_diy_{entry_slug}.gv-diy-view
    ├── {field value} (bare output, no wrapper by default)
    ├── div class="{css_classes}">Valuediv> (with container tag)
    └── {Before HTML}{value}{After HTML} (with Before/After Output)
```

**HTML example:**

```

  
    John Doe
    john@example.com
    Phone: 555-1234
  

  
    Jane Smith
    jane@example.com
    Phone: 555-5678
  

```

```
div id="gv-view-100-1"
     class="gv-container gv-container-100 gv-diy-container gv-diy-multiple-container">

  div id="gv_diy_abc123" class="gv-diy-view">
    John Doe
    div class="custom-field-class">john@example.comdiv>
    strong>Phone:strong> 555-1234br>
  div>

  div id="gv_diy_def456" class="gv-diy-view">
    Jane Smith
    div class="custom-field-class">jane@example.comdiv>
    strong>Phone:strong> 555-5678br>
  div>

div>
```

### Single entry

**Key differences:**

- Container uses `.gv-diy-single-container`
- Back link before container
- Both container and entry classes on same element (`.gv-diy-view.gv-diy-container.gv-diy-single-container`)

**HTML example:**

```
← Go back

  John Doe
  john@example.com
  Full bio text here...

```

```
p class="gv-back-link">a href="/your-view-page/">← Go backa>p>

div id="gv_diy_abc123"
     class="gv-container gv-container-100 gv-diy-view gv-diy-container gv-diy-single-container">

  John Doe
  div class="email-field">john@example.comdiv>
  p>Full bio text here...p>

div>
```

### No results state

```

  
    No entries match your request.
  

```

```
div class="gv-diy-view gv-no-results gv-no-results-text">
  div class="gv-diy-view-title">
    h3>No entries match your request.h3>
  div>
div>
```

### Available filters

DIY provides extensive customization through filters:

- `gravityview-diy/container` — Change or remove container element (default: `div`)
- `gravityview-diy/wrap/multiple` — Toggle entry wrapping in the multiple-entry view (default: `true`)
- `gravityview-diy/wrap/single` — Toggle entry wrapping in the single-entry view (default: `true`)
- Per-field Container Tag setting — Choose from: none, `div`, `h1`-`h4`, `p`, `blockquote`, `pre`, `address`
- Per-field Before/After Output HTML — Supports Merge Tags for dynamic content

**Note:** DIY is intentionally minimal for maximum customization. Fields output bare values with no labels, no `wpautop` processing, and no default wrapper classes.

## Edit Entry

The Edit Entry view is a shared component that appears across all layouts. When a user clicks an "Edit Entry" link, GravityView renders a form using Gravity Forms' native `GFFormDisplay::get_form()`, wrapped in GravityView-specific containers.

### Complete structure

```

  
    Edit Entry
  

  
    Entry Updated. Return to Entry
  

  

    

    
      
        
          
            Field Label
            
              
            
          
        
      

      
        

          
          

          
          

          
          

          
          
            Cancel
          

          
          
            Delete
          

          
        
      
    

  

```

```
div class="gv-edit-entry-wrapper">

  h2 class="gv-edit-entry-title">
    span>Edit Entryspan>
  h2>

  div class="gv-notice">
    Entry Updated. a href="{back_link}">Return to Entrya>
  div>

  form method="post" id="gform_{form_id}" enctype="multipart/form-data">

    input type="hidden" name="is_gv_edit_entry" value="..." />

    div class="gform_wrapper gravity-theme">
      div class="gform_body">
        ul class="gform_fields">
          li class="gfield">
            label class="gfield_label">Field Labellabel>
            div class="ginput_container ginput_container_{field_type}">
              
            div>
          li>
        ul>
      div>

      div class="gform-footer">
        div id="publishing-action">

          
          input id="gform_previous_button_{form_id}"
                 class="btn btn-lg button button-large gform_button button-primary gv-button-previous"
                 type="submit" value="Previous" name="save" />

          
          input id="gform_next_button_{form_id}"
                 class="btn btn-lg button button-large gform_button button-primary gv-button-next"
                 type="submit" value="Next" name="save" />

          
          input id="gform_submit_button_{form_id}"
                 class="btn btn-lg button button-large gform_button button-primary gv-button-update"
                 type="submit" value="Update" name="save" />

          
          a class="btn btn-sm button button-small gv-button-cancel"
             onclick="history.go({-N}); return false;"
             href="{back_link}">
            Cancel
          a>

          
          a class="btn btn-sm button button-small alignright pull-right btn-danger gv-button-delete"
             onclick="{confirm_dialog}" href="{delete_url}">
            Delete
          a>

          input type="hidden" name="action" value="update" />
        div>
      div>
    div>

  form>
div>
```

### Cancel button behavior

The cancel button's `onclick` dynamically calculates how many history steps to go back based on how many times the entry has been updated in the current session. On first visit, it is `history.go(-1)`. After two updates, it becomes `history.go(-3)`. The formula is `(update_count + 1) * -1`. For multi-page (paged) forms, it uses `window.location.href` instead of `history.go()`.

### Button classes

**Update button:**

```
btn btn-lg button button-large gform_button button-primary gv-button-update
```

```
btn btn-lg button button-large gform_button button-primary gv-button-update
```

**Cancel button:**

```
btn btn-sm button button-small gv-button-cancel
```

```
btn btn-sm button button-small gv-button-cancel
```

**Delete button:**

```
btn btn-sm button button-small alignright pull-right btn-danger gv-button-delete
```

```
btn btn-sm button button-small alignright pull-right btn-danger gv-button-delete
```

**Previous/Next buttons (multi-page forms):**

```
btn btn-lg button button-large gform_button button-primary gv-button-previous
btn btn-lg button button-large gform_button button-primary gv-button-next
```

```
btn btn-lg button button-large gform_button button-primary gv-button-previous
btn btn-lg button button-large gform_button button-primary gv-button-next
```

### Success/error notices

After an entry is updated, a notice is displayed:

```

  Entry Updated. Return to Entry

```

```
div class="gv-notice">
  Entry Updated. a href="{back_link}">Return to Entrya>
div>
```

The notice can have an `error` class for validation failures:

```

  There was an error updating this entry.

```

```
div class="gv-notice error">
  There was an error updating this entry.
div>
```

### Gravity Forms CSS Ready Classes support

Edit Entry fully supports Gravity Forms CSS Ready Classes because the form is rendered using the native `GFFormDisplay::get_form()` engine. All standard GF layout classes work:

- `gf_left_half` / `gf_right_half` — Two-column layout
- `gf_left_third` / `gf_middle_third` / `gf_right_third` — Three-column layout
- `gf_inline` — Inline fields
- `gf_list_2col` / `gf_list_3col` etc. — Multi-column choice lists

The Gravity Forms 2.5+ "gravity-theme" wrapper is also included, providing the modern form styling framework. See [Gravity Forms CSS Ready Classes documentation](https://docs.gravityforms.com/css-ready-classes/) for the full list of available layout classes.

## Search bar widget

The search widget appears in the header widget zone of any layout. It supports horizontal and vertical layouts, various field types (text, select, date, number range), and optional clear buttons.

### Search layout classes

The search form uses one of two layout classes on the `` element:

- `.gv-search-horizontal` — Fields displayed side by side (horizontal layout)
- `.gv-search-vertical` — Fields stacked vertically (vertical layout)

These classes are set based on the "Search Layout" setting in the Search Bar widget configuration.

### Horizontal layout

**Class hierarchy:**

```
form.gv-widget-search.gv-search-horizontal.gv-search-rows
└── div.gv-widget-search-general-search.gv-grid
    ├── div.gv-grid-row
    │   └── div.gv-grid-col-1-1
    │       └── div.gv-search-widget-area.gv-search-horizontal
    │           ├── div.gv-search-box.gv-search-field-text.gv-search-field-search_all
    │           ├── div.gv-search-box.gv-search-field-select
    │           ├── div.gv-search-box.gv-search-date.gv-search-field-entry_date
    │           └── div.gv-search-box.gv-search-field-text
    └── div.gv-grid-row (submit row)
        ├── div.gv-grid-col-1-2
        │   └── div.gv-search-box.gv-search-box-submit
        │       ├── a.button.gv-search-clear (optional)
        │       └── input.button.gv-search-button
        └── div.gv-grid-col-1-2
            └── input[type=hidden][name=mode]
```

```
form.gv-widget-search.gv-search-horizontal.gv-search-rows
└── div.gv-widget-search-general-search.gv-grid
    ├── div.gv-grid-row
    │   └── div.gv-grid-col-1-1
    │       └── div.gv-search-widget-area.gv-search-horizontal
    │           ├── div.gv-search-box.gv-search-field-text.gv-search-field-search_all
    │           ├── div.gv-search-box.gv-search-field-select
    │           ├── div.gv-search-box.gv-search-date.gv-search-field-entry_date
    │           └── div.gv-search-box.gv-search-field-text
    └── div.gv-grid-row (submit row)
        ├── div.gv-grid-col-1-2
        │   └── div.gv-search-box.gv-search-box-submit
        │       ├── a.button.gv-search-clear (optional)
        │       └── input.button.gv-search-button
        └── div.gv-grid-col-1-2
            └── input[type=hidden][name=mode]
```

### Search box types

- **Text:** `div.gv-search-box.gv-search-field-text`
- **Search all:** `div.gv-search-box.gv-search-field-text.gv-search-field-search_all`
- **Select:** `div.gv-search-box.gv-search-field-select`
- **Multiselect:** `div.gv-search-box.gv-search-field-multiselect`
- **Checkbox:** `div.gv-search-box.gv-search-field-checkbox`
- **Radio:** `div.gv-search-box.gv-search-field-radio`
- **Link:** `div.gv-search-box.gv-search-field-link.gv-search-box-links`
- **Date:** `div.gv-search-box.gv-search-date.gv-search-field-entry_date`
- **Date range:** `div.gv-search-box.gv-search-date-range`
- **Number range:** `div.gv-search-box.gv-search-number.gv-search-number-range`

### Buttons

- **Submit:** `input.button.gv-search-button`
- **Clear:** `a.button.gv-search-clear`

### Active search state

The form receives `.gv-is-search` class when an active search is in progress.

### Advanced search

Advanced search sections use:

- `.gv-widget-search-advanced-search` — Container
- `.gv-search-advanced--open` — Expanded state

### HTML example

```

  
    
      
        

          
            
              Search entries
              
                
              
            
          

          
            Status
            
              
                —
                Active
                Inactive
              
            
          

          
            Filter by date:
            
              
            
          

        
      
    

    
      
        
          
            
          
        
      
      
        
          
        
      
    
  

```

```
form class="gv-widget-search gv-search-horizontal gv-search-rows"
      method="get" action="/your-view-page/#gv-view-47-1"
      data-viewid="47">

  div class="gv-widget-search-general-search gv-grid">
    div class="gv-grid-row">
      div class="gv-grid-col-1-1">
        div class="gv-search-widget-area gv-search-horizontal">

          div class="gv-search-box gv-search-field-text gv-search-field-search_all">
            div class="gv-search">
              label for="gv_search_47">Search entrieslabel>
              p>
                input type="search" name="gv_search" id="gv_search_47" value="">
              p>
            div>
          div>

          div class="gv-search-box gv-search-field-select">
            label for="search-box-filter_5">Statuslabel>
            p>
              select name="filter_5" id="search-box-filter_5">
                option value="" selected>—option>
                option value="Active">Activeoption>
                option value="Inactive">Inactiveoption>
              select>
            p>
          div>

          div class="gv-search-box gv-search-date gv-search-field-entry_date">
            label for="gv_start_date_47">Filter by date:label>
            p>
              input name="gv_start" id="gv_start_date_47" type="text"
                     class="gv-datepicker datepicker mdy hasDatepicker" value="">
            p>
          div>

        div>
      div>
    div>

    div class="gv-grid-row">
      div class="gv-grid-col-1-2">
        div class="gv-search-widget-area">
          div class="gv-search-box gv-search-box-submit">
            input type="submit" class="button gv-search-button" value="Search">
          div>
        div>
      div>
      div class="gv-grid-col-1-2">
        div class="gv-search-widget-area">
          input type="hidden" name="mode" value="any">
        div>
      div>
    div>
  div>

form>
```

## The `gv_class()` function

The `gv_class()` function (a wrapper for `GravityView_API::field_class()`) generates CSS classes for field containers. It is used across all layouts.

### How it works

The function builds an array of CSS classes from two sources:

1\. **Custom class setting** — If the field has a `custom_class` setting (configured in the View Editor), it is added with Merge Tag support

2\. **Field ID class** — Generates `gv-field-{form_id}-{field_id}` format

### Format pattern

```
gv-field-{form_id}-{field_id}
```

```
gv-field-{form_id}-{field_id}
```

### Concrete examples

| Form ID | Field ID | Generated Class |

|---|---|---|
| 1 | 5 | `gv-field-1-5` |
| 3 | 12 | `gv-field-3-12` |
| 1 | 1.3 | `gv-field-1-1.3` (Address Street sub-field) |
| 1 | 1.6 | `gv-field-1-1.6` (Address Country sub-field) |

### Complex fields (address sub-fields)

Address, Name, and other composite fields have sub-fields with decimal IDs:

- Address field 1, Street: `gv-field-1-1.3`
- Address field 1, Country: `gv-field-1-1.6`

### Cross-form fields (joins)

When a field comes from a different form than the View's primary form, an additional class is added:

```

  

```

```
div class="gv-field-1-5 gv-field-3-5">
  
div>
```

### Merge Tag CSS class conversion

Custom classes support Merge Tags. The field value is sanitized with `sanitize_html_class()`, which strips spaces and special characters.

**Example:**

Custom class `{Status:8}` where Status = "Office Manager" produces class `OfficeManager` (single class token, not two separate classes).

### Filter hook

The [`gravityview/field_output/context/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-field_output-context-.tag/) filter allows customization:

```
add_filter( 'gravityview/field_output/context/class', function( $class, $args, $context ) {
    return $class . ' my-custom-class';
}, 10, 3 );
```

```
add_filter( 'gravityview/field_output/context/class', function( $class, $args, $context ) {
    return $class . ' my-custom-class';
}, 10, 3 );
```

## Grid system

GravityView uses its own responsive grid system across all layouts and widgets.

### Grid column classes

| Class | Width | Description |
|---|---|---|
| `.gv-grid` | — | Grid container |
| `.gv-grid-row` | 100% | Grid row |
| `.gv-grid-col-1-1` | 100% | Full-width column |
| `.gv-grid-col-1-2` | 50% | Half-width column |
| `.gv-grid-col-1-3` | 33.3% | One-third width column |
| `.gv-grid-col-2-3` | 66.6% | Two-thirds width column |
| `.gv-grid-col-1-4` | 25% | Quarter-width column |
| `.gv-grid-col-1-6` | 16.6% | One-sixth width column |
| `.gv-grid-col-1-8` | 12.5% | One-eighth width column |

### Alignment classes

| Class | Description |
|---|---|
| `.gv-left` | Left-aligned content (widget zones, footers) |
| `.gv-right` | Right-aligned content (List layout footers) |

See also: [Adding Custom CSS Classes to fields or widgets](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-css-classes-to-fields-or-widgets/)

### Responsive behavior

Grid columns collapse to 100% width at:

- 320px (mobile portrait)
- 480px (mobile landscape)

## Other styles

### Back link

The back link appears on single-entry Views across all layouts:

```

  ← Go back

```

```
p class="gv-back-link">
  a data-viewid="47" href="/your-view-page/">← Go backa>
p>
```

### Pagination widget classes

- **Page links:** `.gv-widget-page-links` container 
    - `.page-numbers` — List and link class
    - `.page-numbers.current` — Current page
    - `.prev.page-numbers` — Previous button
    - `.next.page-numbers` — Next button

- **Pagination info:** `.gv-widget-pagination` ("Displaying X - Y of Z")
- **Page size:** `.gv-widget-page-size` container

### Sort indicator classes

Table layout column headers with sorting enabled use:

- `.gv-sort` — Base class on sort link
- `.gv-icon-caret-up-down` — Neutral sort state
- `.gv-icon-sort-asc` — Sorted ascending
- `.gv-icon-sort-desc` — Sorted descending

### No results state classes

- `.gv-no-results` — No entries wrapper
- `.gv-no-results-text` — Text message variant
- `.gv-no-results-form` — Embedded form variant
- `.gv-container-no-results` — Container modifier when no entries

### Other utility classes

- `.gv-powered-by` — "Powered by GravityView" credit
- `.gv-widgets-header` — Header widget zone
- `.gv-widgets-footer` — Footer widget zone

### Responsive breakpoints

**SCSS variables:**

- `$mobile-portrait`: 320px
- `$mobile-landscape`: 480px
- `$small-tablet`: 600px
- `$tablet-portrait`: 768px

**Behavior:**

- Grid columns collapse to 100% at 320px and 480px
- Table layout: `` and `` hidden at ≤575.98px; `` displayed as block
- Layout Builder: stacks at 768px
- Edit Entry: buttons stack at 400px

## CSS customization filters

### Container filters

**[`gravityview/render/container/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-render-container-class/)**

Modify the CSS class added to the wrapper `` of a View.

| Parameter | Type | Description |
|---|---|---|
| `$css_class` | `string` | Default: `gv-container gv-container-{view_id}`. Adds `gv-container-no-results` when no entries, `gv-hidden` when hidden until searched. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 1.5.4, 2.0*

```
add_filter( 'gravityview/render/container/class', function( $css_class, $context ) {
    return $css_class . ' my-custom-container';
}, 10, 2 );
```

```
add_filter( 'gravityview/render/container/class', function( $css_class, $context ) {
    return $css_class . ' my-custom-container';
}, 10, 2 );
```

**[`gravityview/view/wrapper_container`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-view-wrapper_container/)**

Modify the wrapper container HTML markup.

| Parameter | Type | Description |
|---|---|---|
| `$wrapper_container` | `string` | Wrapper container HTML markup. |
| `$anchor_id` | `string` | *(optional)* Unique anchor ID to identify the View. |
| `$view` | `\GV\View` | The View object. |

*Since: 2.15*

```
add_filter( 'gravityview/view/wrapper_container', function( $wrapper, $anchor_id, $view ) {
    return '{content}';
}, 10, 3 );
```

```
add_filter( 'gravityview/view/wrapper_container', function( $wrapper, $anchor_id, $view ) {
    return ' . esc_attr( $anchor_id ) . '" class="gv-template-table">{content}';
}, 10, 3 );
```

### Entry row filters

**[`gravityview/template/table/entry/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-template-table-entry-class/)**

Modify the class applied to each entry row in Table layout.

| Parameter | Type | Description |
|---|---|---|
| `$class` | `string` | The existing class. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 2.0.6.1*

```
add_filter( 'gravityview/template/table/entry/class', function( $class, $context ) {
    $entry = $context->entry->as_entry();
    if ( ! empty( $entry['is_starred'] ) ) {
        $class .= ' gv-featured-entry';
    }
    return $class;
}, 10, 2 );
```

```
add_filter( 'gravityview/template/table/entry/class', function( $class, $context ) {
    $entry = $context->entry->as_entry();
    if ( ! empty( $entry['is_starred'] ) ) {
        $class .= ' gv-featured-entry';
    }
    return $class;
}, 10, 2 );
```

**[`gravityview/template/table/entry/row/attributes`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-template-table-entry-row-attributes/)**

Filter the HTML attributes for a row in Table layout.

| Parameter | Type | Description |
|---|---|---|
| `$attributes` | `array` | The HTML attributes. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 2.0*

**[`gravityview/template/list/entry/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-template-list-entry-class/)**

Modify the class applied to each entry in List layout.

| Parameter | Type | Description |
|---|---|---|
| `$class` | `string` | The existing class. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 2.0.6.1*

**[`gravityview/template/layout-builder/entry/class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-template-layout-builder-entry-class/)**

Modify the class applied to each entry in Layout Builder layout.

| Parameter | Type | Description |
|---|---|---|
| `$class` | `string` | The existing class. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 2.46.2*

**[`gravityview_entry_class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview_entry_class/)** *(deprecated)*

Modify the class applied to an entry row. Use the layout-specific filters above instead.

| Parameter | Type | Description |
|---|---|---|
| `$class` | `string` | Existing class. Default: `alt` for odd rows, empty string for even rows. |
| `$entry` | `array` | Current entry being displayed. |
| `$view` | `\GravityView_View` | Current GravityView\_View object. |

### Field filters

**[`gravityview/field_output/context/{$tag}`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-field_output-context-.tag/)**

Filter content for a specific template tag placeholder. For CSS class customization, use the `class` tag: `gravityview/field_output/context/class`.

| Parameter | Type | Description |
|---|---|---|
| `$value` | `string` | The content to be shown instead of the `{{ tag }}` placeholder. |
| `$args` | `array` | Arguments passed to the function. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 1.11, 2.0*

```
add_filter( 'gravityview/field_output/context/class', function( $class, $args, $context ) {
    return $class . ' custom-field-class';
}, 10, 3 );
```

```
add_filter( 'gravityview/field_output/context/class', function( $class, $args, $context ) {
    return $class . ' custom-field-class';
}, 10, 3 );
```

**[`gravityview/field_output/args`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-field_output-args/)**

Modify the args before field output generation begins.

| Parameter | Type | Description |
|---|---|---|
| `$args` | `array` | Associative array; `field` and `form` are required. |
| `$passed_args` | `array` | Original associative array with field data. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 1.7, 2.0*

**[`gravityview_field_output`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview_field_output/)**

Modify the final rendered field HTML output.

| Parameter | Type | Description |
|---|---|---|
| `$html` | `string` | Existing HTML output. |
| `$args` | `array` | Arguments passed to the function. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 2.0*

**[`gravityview/field_output/pre_html`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview-field_output-pre_html/)**

Modify the field HTML template before placeholder replacement.

| Parameter | Type | Description |
|---|---|---|
| `$markup` | `string` | The HTML markup template. |
| `$args` | `array` | All args for the field output. |
| `$context` | `\GV\Template_Context` | The template context object. |

*Since: 1.11, 2.0*

### Search filters

**[`gravityview_search_class`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview_search_class/)**

Modify the CSS class for the search form.

| Parameter | Type | Description |
|---|---|---|
| `$search_class` | `string` | The CSS class for the search form. |

```
add_filter( 'gravityview_search_class', function( $search_class ) {
    return $search_class . ' custom-search-class';
});
```

```
add_filter( 'gravityview_search_class', function( $search_class ) {
    return $search_class . ' custom-search-class';
});
```

**[`gk/gravityview/search/widget/grid/column-class`](https://www.gravitykit.dev/docs/gravityview/filters/gk-gravityview-search-widget-grid-column-class/)**

Filter the CSS class for search widget grid columns.

| Parameter | Type | Description |
|---|---|---|
| `$column_class` | `string` | The CSS class for the column (e.g., `gv-grid-col-1-3`). |
| `$col` | `string` | The original column specification. |
| `$areas` | `array` | Array of areas within the column. |
| `$search_fields` | `\Search_Field_Collection` | The search fields collection. |

*Since: 2.44*

### DIY-specific filters

**`gravityview-diy/container`**

Changes the container element type (default: `'div'`). Return `false` or empty string to remove container.

```
add_filter( 'gravityview-diy/container', function() {
    return 'section'; // or '__return_false' to remove
});
```

```
add_filter( 'gravityview-diy/container', function() {
    return 'section'; // or '__return_false' to remove
});
```

**`gravityview-diy/wrap/multiple`**

Toggles entry wrapping in the multiple-entry view (default: `true`).

**`gravityview-diy/wrap/single`**

Toggles entry wrapping in the single-entry view (default: `true`).

**`gravityview-diy/container-tags`**

Modifies available container tag options for field wrapping.

Returns: array of `'tag' => 'LABEL'`

### Widget zone filters

**`gravityview/widgets/wrapper_css_class`**

Modify the CSS class applied to the widget zone wrapper `` (the `.gv-widgets-header` and `.gv-widgets-footer` containers).

| Parameter | Type | Description |
|---|---|---|
| `$css_class` | `string` | Default: `gv-grid gv-widgets-{zone}`. Adds `gv-widgets-no-results` when the View has no results. |
| `$zone` | `string` | Current widget zone: `header` or `footer`. |
| `$widgets` | `array` | Array of widget configurations for the current zone. |

*Since: 1.16.2*

```
add_filter( 'gravityview/widgets/wrapper_css_class', function( $css_class, $zone, $widgets ) {
    if ( 'header' === $zone ) {
        $css_class .= ' my-custom-header';
    }
    return $css_class;
}, 10, 3 );
```

```
add_filter( 'gravityview/widgets/wrapper_css_class', function( $css_class, $zone, $widgets ) {
    if ( 'header' === $zone ) {
        $css_class .= ' my-custom-header';
    }
    return $css_class;
}, 10, 3 );
```

### Other filters

**[`gravityview_lightbox_script`](https://www.gravitykit.dev/docs/gravityview/filters/gravityview_lightbox_script/)**

Override the lightbox script to enqueue. Default: `thickbox`.

| Parameter | Type | Description |
|---|---|---|
| `$script_slug` | `string` | If you want to use a different lightbox script, return the name of it here. |
| `$view` | `\GV\View` | The View object. |

*Since: 2.5.1*

```
add_filter( 'gravityview_lightbox_script', function( $script_slug ) {
    return 'my-lightbox-script';
}, 10, 2 );
```

```
add_filter( 'gravityview_lightbox_script', function( $script_slug ) {
    return 'my-lightbox-script';
}, 10, 2 );
```

**`gravityview_datatables_table_class`**

Modifies the CSS classes applied to the DataTables `` element.

| Parameter | Type | Description |
|---|---|---|
| `$classes` | `array` | Array of CSS class strings. |

```
add_filter( 'gravityview_datatables_table_class', function( $classes ) {
    $classes[] = 'my-custom-table-class';
    return $classes;
});
```

```
add_filter( 'gravityview_datatables_table_class', function( $classes ) {
    $classes[] = 'my-custom-table-class';
    return $classes;
});
```

## Related links

- [All about the View container](https://www.gravitykit.com/docs/gravityview/customizing-your-views/all-about-the-view-container/)
- [Adding custom CSS classes to fields or widgets](https://www.gravitykit.com/docs/gravityview/customizing-your-views/adding-custom-css-classes-to-fields-or-widgets/)
- [Gravity Forms CSS Ready Classes documentation](https://docs.gravityforms.com/css-ready-classes/)
- [DataTables styling documentation](https://datatables.net/manual/styling/)

- [GravityView developer documentation](https://www.gravitykit.dev/)