Bootstrap 4 for DotVVM: Cheat Sheet

So, you have upgraded to the new Bootstrap 4 for DotVVM and now Visual Studio is spitting errors all over the place?

Bootstrap 4 for DotVVM was not designed to be drop in replacement for Bootstrap 3 for DotVVM. That said, we know that new projects are not started every day, and everybody deserves to work with the latest technologies.
So, we have prepared for you this Migration guide to Bootstrap 4 for DotVVM.

This migration guide contains quick overview of breaking changes in Bootstrap 4 for DotVVM. The full description and samples for each control can be found in documentation.

Accordion

Accordion items can be now created using DataSource.
Limited which controls can be used inside Accordion.

Breaking changes

• Accordion now can contain only AccordionItems.
• ExpandedPanelIndex was renamed to ExpandedItemIndex

Alert

Alert now has different set of colors.

Breaking changes

• Type – completely new set of supported colors

Badge

Old label is now badge. Therefore, badge now hove properties which were formally on label (eq. Type).
Badge is also now clickable (has properties such as Click, NavigateUrl, ...) and can be rendered as pill.

Breadcrumb

Added option which controls whether there should be link for active items.
Limited which controls can be used inside Breadcrumb.

Breaking Changes

• Breadcrumb now can contain only BreadCrumbItems

Button

Added new visual styles to button (eq. Outline only, ...) and new set of supported colors.

Breaking changes

• Type – completely new set of supported colors

ButtonGroup

ButtonGroup items can be now created using DataSource. Limited which controls can be used inside ButtonGroup.

Breaking changes

• ButtonGroup can only contain those items
• Button
• RouteLink
• DropownButton
• ButtonGroupRadioButton
• ButtonGroupCheckBox
• Removed IsJustified property

ButtonToolbar

New control which combines multiple ButtonGroups and InputGroups into single component.

Card

New flexible content container with support for various styles and features.

CardGroup

New Control which groups card controls.
Supports multiple modes (Deck, Group, Columns)

Carousel

Added support for new animation and option to enable/disable cycling of items.

Breaking changes

• EnableAnimation property was replaced by setting Animation property to None
• CaptionTemplateBinding renamed to CaptionTemplate

CheckBox

Added support for bootstrap custom style.

Breaking changes

• Type property was moved to ButtonGroupCheckbox

CloseButton

Collapsible

Lightweight replacement for no longer supported CollapsiblePanel.

CollapsiblePanel

CollapsiblePanel was completely rewritten, because it was replaced by Collapsible in Bootstrap.
CollapsiblePanel is now based on Cards.

Breaking Changes

• Due to massive changes nearly everything has changed.

See CollapsiblePanel documentation for current API.

ColorDecorator

Added support for setting text color.

Breaking changes

• Color renamed to BackgroundColor

Column

Added support for custom column count to Offset and Size properties.

Breaking changes

• Size and Offset properties are no string instead off int? . Supported values are positive numbers representing column count and value “auto”.

ColumnBreak

Moves next column to the next line.

ComboBox

ComboBox with support for sizing and form style.

Container

Breaking changes

