> For the complete documentation index, see [llms.txt](https://aurelia-ui-toolkits-1.gitbook.io/aurelia-v-grid-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aurelia-ui-toolkits-1.gitbook.io/aurelia-v-grid-docs/05.-optional-css-classes-for-custom-html.md).

# 05. Optional CSS classes for custom HTML

Here is the internal classes grid uses for when it generates the HTML cell markup for you in **"simple HTML"** and **"column.bind"**. If you use custom HTML columns you can use these to help you get started. Or if you use **"simple HTML"** columns and combine it with 1 custom HTML and need it to look the same.

## classes

#### checkboxes (header and rows):

* `vgrid-row-checkbox-100` (100% height)
* `vgrid-row-checkbox-50`  (50% height)

#### labels (headers):

* `vgrid-label-bottom`
* `vgrid-label-top`
* `vgrid-label-full`

#### image (rows):

* `vgrid-image-round`

#### inputs (rows):

* `vgrid-row-input`

#### inputs (header):

* `vgrid-header-input-bottom`
* `vgrid-header-input-top`

#### Sample:

![classes image](https://3239457875-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LA5Fey4Amfw1oMq1Lz0%2F-LA5FnD1RUupgMeQ4_Ms%2F-LA5Fsw6PbgY4bAQ65Rj%2Fcssclasses.png?generation=1523744754919627\&alt=media)

### Sample code from picture above

**checkbox**

```
<v-grid-col col-width="70">
  <v-header-template>
    <input class="vgrid-row-checkbox-50" v-header-menu="bool" type="checkbox" v-filter="bool|=">
    <p class="vgrid-label-bottom" v-sort="bool">Bool</p>
  </v-header-template>
  <v-row-template>
    <input class="vgrid-row-checkbox-100" v-row-menu="bool" type="checkbox" checked.bind="rowRef.bool">
  </v-row-template>
</v-grid-col>
```

**image**

```
<v-grid-col col-width="90">
  <v-header-template>
    <div style="height:50%"></div>
    <p class=" vgrid-label-bottom">Index</p>
  </v-header-template>
  <v-row-template>
    <image class="vgrid-image-round" v-image-fix v-row-menu="image" src.bind="rowRef.images"></image>
  </v-row-template>
</v-grid-col>
```

**text**

```
<v-grid-col col-width="100">
  <v-header-template>
    <input v-header-menu="number" class="vgrid-header-input-top" v-filter="number|>=" value.bind="tempRef.number">
    <p class="vgrid-label-bottom" v-sort="number">Number</p>
  </v-header-template>
  <v-row-template>
    <input v-row-menu="number" class="vgrid-row-input" 
      value.bind="rowRef.number | numberFormat  & updateTrigger:'blur':'paste'"
      css="color:${tempRef.numberColor};font-weight:${tempRef.numberFont}">
     </v-row-template>
</v-grid-col>
```

**selection (not is picture above)**

```
<v-grid-col col-width="30">
  <v-header-template>
    <input class="vgrid-row-checkbox-100" v-selection="header" type="checkbox">
  </v-header-template>
  <v-row-template>
    <input class="vgrid-row-checkbox-100" v-key-move v-selection="row" type="checkbox"
  </v-row-template>
</v-grid-col>

`
```