GravityView 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.

Container wrapper
Table layout
List layout
Layout Builder layout
DataTables layout
Maps layout
DIY layout
Edit Entry
Search bar widget
The gv_class() function
Grid system
Other styles
CSS customization filters
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 <div> 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. See also: 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}

HTML example:

<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">
        <!-- Search widget -->
      </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 ID</span>
          </th>
          <th id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <span class="gv-field-label">Name</span>
          </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">12</td>
          <td id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <a href="/your-view-page/entry/12/">John Doe</a>
          </td>
        </tr>
        <tr class="" data-row="1">
          <td id="gv-field-1-id" class="gv-field-1-id" data-label="Entry ID">13</td>
          <td id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <a href="/your-view-page/entry/13/">Jane Smith</a>
          </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 ID</span>
          </th>
          <th id="gv-field-1-1" class="gv-field-1-1" data-label="Name">
            <span class="gv-field-label">Name</span>
          </th>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

Single entry

The single-entry view uses horizontal row orientation: each <tr> contains one field with the label in <th> and value in <td>.

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:

<p class="gv-back-link">
  <a data-viewid="47" href="/your-view-page/">← Go back</a>
</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 ID</span></th>
        <td>12</td>
      </tr>
      <tr id="gv-field-1-1" class="gv-field-1-1">
        <th scope="row"><span class="gv-field-label">Name</span></th>
        <td>John Doe</td>
      </tr>
      <tr id="gv-field-1-5" class="gv-section gv-field-1-5">
        <th scope="row"><span class="gv-field-label">Additional details</span></th>
        <td></td>
      </tr>
      <tr id="gv-field-1-8" class="gv-field-1-8">
        <th scope="row"><span class="gv-field-label">Photo</span></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 <td> spanning all columns:

<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">
      <!-- Gravity Forms form rendered here -->
    </td>
  </tr>
</tbody>

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

Table-specific notes

The gv_class() function generates .gv-field-{form}-{field} classes on <th> and <td> 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 <tbody>
Mobile responsive: <thead> and <tfoot> hidden at ≤575.98px; <td> elements use :before pseudo-elements with data-label attribute values

Filter: gravityview/template/table/entry/class modifies CSS class on each <tr> 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

HTML example:

<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 Doe</a>
      </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 Street</div>
      </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 Details</a>
        </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 <h3>)
Content zone does NOT have .gv-grid class
No footer zone
Fields may include span.gv-field-label

HTML example:

<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 back</a>
  </p>

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

    <div class="gv-list-view-title">
      <h3 class="gv-field-2-1">John Doe</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-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">
          <!-- Google Map canvas -->
        </div>
        <div id="gv-field-2-4" class="gv-field-2-4">
          123 Main Street<br>Springfield, Illinois 62701<br>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.com</a></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:[email protected]">[email protected]</a></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-4567</a></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 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

HTML example:

<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">
        <!-- Search widget here -->
      </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 Doe</a>
            </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, IL</div>
          </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 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:

<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 back</a>
  </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 created</span>
          <div class="gv-grid-value">September 16, 2025</div>
        </div>

        <div id="gv-field-3-1" class="gv-field-3-1">
          <span class="gv-field-label">Name</span>
          <div class="gv-grid-value">John Doe</div>
        </div>

        <div id="gv-field-3-6" class="gv-field-3-6">
          <span class="gv-field-label">Category</span>
          <div class="gv-grid-value">Full time</div>
        </div>

        <div id="gv-field-3-4" class="gv-field-3-4">
          <span class="gv-field-label">Location</span>
          <div class="gv-grid-value">Springfield, IL</div>
        </div>

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

      </div>
    </div>
  </div>
</div>

No results state

<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 modifies entry class.

DataTables layout

Multiple entries

The DataTables layout extends the Table layout with the 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)

HTML example:

<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">
        <!-- Search widget -->
      </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>CSV</span>
        </button>
        <button class="dt-button buttons-excel buttons-html5" type="button">
          <span>Excel</span>
        </button>
        <button class="dt-button buttons-print" type="button">
          <span>Print</span>
        </button>
        <button class="dt-button buttons-collection buttons-colvis" type="button">
          <span>Columns</span><span class="dt-down-arrow">&#x25BC;</span>
        </button>
      </div>

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

      <div class="dataTables_processing" role="status" style="display: none;">
        <div class="dataTables_processing_text">Loading data&hellip;</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">Name</span>
            </th>
            <th id="gv-field-4-3" class="gv-field-4-3 sorting" scope="col">
              <span class="gv-field-label">Department</span>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr class="odd">
            <td data-row-index="0" data-column-index="0" class="dtr-control">
              <a href="...">John Doe</a>
            </td>
            <td data-row-index="0" data-column-index="1">Engineering</td>
          </tr>
          <tr class="even">
            <td data-row-index="1" data-column-index="0" class="dtr-control">
              <a href="...">Emily Smith</a>
            </td>
            <td data-row-index="1" data-column-index="1">Marketing</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th class="gv-field-4-1" scope="col">
              <span class="gv-field-label">Name</span>
            </th>
            <th class="gv-field-4-3" scope="col">
              <span class="gv-field-label">Department</span>
            </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">Previous</a>
        <span>
          <a class="paginate_button current" aria-current="page">1</a>
        </span>
        <a class="paginate_button next disabled">Next</a>
      </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 for DataTables library classes.

