Bootstrap 4 for DotVVM Final Version Released

It has been a few months since we released the preview of Bootstrap 4 for DotVVM, a popular library that simplifies the syntax of Bootstrap widgets, brings data-binding support, and integrates with the rest of DotVVM platform.

Today, we have released its final version that works with DotVVM 2.1.

What’s Inside

Bootstrap 4 for DotVVM contains more than 60 controls representing all Bootstrap 4 widgets and visual components. All the controls support DotVVM data-binding, validation and other features of the framework, and thanks to DotVVM for Visual Studio, you are getting an awesome IntelliSense experience.

The syntax is much shorter and cleaner, and you don’t need to remember plenty of Bootstrap CSS classes. We have been able to use Bootstrap 4 without even looking in the documentation! The IntelliSense enables you to discover all the features of the controls by simply browsing the list of properties.

Compare the following code snippet where you can only get IntelliSense for HTML element names and CSS class names, but you need to rememeber which ones you need to use and how the hierarchy of <div> element looks like:

<!-- Without Bootstrap 4 for DotVVM -->
<div class="modal" tabindex="-1" role="dialog" id="exampleModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Modal body text goes here.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

With Bootstrap 4 for DotVVM, all you need to remember is that the modal dialog has a header, content and the footer. And you can control is using one boolean property in the viewmodel.

We have also fixed some bugs, added a few missing features of existing components, and introduced two new controls - Spinner and Toast.

And similarly to our Bootstrap 3 controls, there is the most favorite DateTimePicker control.

The license of Bootstrap for DotVVM includes the controls for both Bootstrap 3 and 4. You will see two NuGet package on your DotVVM NuGet Feed – DotVVM.Controls.Bootstrap (Bootstrap 3) and DotVVM.Controls.Bootstrap4 (Bootstrap 4).

If you’ve purchased the controls in past 12 months, you are getting the new version for free.

And by the way, there is an episode of DotVVM Minutes which shows how to use Bootstrap 4 with DotVVM, no matter whether you’ll have the controls or not.