BootstrapWidthProperties
BootstrapWidthProperties is one these types:
BootstrapWidthPropertiesBootstrapColumnControl
BootstrapWidthProperties Functions
| getExtraExtraLargeWidth | BootstrapWidthProperties.getExtraExtraLargeWidth( ) | Gets the width for the extra extra large breakpoint. |
| setExtraExtraLargeWidth | BootstrapWidthProperties.setExtraExtraLargeWidth( numberOfColumns ) | Sets the width for the extra extra large breakpoint. |
| getExtraLargeWidth | BootstrapWidthProperties.getExtraLargeWidth( ) | Gets the width for the large breakpoint. |
| setExtraLargeWidth | BootstrapWidthProperties.setExtraLargeWidth( numberOfColumns ) | Sets the width for the large breakpoint. |
| getExtraSmallWidth | BootstrapWidthProperties.getExtraSmallWidth( ) | Gets the width for the extra-small breakpoint. |
| setExtraSmallWidth | BootstrapWidthProperties.setExtraSmallWidth( numberOfColumns ) | Sets the width for the extra-small breakpoint. |
| getLargeWidth | BootstrapWidthProperties.getLargeWidth( ) | Gets the width for the large breakpoint. |
| setLargeWidth | BootstrapWidthProperties.setLargeWidth( numberOfColumns ) | Sets the width for the large breakpoint. |
| getMediumWidth | BootstrapWidthProperties.getMediumWidth( ) | Gets the width for the medium breakpoint. |
| setMediumWidth | BootstrapWidthProperties.setMediumWidth( numberOfColumns ) | Sets the width for the medium breakpoint. |
| getSmallWidth | BootstrapWidthProperties.getSmallWidth( ) | Gets the width for the small breakpoint. |
| setSmallWidth | BootstrapWidthProperties.setSmallWidth( numberOfColumns ) | Sets the width for the small breakpoint. |
BootstrapWidthPropertiesinterface 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 extra extra large : comes in when the browser is at least 1400px 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.