External documentation: DataTables.net styling documentation

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;">
  <!-- Google Maps renders its internal DOM here -->
</div>

Entry listing

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

<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">Name</span>
        </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:

<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 62701</p>
  </div>
</div>

With image:

<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 Name</a>
    </h4>
    <p>Address details</p>
  </div>
</div>

Geolocation search

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

HTML example:

<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 Radius</label>
  </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><!-- location pin icon --></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">1</option>
      <option value="5" selected>5</option>
      <option value="10">10</option>
    </select>
    <select name="unit" class="gk-maps-search-current-geolocation-unit">
      <option value="km">Kilometers</option>
      <option selected value="mi">Miles</option>
    </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)
    ├── <div class="{css_classes}">Value</div> (with container tag)
    └── {Before HTML}{value}{After HTML} (with Before/After Output)

HTML example:

<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">[email protected]</div>
    <strong>Phone:</strong> 555-1234<br>
  </div>

  <div id="gv_diy_def456" class="gv-diy-view">
    Jane Smith
    <div class="custom-field-class">[email protected]</div>
    <strong>Phone:</strong> 555-5678<br>
  </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:

<p class="gv-back-link"><a href="/your-view-page/">&larr; Go back</a></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">[email protected]</div>
  <p>Full bio text here...</p>

</div>

No results state

<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

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

  <h2 class="gv-edit-entry-title">
    <span>Edit Entry</span>
  </h2>

  <div class="gv-notice">
    Entry Updated. <a href="{back_link}">Return to Entry</a>
  </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 Label</label>
            <div class="ginput_container ginput_container_{field_type}">
              <!-- Input elements -->
            </div>
          </li>
        </ul>
      </div>

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

          <!-- Previous button (multi-page forms only) -->
          <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" />

          <!-- Next button (multi-page forms only) -->
          <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" />

          <!-- Update button -->
          <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" />

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

          <!-- Delete button (added by Delete Entry extension) -->
          <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

Cancel button:

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

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

Success/error notices

After an entry is updated, a notice is displayed:

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

The notice can have an error class for validation failures:

<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 for the full list of available layout classes.

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 <form> 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]

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

<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 entries</label>
              <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">Status</label>
            <p>
              <select name="filter_5" id="search-box-filter_5">
                <option value="" selected>—</option>
                <option value="Active">Active</option>
                <option value="Inactive">Inactive</option>
              </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}

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">
  <!-- Field ID 5 from form 3, displayed in form 1's View -->
</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 filter allows customization:

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)

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:

<p class="gv-back-link">
  <a data-viewid="47" href="/your-view-page/">← Go back</a>
</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: <thead> and <tfoot> hidden at ≤575.98px; <td> displayed as block
Layout Builder: stacks at 768px
Edit Entry: buttons stack at 400px

CSS customization filters

Container filters

gravityview/render/container/class

Modify the CSS class added to the wrapper <div> 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 );

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 '<section id="' . esc_attr( $anchor_id ) . '" class="gv-template-table">{content}</section>';
}, 10, 3 );

Entry row 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 );

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

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

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 (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}

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 );

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

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

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

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';
});

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
});

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'

gravityview/widgets/wrapper_css_class

Modify the CSS class applied to the widget zone wrapper <div> (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 );

Other 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 );

gravityview_datatables_table_class

Modifies the CSS classes applied to the DataTables <table> 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;
});

GravityView CSS guide

Table of contents

Container wrapper

Table layout

Multiple entries

Single entry

No results state

Table-specific notes

List layout

Multiple entries

Single entry

No results state

Layout Builder layout

Multiple entries

Single entry

No results state

DataTables layout

Multiple entries

Separating GravityView classes from DataTables library classes

Single entry

Maps layout

Map container

Entry listing

Info window structure

Geolocation search

Maps-specific classes

DIY layout

Multiple entries

Single entry

No results state

Available filters

Edit Entry

Complete structure

Cancel button behavior

Button classes

Success/error notices

Gravity Forms CSS Ready Classes support

Search bar widget

Search layout classes

Horizontal layout

Search box types

Buttons

Active search state

Advanced search

HTML example

The gv_class() function

How it works

Format pattern

Concrete examples

Complex fields (address sub-fields)

Cross-form fields (joins)

Merge Tag CSS class conversion

Filter hook

Grid system

Grid column classes

Alignment classes

Responsive behavior

Other styles

Back link

Pagination widget classes

Sort indicator classes

No results state classes

Other utility classes

Responsive breakpoints

CSS customization filters

Container filters

Entry row filters

Field filters

Search filters

DIY-specific filters

Widget zone filters

Other filters

Related links

Related Articles

The `gv_class()` function