Bootstrap

The technology

• In the authoring and layout system TUCAL the framework Bootstrap (version 3.x) is used for the presentation of the web pages
• The whole functionality of Bootstrap 3.x can be used, partly elements are adapted to the Corporate Design
• View the detailed documentation of Bootstrap

The Grid System

• Grid layout is similar to a table, but more flexible and better suited for responsive web design
  Explanation of the grid system in TUCAL
• Grid consists of 12 columns
  • Suffix of the CSS class indicates the width of the element in number of columns
  • "col-xm-6" results in a width of: 6/12 = 50%
• display of content can be changed step by step, depending on the available width of the display
  Description

  Range

  xs

  from 320px (0px)

  xm

  from 550px

  sm

  from 801px

  md

  from 992px

  lg

  from 1200px
• Assignment of the width of the element via CSS classes,
  multiple classes possible for different size displays

  <div class="row">
    <div class="col-xm-6">Lorem ipsum …</div>
    <div class="col-xm-6">Lorem ipsum …</div>
  </div>

• Basically it is enough to work with the size xm – appearance on desktops and tablets as usual, on smartphones all contents are displayed one below the other
• Examples for demonstration the Bootstrap Grid system