Implement Styles

3 minutes to read Download PDF Edit

1 Introduction

This page contains useful class names that can be used to make your app more beautiful without writing CSS.

This how-to will teach you how to do the following:

  • Use class names to implement text and background colors, typography, buttons, list views, alerts, and other elements

2 Text Colors

Add these classes to an element to change the text color to your theme colors

  • text-default: default text color
  • text-primary: primary brand color
  • text-info: info brand color
  • text-success: success brand color
  • text-warning: warning brand color
  • text-danger: danger brand color

These are standard useful text colors

  • text-white: white text
  • text-black: black text
  • text-gray-primary: primary gray text
  • text-gray: gray text
  • text-gray-dark: dark gray text
  • text-gray-darker: darker gray text
  • text-gray-light: light gray text
  • text-gray-lighter: lighter gray text

3 Background Colors

The background colors are based on your theme colors. These are the same colors as for the buttons:

  • background-primary: primary background color
  • background-info: info background color
  • background-success: success background color
  • background-warning: warning background color
  • background-danger: danger background color

A lighter variant of the background color also sets the matching foreground color:

  • bg-primary: primary background color
  • bg-info: info background color
  • bg-success: success background color
  • bg-warning: warning background color
  • bg-danger: danger background color

These are background colors for your layout:

  • background-layout: default layout background
  • background-layout-secondary: alternative layout background
  • background-default: default layout background
  • background-default-dark: dark layout background
  • background-default-darker: darker layout background
  • background-default-light: light layout background
  • background-default-lighter: lighter layout background

4 Typography

These are useful classes for text items:

  • text-normal: normal text
  • text-bold: bold text
  • text-spacing: adds spacing to the text bottom and top
  • text-lined: underlines the text-lined
  • text-break: breaks text over multiple lines
  • text-uppercase: transforms the text to upper case
  • text-lowercase: transforms the text to lower case
  • text-capitalize: capitalizes every word

To align texts, add these to the container holding the text:

  • text-right: aligns the text to the right
  • text-center: aligns the text to the center
  • text-left: aligns the text to the left (default)

Other:

  • nowrap: don’t wrap texts

5 Buttons

  • btn-lg: large button
  • btn-sm: small button
  • btn-block: spans the full width of the parent
  • btn-bordererd: bordered button
  • btn-transparent: transparent background
  • btn-image: transparent button with image nicely align
  • btn-right: aligns the button to the right
  • btn-attached-right: adds left margin
  • btn-attached-left: adds right margin
  • btn-attached-bottom: adds top margin
  • btn-attached-top: adds bottom margin

6 Layout

  • v-center: vertically aligns elements in a Bootstrap row; add this class on a row in a layout grid
  • no-gutter: removes padding for Bootstrap columns; add this class on a row in a layout grid

For phones, also add col-x-N (where N is the size of the column) to the layout grids to make the columns appear next to each other.

Also see Bootstrap CSS Grid Options.

7 List View

  • listview-lined: list view widget with only a bordered bottom in a list view item
  • listview-striped: list view widget with striped listview items
  • listview-seperated: list view widget with list view items seperated
  • listview-stylingless: list view widget without spacing and background

8 Alerts

Create alerts with standard containers.

  • alert: makes an alert of a container; use in combination with the next classes
  • alert-success: creates a success alert
  • alert-info: creates a info alert
  • alert-warning: creates a warning alert
  • alert-danger: creates a danger alert

Also see Bootstrap Alert Component.

9 Other

  • tab-mobile: makes the tab full width and stick to the header

10 More Bootstrap

Many of these classes are part of Bootstrap. For more information about classes and Bootstrap, see Bootstrap CSS.

Copyright © Mendix. All rights reserved. | Mendix.com | Terms of Use | Privacy Policy