In the previous chapter, we created an empty ASP.NET Core project. In order to enable the built-in Visual Studio Scaffolding and because the new ASP.NET's approach is to only add the dependencies you need, we have to manually add the required dependencies to the project by completing the following tasks:

To scaffold an MVC View that will automatically include a Bootstrap table, follow these steps:

The preceding code initialized a new List object, called model, containing a collection of the ProductViewModel class. Five new ProductViewModel objects were created with sample product data and then added to the model list. The model list was then passed to the view.

To scaffold a view that will include a Bootstrap table containing the list of products we've created in the Index action, complete the following steps:

In the preceding markup, note the <table> element's class name is set to table. When you run the project and navigate to the products controller (for example, open this view), your table should be styled using the Bootstrap table styles as illustrated in the following screenshot:

Bootstrap provides additional classes with which you can style your tables to their desired appearance. To inverse the colors of the table, simply change the <table> element's class name to .table table-inverse. For example, the following table element, <table class="table table-inverse">, will produce the following table:

You also have the option to change the appearance of the table's header <thead> element to a lighter or darker color. Changing the <thead> element's class to .thead-inverse will result in the header using the current Bootstrap theme's inverse color (which, in the case of the default Bootstrap style, is darker).

To use the Bootstrap theme's default color for the table heading, simply set the <thead> element's class name to .thead-default, which will result in a table with a header using the Bootstrap theme's default color, which, in the case of the default Bootstrap theme, is a light gray color, as shown here:

To create a bordered table, add .table-bordered to its class name, for example:

<table class="table table-bordered"> 

To create a table where each odd row is highlighted with another color than the base color, change the table's class name to .table table-striped, as illustrated below:

<table class="table table-striped"> 

Lastly, Bootstrap also gives you the option to enable hover state on a table. This means the row that the user hovers their cursor over will be highlighted. To accomplish this, change the table class to .table table-hover, for example:

<table class="table table-hover"> 

All the different class names can be combined to create a zebra-striped, bordered table with hovering, as illustrated in the following markup:

<table class="table table-striped table-bordered table-hover"> 

The result will look similar to the following in your browser:

Bootstrap provides additional classes with which you can style either your table's rows or cells. Adding one of the following class names to either the <td> or <tr> element of your HTML table will highlight it in either grey, green, blue, orange, or red. These colors respectively represent the following:

Of course, you could also apply these styles dynamically to your MVC views. The ProductModel class has a Status property, which could be one of the five contextual Bootstrap classes. By setting the <tr> element's class to this property, the color of the rows in the table can be dynamically changed based on their data, as illustrated in the following markup:

<tbody> 
    @foreach (var item in Model) 
    { 
        <tr class="[email protected]"> 
            <td> 
                @Html.DisplayFor(modelItem => item.Discontinued) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.Name) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.Status) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.UnitPrice) 
            </td> 
            <td> 
                @Html.DisplayFor(modelItem => item.UnitsInStock) 
            </td> 
            <td> 
               <a asp-action="Edit" asp-route-id="@item.Id">Edit</a> | 
               <a asp-action="Details" asp-route-id="@item.Id">Details</a> | 
               <a asp-action="Delete" asp-route-id="@item.Id">Delete</a> 
            </td> 
        </tr> 
    } 
</tbody> 

In the preceding code, you will notice that the table row's class was set to [email protected]. This will cause the rows to be highlighted based on the mapping we've specified for the status property, as illustrated in the following screenshot:

To create a smaller table whose cell padding is halved, set the <table> element's class to .table table-sm as illustrated in the following code snippet:

<table class="table table-sm"> 

To change tables into responsive tables that scroll horizontally on small devices, set the <table> element's class to .table table-responsive, for example:

<table class="table table-responsive"> 

The change will only be visible on devices with a resolution smaller than 768 pixels, but no difference will be visible on larger displays.

Bootstrap 4 introduces a new style of button called Outline Buttons. To apply it to your buttons, simply add the .btn-*-outline class to the <button> element. For example, the following code creates a primary (blue) outline button:

<button type="button" class="btn btn-primary-outline">Primary</button> 

The preceding code will generate the following Bootstrap button: