Use Bootstrap with WebGrid column?

Question

I've been searching for examples but can't seem to find how I can use Bootstrap inside of a grid column in order to create a button. The following works but I would like to display an Edit button instead of just the text.

@grid.GetHtml(tableStyle: "webgrid-table",
    headerStyle: "webgrid-header",
    rowStyle: "webgrid-row-style",
    alternatingRowStyle: "webgrid-alternating-row",
    selectedRowStyle: "webgrid-selected-row",
    footerStyle: "webgrid-footer",

    columns: grid.Columns(
        grid.Column(columnName: "CustomerName", header: "Customer Name"),
        grid.Column(columnName: "Subject", header: "Subject"),
        grid.Column(columnName: "CallDate", header: "Call Date"),
        grid.Column(columnName: "Status", header: "Status"),
        grid.Column(header: "Edit", format: (item) =>
        {
            var link = Html.ActionLink("Edit", "Edit", new { id = item.Id });
            return link;
        }),

Anyone know of an example I an look at to convert the Edit column to using a Bootstrap button?

Answer 1

Try adding the style argument for that specific column like so:

grid.Column(header: "Edit", format: (item) =>
{
    var link = Html.ActionLink("Edit", "Edit", new { id = item.Id });
    return link;
}, style: "btn btn-default")