HowTos:Styling and CSS for Bootstrap, Angular and MVC

Styling and CSS for Bootstrap, Angular and MVC

This page was created by Wikiadmin on 2026-07-29. Last edited by Wikiadmin on 2026-07-29.

You can style Turnkey controls, images, and tables in Bootstrap, AngularJS, and MVC views by assigning CSS class names or inline style values from your ViewModel in MDriven Designer.

Use this page when you need data-dependent styling, such as highlighting a row, colouring one grid cell, or setting the size of an image. For application-wide themes, fonts, and layout structure, use HowTos:Styling and Theming Your Application and Documentation:Layout and CSS.

Choose the right styling mechanism

MDriven renders styling in two different ways. Choose the mechanism based on whether you need a CSS class or a literal HTML style value.

Mechanism	Use it for	Rendered result	Example
Style ref on a control or ViewModel column in MDriven Designer	Applying one or more CSS class names to that control or column	A class is applied through the rendered AngularJS class binding	Enter `warning` to use the Bootstrap warning class
ViewModel string attribute named CssClass	Styling a complete rendered table row with a CSS class	The attribute value is added as a class	Return `'warning'` for rows that require attention
ViewModel string attribute named Style	Styling a complete rendered table row with literal CSS declarations	Rendered as `style="..."`	Return `'background-color:#FFCC00;'`
ViewModel string attribute named <Column name>_CssClass	Styling one cell in each rendered table row with a CSS class	The value is added as a class to that cell	Use `Status_CssClass` to colour only the `Status` cell
ViewModel string attribute named <Column name>_Style	Styling one cell in each rendered table row with literal CSS declarations	Rendered as a style value for that cell	Use `Amount_Style` to set a cell background colour from data

Do not use a value intended as a CSS class in a Style attribute. For example, warning is a class name and belongs in CssClass or a control's Style ref. A Style value must be a valid CSS declaration such as background-color:yellow;.

Add a CSS class to a control in MDriven Designer

Use Style ref when a control should have a known CSS class, or when an OCL expression should select a class from the current data.

Open the relevant ViewModel in MDriven Designer.
Select the control, or select the ViewModel attribute that supplies a grid column.
Enter a class name or an OCL expression in Style ref.
Define the corresponding CSS rule in your application stylesheet when you use a custom class.
Run the view and verify the rendered control has the expected class.

For example, enter h3 in Style ref to apply Bootstrap's default heading presentation through the h3 class. Bootstrap also provides the default heading classes h1, h2, h3, and h4.

For a data-dependent class, the styling expression can choose between class names. The following OCL example returns a green or red class reference stored in the ViewModel:

self.ThingsAreSuperGreat->casetruefalse(selfVM.Styles.TheGreenStyle,selfVM.Styles.TheRedStyle)

This pattern separates the decision from the CSS definition: the OCL expression decides which class to use, while the stylesheet defines what that class looks like. See HowTos:Styling and Theming Your Application for StylesInModel and application theme guidance.

Format text without mixing formatting and styling

A Style ref may contain a section in braces. MDriven uses the content inside the braces as a format string and treats the remaining text as the style reference.

For example, h3{short} applies the h3 style reference and uses short as the date or time format.

Use the text-formatting tagged value when you need a format that remains robust and independent of style information. Do not make formatting depend on a CSS class when the format is part of the control's data presentation.

Style images

Images are rendered with the img-responsive class. If your CSS overrides that class, the responsive-image behavior is overridden.

Images outside grids

Pictures that are not in grids use the vmImage style class. Define a CSS rule for .vmImage when you need a consistent size for these images.

For example, a stylesheet can target all non-grid images:

.vmImage {
  width: 80px;
  height: 80px;
}

Images in grids

Pictures rendered in grids use vmImageInGrid by default. Define a CSS rule for .vmImageInGrid to set the default grid-image size.

.vmImageInGrid {
  width: 40px;
  height: 40px;
}

To style a particular image control or group of image controls differently, assign a custom class in Style ref in MDriven Designer and define that class in your stylesheet. For example, set Style ref to productThumbnail and add:

.productThumbnail {
  width: 64px;
  height: 64px;
}

Style tables from the ViewModel

You can style a full column, a complete row, or one cell. Use the current attribute naming conventions below.

Style an entire column

To style every cell in a column, select the ViewModel attribute that provides the column and set its Style ref in MDriven Designer.

For example, set the Style ref for an Amount column to amountColumn, then define the class in CSS:

.amountColumn {
  font-weight: bold;
}

Style an entire row

Add a string attribute to the ViewModel used by the table. Name it exactly CssClass to return a CSS class, or Style to return CSS declarations. Make its value depend on the row's data when required.

For example, a CssClass attribute can return warning for a row that needs attention. Bootstrap then supplies the appearance associated with its default warning class. Likewise, info uses the Bootstrap default info class.

Style one cell in a row

Add a string attribute using the exact name <Column name>_CssClass or <Column name>_Style. Replace <Column name> with the name of the rendered ViewModel column.

For example, if the rendered column is named Amount:

Add Amount_CssClass to return a class name such as warning.
Add Amount_Style to return declarations such as background-color:#FFCC00;.

This lets you highlight the Amount cell without changing the appearance of the other cells in the same row.

Set a colour from an OCL expression

Use a Style value when the model supplies the colour. The following OCL expression creates a CSS background colour from a cell colour value formatted as a six-digit hexadecimal value:

'background-color:#' + cell.ColourValue.toString('X6') + ';'

You can also return an HTML colour name, for example:

'background-color:yellow;'

The resulting value is an inline style declaration, not a CSS class. Use CssClass instead when you want the stylesheet to control the presentation.

Scope CSS to one ViewModel

Turnkey adds the ViewModel name as a CSS class high in the rendered HTML hierarchy. Use this class to prevent a rule from affecting other views.

For example, if the ViewModel is named WorkBoard, this rule hides the sidebar only for that view:

.WorkBoard #sidebar {
  visibility: hidden;
}

For the complete Turnkey DOM structure, layout selectors, and generic control-type classes, see Documentation:Layout and CSS.

CSS applies across AngularJS and MVC views

Turnkey uses AngularJS for ordinary pages by default. You can set the MVC=true tagged value on a ViewModel to render that ViewModel with MVC. The styling mechanisms described on this page apply to Turnkey-rendered controls; the rendering mode changes page behavior in other ways. See Documentation:MVC for MVC behavior and setup.

Contents