• Removed CollumnCount property - it`s no longer needed due to changes in Column.

DataPager

DateTimePicker

DropDownButton

Added new ways how to configure behavior (whether to allow popup to flip, …) and appearance (Size, Menu alignment, …) of DropDown button.

Breaking changes

• DropDownType renamed to DropDirection
• ButtonTemplate renamed to ButtonContentTemplate

DropDownButtonHeader

Tag used for header is now configurable.

Form

It’s now possible to define size of all sizable inner controls.

Breaking changes

• LabelSizeXS renamed to LabelSize

CheckBoxGroup

Upgraded to support new FormGroup and CheckBox features.

Breaking changes

• Renamed to CheckBoxFormGroup
• Removed IsInline property.

ComboBoxGroup

Upgraded to support new FormGroup and ComboBox features.

Breaking changes

• Renamed to ComboBoxFormGroup
• ValueMember renamed to ItemValueBinding
• DisplayMember renamed to ItemTextBinding

DateTimePickerGroup

Upgraded to support new FormGroup features. Added Changed event binding.

FormStaticValue

This control is no longer needed.
When form contains only text element than the corresponding class is added automatically.

TextBoxGroup

Upgraded to support new FormGroup and ComboBox features.

FlexDecorator

New set of attached properties which allows easy configuration of elements position and alignment.

FormGroup

It’s now possible to set Label size directly to the FormGroup.
FormGroup can now utilize fieldset.

Breaking changes

• FormContent renamed to ContentTemplate

GlyphIcon

Bootstrap no longer contains any icons, therefore we decided to move GlyphIcon (FAIcons) control to separate package (in Dotvvm contribution).

GitHub link

GridView

It’s now possible to set theme of table AND theme of header individually.
Also due to merge with ResponsiveTable control it’s possible to make GridView responsive by changing single property.

Breaking changes

• Type property (flags enum) was replaced by individual properties for each option HasStripedRows, Border, HighlightRowOnHover and Size.

HelpText

Image

InputGroup

Limited which controls can be put to InputGroup.

Breaking changes

• InputGroup can only contain those items
• Side items
• InputGroupButton
• InputGroupDropDownButton
• InputGroupRadioButton
• InputGroupCheckBox
• InputGroupLinkButton
• InputGroupRouteLink
• InputGroupLiteral
• Center items
• InputGroupTextBox
• InputGroupComboBox

Jumbotron

Now can be set to occupy the entire horizontal space via IsFluid property.

Label

Old label is now badge, and old badge is gone.

LinkButton

Added new visual styles to button (eq. Outline only...) and new set of supported colors.

Breaking changes

• Type – completely new set of supported colors

ListGroup

ListGroup can be now set to fill parent container.
Limited which items can be put inside ListGroup.

Breaking changes

• ListGroup can now contain only ListGroupItems.

ListGroupItem

It’s now possible to insert your own badge into ListGroupItem.
Color – completely new set of supported colors

Breaking changes

• Badge is no longer string property, but inner property which accepts single badge control.

MediaList

Limited which items can be put inside MediaList

Breaking changes

• Only MediaObject controls are now supported inside MediaList.

MediaDefaultTemplate

MediaObject

Added support for nested MediaObjects. MediaObject can now have Click command set.

Breaking changes

• ImageTemplate was renamed to MediaTemplate
• HorizontalAlignment was renamed to Possition

MetaViewport

ModalDialog

Ways how to close modal dialog are now configurable (CloseOnEscape, CloseOnBackdropClick, … ).
Added way how to control whether the animation is used.

NavigationBar

Added support for scroll spy.
Limited which items can be put inside NavigationBar.

Breaking changes

• Navigation bar can now contain only ListItems
• IsFilled and IsJustified properties were replaced by VisualStyle property

NavigationItem

PageHeader

Panel

Popover

It is now possible to display popup as soon as page loads.

Breaking changes

• AutoPlacement was replaced by setting Placement to auto.
• Delay is now in fractions of second (double) instead of milliseconds (int).

ProgressBar

New set of supported colors.

Breaking changes

• IsAnimated and IsStriped were replaced with VisualStyle (enum) property.
• Color - completely new set of supported colors

RadioButton

Added support for bootstrap custom style

Breaking changes

• Type was moved to ButtonGroupRadioButton

Range

Form control used to select ranges of numbers.

ResponsiveEmbed

Added new aspect ratios.

Breaking changes

• Type – added OneByOne and TwentyoneByNine options to the enum.

ResponsiveNavigation

Added support for scroll spy.

Breaking changes

• Removed ContainerType
• IsInverted property was replaced by Theme
• IsResponsivelyCollapsing was replaced by setting MaximumScreenSizeBeforeCollapse to None
• IsStaticTop and FixedTo was replaced by ScrollBehavior enum
• LeftAlighnedItemsTeplate was renamed to LeftAlignedItems
• RightAlignedItemsTemplate was renamed to RightAlighnedItems

ResponsiveTable

Merged together with GridView

RouteLink

Added new visual styles to button (eq. Outline only...) and new set of supported colors.

Breaking changes

• Type – completely new set of supported colors

Row

Added support for gutters and different row types.

SimpleImage

Wrapper around html img tag.

StackedProgressbar

StyleDecorator

Was moved to separate package which will be released soon.

TabControl

Limited which items can be put inside NavigationBar.
Layout and visual style of TabControl is now configurable.

Breaking changes

• Tab control can now contain only Tab items

TabItem

It’s now possible to disable TabItem.

Breaking changes

• Removed IsActive property, active item is now set using ActiveTabIndex

Table

There is no need to have table when there is more powerful GridView

TextBox

TextBox with support for sizing and form style.

Thumbnail

Thumbnail is now one of supported types of image

Tooltip

Tooltips behavior is more configurable (Delay, Enabling animation, Enabling popup, ...) now.

Breaking changes

• Title is now required
• Position property was renamed to Placement

Well