DOT

VVM

 DOCS

Version: 1.0 | 1.1 |

Container

in namespace DotVVM.Framework.Controls.Bootstrap

Represents the Bootstrap container.

Properties

Name Type Description Notes Default Value
ClientIDMode ClientIDMode Gets or sets the client ID generation algorithm.
attribute
inner element
static value
bindable
default
1
DataContext Object Gets or sets a data context for the control and its children. All value and command bindings are evaluated in context of this value.
attribute
inner element
static value
bindable
default
ID String Gets or sets the unique control ID.
attribute
inner element
static value
bindable
default
InnerText String Gets or sets the inner text of the HTML element.
attribute
inner element
static value
bindable
default
NumberOfColumns Int32 Gets or sets the number of columns in the Bootstrap column system. The default value is 12. Change this property if you are using a customized version of Bootstrap with different number of columns.
attribute
inner element
static value
bindable
default
12
Type ContainerType Gets or sets the type of the container - fluid or normal.
attribute
inner element
static value
bindable
default
0
Visible Boolean Gets or sets whether the control is visible.
attribute
inner element
static value
bindable
default
True

Events

Name Type Description

Usage & Scenarios

Renders a Boostrap container component.

http://getbootstrap.com/css/#grid

HTML Rendered by the Control

Sample 1: Fluid Container

The Container has the Type property which specifies the behavior of the Container for large page sizes.

The Normal type limits the maximum page width. If the window is wider, the content is not resized beyond the maximum width and it is centered.

The Fluid type always utilizes the available horizontal space.

<bs:Container Type="Fluid">
  <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Aenean vel massa quis mauris vehicula lacinia. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam erat volutpat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. In rutrum. Maecenas sollicitudin. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
  </p>
</bs:Container>

Sample 2: Custom Number of Columns

By default, the Bootstrap has 12 columns in the grid system. However, sometimes it may be wise to modify this value and customize Bootstrap to have a different number of columns. Because some controls (e.g. Form have to know the number of columns in the grid system, use the NumberOfColumns property.

<bs:Container NumberOfColumns="50">
  <bs:Column SizeXS="20" SizeLG="17">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Aenean vel massa quis mauris vehicula lacinia. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam erat volutpat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. In rutrum. Maecenas sollicitudin. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
  </bs:Column>
  <bs:Column SizeXS="30" SizeLG="33">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nulla. Aenean vel massa quis mauris vehicula lacinia. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Aliquam erat volutpat. Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. In rutrum. Maecenas sollicitudin. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.</p>
  </bs:Column>
</bs:Container>

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message