With BForms you'll be able to build ASP.NET MVC web apps using Bootstrap's mobile-first approach and benefit from out of the box HTML5 controls with both client and server-side validation.

Razor HTML Helpers

BForms comes with HTML Extensions that cover all the HTML5 input types, single and multi select lists, date and time pickers, file upload, autocomplete, range pickers.

By decorating your models with BForms attributes you can easily define the behavior and UI appearance of each form field. Similar to DataAnnotations.DataType, BForms provides a BsControl attribute and a BsControlType enum that allows you to specify which type of input should be rendered by the Razor engine.

Form elements

# Control type Generic helper Specialized helper
1 TextBox BsInputFor BsTextBoxFor
2 TextArea BsInputFor BsTextAreaFor
3 Password BsInputFor BsPasswordFor
4 Url BsInputFor -
5 Email BsInputFor -
6 Number BsInputFor -
7 DatePicker BsInputFor -
8 TimePicker BsInputFor -
9 DateTimePicker BsInputFor -
10 CheckBox BsInputFor BsCheckBoxFor
11 RadioButton BsInputFor BsRadioButtonFor
12 ColorPicker BsInputFor -
13 Upload BsInputFor -
14 Autocomplete BsSelectFor -
15 DropDownList BsSelectFor BsDropDownListFor
16 DropDownListGrouped BsSelectFor -
17 ListBox BsSelectFor BsListBoxFor
18 ListBoxGrouped BsSelectFor -
19 TagList BsSelectFor BsTagListFor
20 TagListGrouped BsSelectFor -
21 CheckBoxList BsSelectFor -
22 RadioButtonList BsSelectFor -
23 DatePickerRange BsRangeFor -
24 TimePickerRange BsRangeFor -
25 DateTimePickerRange BsRangeFor -
26 Label - BsLabelFor
27 Validation tooltip - BsValidationFor
28 Description tooltip - BsDescriptionFor
29 Glyphicon font - BsGlyphicon and BsGlyphiconAddon
30 HTML Form - BsBeginForm

Controls

# Control Helper
1 Grid BsGridFor
2 Toolbar BsToolbarFor
3 Group Editor BsGroupEditorFor

JavaScript Components

BForms relies on several JS frameworks and components that are bundled in three file: component.js, widgets.js and plugins.js

External Javascript components

# JS Module name Bundle
1 jQuery v1.x jquery component.js
2 jQuery UI core jquery-ui-core component.js
3 Bootstrap v3.x bootstrap component.js
4 Amplify store amplify component.js
5 History.js used by Grid history-js component.js
6 jQuery File Upload used by bforms-fileupload jquery-fileupload component.js
7 Select2 customized for BForms select2 plugins.js
8 Typeahead typeahead plugins.js
9 ICanHaz used by DatePicker icanhaz plugins.js
10 Moment used by DatePicker moment plugins.js

BFroms jQuery Widgets

# Widget Module name Bundle
1 Ajax bforms.ajax bforms-ajax widgets.js
2 Grid bforms.grid bforms-grid widgets.js
3 Toolbar bforms.toolbar bforms-toolbar widgets.js
4 Panel bforms.bsPanel bforms-panel widgets.js
5 Group Editor bforms.bsGroupEditor bforms-groupEditor widgets.js
6 File Upload bforms.bsFileUpload bforms-fileupload widgets.js
7 Inline Question bforms.bsInlineQuestion bforms-inlineQuestion widgets.js

BFroms jQuery Plugins

# Plugin Module name Bundle
1 DatePicker date, time, datetime and range bforms-datepicker and bforms-datepicker-range plugins.js
2 RangePicker number range picker bforms-rangepicker plugins.js
3 Radio and Checkbox list bforms-radiolist and bforms-checklist plugins.js
4 ButtonGroupDropdown bforms-buttonGroupDropdown plugins.js
5 BformsTypeahead bforms-typeahead plugins.js
6 Validate jQuery validation adapted for BForms bforms-validate and bforms-validate-unobtrusive plugins.js

Internet explorer 7-8 compatibity pack

# JS Bundle
1 HTML5 Shiv iefix.js
2 Respond.js iefix.js

CSS styling

Things to know before you get started

BForms is based on Twitter Bootstrap, version 3.3.5

What changes have we been made to override Twitter Bootstrap?

  • Changed default font to Calibri
  • Removed all rounded corners
  • Used custom break-points in media-queries, that we have put to test
  • Glyphicon 1px to top fix
  • Fixed media-body width problem
  • Removed blue color from pagination

Using SASS or the compiled CSS

The component’s CSS is made using SASS. SASS makes CSS fun again. SASS is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

If you are not familiar with that you could use the compiled CSS otherwise here are some things to get you started: http://sass-lang.com

If you know CSS this won’t take you more than two hours or so to master the basics. Don’t worry, our CSS uses only variables and nesting.

Why did we use SASS over LESS (Twitter Bootstrap uses LESS)? Because updates are easier to maintain, you can write mixins for different screen sizes inside a class and overall SASS is more flexible.

When using our components make sure your site’s CSS is placed after ours. This way you will be able to override things more quickly.

Customizing CSS

Variables are used only to define the color scheme, so that you could change it accordingly to your site. You’ll find those variables in the top part of the CSS.

Here is what you have to look for:

$mainColor: #45ADA8; $navy: #547980; $Gray: #dadada;

You only need to replace the HEX color of the $mainColor variable to have a good integration with your site, or you could use some of our predefined color theme.

If you wish to use one of our color theme here’s what you have to do:

  1. Choose one of the colors. Based on these you can use a class named accordingly. The class names are: green, blue, orange, purple and black.
  2. Forms: look for form_container and add one of the classes mentioned before.
  3. Grid: look for grid_toolbar and grid_view and add one of the color classes. Here you can do more if you have more than one grid in the page you can theme them differently.
  4. Pagination: look for bs-pager and add one of the color classes.
  5. Date-time-picker: look for bs-datetime-picker. If you use the range-picker make sure to add the color class name to the bs-range-picker as well.