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 on ASP.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

.

.

.

.

.

.

.

.

.

.

.

.

  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: