More than 50 components
Bootstrap for DotVVM supports Bootstrap 3, 4 and 5.
Form Controls
Data controls
Interactivity
Form Controls
Data controls
Interactivity
Form Controls
Data Controls
Interactivity
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>
{{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>FAQ
What's the benefit of Bootstrap for DotVVM? Can't I just use Bootstrap CSS files
with the open-source DotVVM components?
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.
Explore other products
Boost your productivity with the ultimate tools.
Explore our products and find out how they save you hours of your time.
