Bootstrap for DotVVM

Write less code to make a beautiful UI
with Bootstrap for DotVVM.

Short & readable syntax

Use smart components instead of complex hierarchies of nested <div> elements with various CSS classes.

Great MVVM experience

Use data-binding to generate menus, tabs, list groups, carousel images, or tables from collections in your viewmodel.

IntelliSense everywhere

Don't spend hours in the Bootstrap docs. The IntelliSense will help you discover all the features of each control.

Out-of-the-box styles

Just change <dot:GridView> to <bs:GridView> and enjoy beautifully styled tables with no more changes in your code.

More than 50 components

Bootstrap for DotVVM supports Bootstrap 3, 4 and 5.

Forms and Controls

Create nice and accessible forms using the Form control.

<bs:Form Validator.InvalidCssClass="is-invalid">
    <bs:TextBoxFormGroup LabelText="First Name"
                         Text="{value: FirstName}" />
    <bs:ComboBoxFormGroup LabelText="Category" 
                          DataSource="{value: Countries}"
                          SelectedValue="{value: SelectedCountry}" />

Bindable Lists

Lists and menus support data-binding and custom templates.

<bs:ListGroup DataSource="{value: Folders}">
        {{value: Name}}
            {{value: MessagesCount}}

Interactive Controls

Take advantage of DateTimePicker, InputGroup, Range and more form controls!

<bs:DateTimePicker SelectedDate="{value: PublishDate}" 
                   Mode="Date" />

        <bs:InputGroupLiteral Text="@" />
    <bs:InputGroupTextBox Text="{value: TwitterHandle}" />

<p>Time ({{value: SelectedValue}})</p>
<bs:Range MinValue="0" 
          SelectedValue="{value: SelectedValue}" />

GridView and DataPager

Presenting data has never been easier. Built-in DotVVM grid and pager controls are styled to Bootstrap look & feel.

<bs:GridView DataSource="{value: Customers}" Border="All">
    <dot:GridViewTextColumn HeaderText="Name" 
                            ValueBinding="{value: Name}"
                            AllowSorting />
    <dot:GridViewTextColumn HeaderText="Region" 
                            ValueBinding="{value: Region}" 
                            AllowSorting />
    <dot:GridViewTextColumn HeaderText="Created" 
                            ValueBinding="{value: CreatedOn}" 
                            AllowSorting FormatString="d" />
    <dot:GridViewTextColumn HeaderText="Credit" 
                            ValueBinding="{value: CreditAmount}" 
                            AllowSorting FormatString="c" />
<bs:DataPager DataSet="{value: Customers}" />

Modal Dialogs

Define your ModalDialog and control it by switching a boolean property in your viewmodel.

<bs:Button Text="Show Dialog" 
           Click="{staticCommand: Dialog = true}" />

<bs:ModalDialog HeaderText="Confirmation" 
                IsDisplayed="{value: Dialog}">
        <p>Do you really want to delete the item?</p>
        <bs:Button Text="Delete" 
                   Click="{staticCommand: Dialog = false}" />


What's the benefit of Bootstrap for DotVVM? Can't I just use Bootstrap CSS files
with the open-source DotVVM components?

Naturally, you can use just Bootstrap CSS with the open-source part of DotVVM.

Bootstrap for DotVVM helps you being more productive. You can achieve the same thing with less code and without the need to remember names of the CSS classes and how to compose them together.

Making a modal dialog in Bootstrap takes 19 lines of code, and it's extremely difficult to just write the code without looking in the docs. With Bootstrap for DotVVM, you'll type <bs:ModalDialog and the IntelliSense will help you discovering what options the modal dialog offers.

Bootstrap for DotVVM wraps all Bootstrap widgets into DotVVM components that support data-binding, validation and other features that you expect.

What Bootstrap versions are supported?

Right now, Bootstrap for DotVVM supports Bootstrap 3, 4 and 5.

The product is licensed on a per-developer basis, and you can use the license in an unlimited number of projects.

Is the license perpetual?

Definitely! Once you purchase the license, you can use the library forever without any restrictions.

You will also get 12 months of updates and bug fixes, so any time we add a new feature, you'll get it.

The product is licensed on a per-developer basis, and you can use the license in an unlimited number of projects.