Package com.ebasetech.xi.api.controls

Interface BootstrapWidthProperties

All Known Subinterfaces:
BootstrapColumnControl
public interface BootstrapWidthProperties
The BootstrapWidthProperties interface represents the different widths used within the bootstrap framework.

This is the mechanism that is used to provide a responsive layout to a website, that adapts to different browser (or screen) sizes. The browser size may vary by the user shrinking its size manually or because it is constrained by the physical size of the screen (e.g. by a phone).

Bootstrap (by default) divides a 100% width into 12 'columns' and bootstrap widths are specified as a number of these columns. An individual element shouldn't be assigned more than a width of 12 (100%) but individual elements on to same line can add up to more then 12; bootstrap will wrap those elements on to the next line.

As the size of the screen changes the proportional width of these columns stays the same - a column is still 1/12th of the width of the browser. Bootstrap defines 5 breakpoints which are related to the size of the browser (as measured by the number of pixels). The first breakpoint is the default breakpoint which says any width over 0px. The next breakpoint comes into effect when the browser is (or is stretched to) a certain size, and the next at a larger, size, and so on.

This allows you to for a number of elements say (for example) that by default each element takes up full width of the browser (by setting the appropriate width property to 12) while setting a different width property which comes into force when the browser with is bigger, to be 6 (so there are 2 things are on the same line as each takes 50% of the browser width) and so on. If the browser is being stretched by the user then the elements will respond when the browser hits each breakpoint and re-organise themselves to take up the appropriate widths at that size.

By default bootstrap defines the following breakpoints (it is possible to customise these width by recompiling the bootstrap css but not the number of breakpoints): extra small : comes in when the browser is at least 0px wide (i.e. is the default). small : comes in when the browser is at least 576px wide. This represents a small screen width e.g. a phone. medium : comes in when the browser is at least 768px wide (i.e. is the default one) This represents a slightly bigger screen width, e.g. a tablet. large : comes in when the browser is at least 992px wide (i.e. is the default one). This represents a desktop-sized screen/browser. extra large : comes in when the browser is at least 1200px wide (i.e. is the default one). This represents an extra wide screen/browser

It is not required to fill in the widths for every breakpoint - you could define the extra-small widths and the medium widths - the extra small widths will be in force until the browser is at least 768px wide and then the widths of the medium breakpoint will be used.

Further documentation.

Since:
V5.4

  • Method Summary

    Modifier and Type Method Description
    java.lang.Integer getExtraLargeWidth()
    Gets the width for the large breakpoint.
    java.lang.Integer getExtraSmallWidth()
    Gets the width for the extra-small breakpoint.
    java.lang.Integer getLargeWidth()
    Gets the width for the large breakpoint.
    java.lang.Integer getMediumWidth()
    Gets the width for the medium breakpoint.
    java.lang.Integer getSmallWidth()
    Gets the width for the small breakpoint.
    void setExtraLargeWidth​(java.lang.Integer numberOfColumns)
    Sets the width for the large breakpoint.
    void setExtraSmallWidth​(java.lang.Integer numberOfColumns)
    Sets the width for the extra-small breakpoint.
    void setLargeWidth​(java.lang.Integer numberOfColumns)
    Sets the width for the large breakpoint.
    void setMediumWidth​(java.lang.Integer numberOfColumns)
    Sets the width for the medium breakpoint.
    void setSmallWidth​(java.lang.Integer numberOfColumns)
    Sets the width for the small breakpoint.

  • Method Details

    • getExtraSmallWidth

      java.lang.Integer getExtraSmallWidth()
      Gets the width for the extra-small breakpoint. Represents the col-XX classes.
      Since:
      V5.4

    • setExtraSmallWidth

      void setExtraSmallWidth​(java.lang.Integer numberOfColumns)
      Sets the width for the extra-small breakpoint. Represents the col-XX classes.
      Parameters:
      numberOfColumns - : a positive integer representing the number of column width to take up. Setting 0 will cause the underlying class not to be written out. -1 will make the column width be governed by the size of its child containers. -2 will make the column be assigned an equal width based on the remaining size.
      Since:
      V5.4

    • getSmallWidth

      java.lang.Integer getSmallWidth()
      Gets the width for the small breakpoint. Represents the col-sm-XX classes.
      Since:
      V5.4

    • setSmallWidth

      void setSmallWidth​(java.lang.Integer numberOfColumns)
      Sets the width for the small breakpoint. Represents the col-sm-XX classes.
      Parameters:
      numberOfColumns - : a positive integer representing the number of column width to take up. Setting 0 will cause the underlying class not to be written out. -1 will make the column width be governed by the size of its child containers. -2 will make the column be assigned an equal width based on the remaining size.
      Since:
      V5.4

    • getMediumWidth

      java.lang.Integer getMediumWidth()
      Gets the width for the medium breakpoint. Represents the col-md-XX classes.
      Since:
      V5.4

    • setMediumWidth

      void setMediumWidth​(java.lang.Integer numberOfColumns)
      Sets the width for the medium breakpoint. This represents the col-md-XX classes.
      Parameters:
      numberOfColumns - : a positive integer representing the number of column width to take up. Setting 0 will cause the underlying class not to be written out. -1 will make the column width be governed by the size of its child containers. -2 will make the column be assigned an equal width based on the remaining size.
      Since:
      V5.4

    • getLargeWidth

      java.lang.Integer getLargeWidth()
      Gets the width for the large breakpoint. Represents the col-lg-XX classes.
      Since:
      V5.4

    • setLargeWidth

      void setLargeWidth​(java.lang.Integer numberOfColumns)
      Sets the width for the large breakpoint. This represents the col-lg-XX classes.
      Parameters:
      numberOfColumns - : a positive integer representing the number of column width to take up. Setting 0 will cause the underlying class not to be written out. -1 will make the column width be governed by the size of its child containers. -2 will make the column be assigned an equal width based on the remaining size.
      Since:
      V5.4

    • getExtraLargeWidth

      java.lang.Integer getExtraLargeWidth()
      Gets the width for the large breakpoint. Represents the col-xl-XX classes.
      Since:
      V5.4

    • setExtraLargeWidth

      void setExtraLargeWidth​(java.lang.Integer numberOfColumns)
      Sets the width for the large breakpoint. This represents the col-xl-XX classes.
      Parameters:
      numberOfColumns - : a positive integer representing the number of column width to take up. Setting 0 will cause the underlying class not to be written out. -1 will make the column width be governed by the size of its child containers. -2 will make the column be assigned an equal width based on the remaining size.
      Since:
      V5.4