> For the complete documentation index, see [llms.txt](https://rubanraj54.gitbook.io/vue-bootstrap4-table/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rubanraj54.gitbook.io/vue-bootstrap4-table/custom-classes.md).

# Custom classes

You can pass your classes for the table, row, cell, etc.. via **`classes`** prop. And interesting thing is you can pass a validator function to apply custom classes conditionally.

## Example

```javascript
<template>
    <div id="app">
        <vue-bootstrap4-table :classes="classes" 
                              :rows="rows" 
                              :columns="columns">
        </vue-bootstrap4-table>
    </div>
</template>

<script>
    import VueBootstrap4Table from 'vue-bootstrap4-table'
    export default {
        name: 'App',
        data: function() {
            return {
                rows: [
                    ...
                ],
                columns: [
                    ...
                ],
                classes: {
                    tableWrapper: "outer-table-div-class wrapper-class-two", 
                    table : {
                        "table-striped my-class" : true,
                        "table-bordered my-class-two" : function(rows) {
                            return true
                        }
                    },
                    row : {
                        "my-row my-row2" : true,
                        "function-class" : function(row) {
                            return row.id == 1
                        }
                    },
                    cell : {
                        "my-cell my-cell2" : true,
                        "text-danger" : function(row,column,cellValue) {
                            return column.name == "salary" && row.salary > 2500
                        }
                    }
                }
            }
        },
        components: {
            VueBootstrap4Table
        }
    }
</script>

```

Currently you can add custom classes to **`<div>,<table>, <tr> and <td>`** elements using tableWrapper, table, row, and cell properties respectively. Note: **`tableWrapper`** adds classes to **`<div>`** element outside **`<table>`** element.

You can either pass the custom classes directly or pass a function with your condition check to decide whether to apply to class or not.

For example, in the above example, look at the property **`cell`**. There we are applying classes **"my-cell my-cell2"** directly to **`<td>`** element and **"text-danger"** class only to the "salary" column & also the salary value should be above 2500.&#x20;