May 12, 2016

ASP.NET MVC view – Bootstrap styles for HTML select and input elements

Suggestions on how to style HTML <select> or <input> elements with Bootstrap CSS classes onASP.NET MVC 5 views.
.
This document was updated in February 2015.
.

In this document…

view-selectlist-styling-all-controlsHere are our suggestions on how to style HTML <select> or <input> elements with Bootstrap CSS classes on ASP.NET MVC 5 views.
.
This document will cover:
Dropdown list
Listbox – single select
Listbox – multi select
Radio button group
Checkbox group
.

Overview and styling to be done for all elements

Enclose the following in a div element, which is configured with a form-group class.
In the enclosure, add a label element, configured with control-label and col-md-2 classes.
Then, add another div element, configured with a col-md-10 class.
Assume that “Size” is a simple collection of strings. The controller passes an object that has a SelectList property configured with this data.
.

Dropdown list

Use an HTML Helper, DropDownList.
view-selectlist-styling-dropdown
.

Listbox – single select

Use an HTML Helper, DropDownList. Yes, DropDownList. However, add a “size” HTML attribute.
view-selectlist-styling-listbox-single-select
.

Listbox – multiple select

Use an HTML Helper, ListBox.
view-selectlist-styling-listbox-multi-select
.

Radio button group

The following will render a vertically-oriented radio button group.
Enumerate through the collection. Enclose each <input type=radio… element in a div element, configured with a radio class.
view-selectlist-styling-radio-button-group
.

Checkbox group

The following will render a vertically-oriented checkbox group (multi select).
Enumerate through the collection. Enclose each <input type=radio… element in a div element, configured with a checkbox class.
view-selectlist-styling-checkbox-group

0 comments:

Post a Comment

Nam Le © 2014 - Designed by Templateism.com, Distributed By Templatelib