Bootstrap logo

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}" />
</bs:Form>

Bindable Lists

Lists and menus support data-binding and custom templates.

<bs:ListGroup DataSource="{value: Folders}">
    <ItemsContentTemplate>
        {{value: Name}}
        <bs:Badge Visible="{value: MessagesCount > 0}">
            {{value: MessagesCount}}
        </bs:Badge>
    </ItemsContentTemplate>
</bs:ListGroup>

Interactive Controls

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

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

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

<p>Time ({{value: SelectedValue}})</p>
<bs:Range MinValue="0" 
          MaxValue="24" 
          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:GridView>
<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}">
    <ContentTemplate>
        <p>Do you really want to delete the item?</p>
    </ContentTemplate>
    <FooterTemplate>
        <bs:Button Text="Delete" 
                   Type="Danger" 
                   Click="{staticCommand: Dialog = false}" />
    </FooterTemplate>
</bs:ModalDialog>

Licensing

  • 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.