Bootstrap for DotVVM

Everybody loves Bootstrap, but who can remember
all those CSS classes and hierarchies of nested <div> elements
required to create a modal dialog?

Bootstrap for DotVVM is a collection of wrappers for all Bootstrap components.

  • More than 50 DotVVM controls wrapping all features of Bootstrap 3 and 4
  • Short syntax that is easy to remember
  • Great discoverability thanks to IntelliSense
  • Support of data-binding and validation

Get Trial
Show more

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}}
        <bs:Badge Visible="{value: MessagesCount > 0}">
            {{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}" />


  • The Bootstrap for DotVVM license is perpetual and includes 12 months of new features and updates since the date of purchase. The license can be renewed with a 25% discount.
  • The product is licensed on per-developer basis. Every team member who is actively working with a project that uses Bootstrap for DotVVM must have a license.
  • Continuous integration, build servers, test, staging and production deployments do not need to have a separate license - an account of any developer can be used on CI/build servers to restore the NuGet packages.
  • The product is distributed as a NuGet package using DotVVM Private NuGet Feed.
  • The license is valid for any software project the purchasing party owns, develops or participate on.