Overview

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.

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:

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.

Forms: look for form_container and add one of the classes mentioned before.

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.

Pagination: look for bs-pager and add one of the color classes.

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.