experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-caption-position
mode: provenance
representation: html
origin_response_id: aadaa87c36d9e915050aabae8fe5a4df
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.537Z
version_nonce: 588c03c8dfdb53f41fde1f3cae174f27
generated_at_utc: 2026-11-15T01:34:56.573Z
response_nonce: 67eaa72b276a9ee4b42e22bfb417d059

Caption Positioning

45 of 125
Add top or bottom positioning to your caption.
Result Full HTML CSS JS
Edit Download
This is a bottom position caption

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    body {
      background: #e6e6e6;
    }

    zing-grid[loading] {
      height: 277px;
    }
  </style>
</head>

<body>
  <zing-grid data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'>
    <!-- default is position top so we don't really need to set this attribute -->
    <zg-caption position="bottom">This is a bottom position caption</zg-caption>
  </zing-grid>
  <script>
    ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
  </script>
</body>

</html>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ZingGrid Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body>
    <zing-grid 
      data='[{"name": "Oreo","breed":"Mastiff"}, {"name": "Buddy","breed":"Greate Dane"}, {"name": "Max","breed":"Doodle"}]'>
    	<!-- default is position top so we don't really need to set this attribute --> 
      <zg-caption position="bottom">This is a bottom position caption</zg-caption>
    </zing-grid>
	</body>
</html>
body{background:#e6e6e6;}
// No JS code

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Demo Gallery