Responsive Design on which component should be responsive - html

Question

I use Twitter bootstrap framework for designing my Web application. When i think about responsive design is it all about designing my layout responsively or should i also think about Text box, Labels, Buttons and other components to be responsive as screen gets bigger.
And which would be the best resolutions that i should follow to create a responsive design, where i could notice all most there are number of devices that keep evolving with different resolutions every day.
Currently i have developed my app which is responsive with layouts, text box, buttons, labels and headers on all resolutions between 1024 -1439, 1440- 1659, 1660 - 1920.
and less than 1024 and Greater than 1920px.
And how should i use scaling on responsive design.
I would like to know if this is the industry standards or is there anything else should i keep in mind before developing Web Application.

Answer 1

Twitter's Bootstrap is responsive by default. This include all components and the grid(s).
To find your answer, please first study http://getbootstrap.com/css/#grid
Twitter's Bootstrap defines four grids. The largest grid has a max container
size of 1170px.
The large (col-lg-*) is bound by:
/* Large devices (large desktops, 1200px and up) */
#media (min-width: #screen-lg-min) { ... }
Your design requires a larger grid, for at least 1920px and up.
Where 1920x1080 seems to be an industrial standard: http://en.wikipedia.org/wiki/1080p
According Bootstrap's grid definitions, i expect you should extend the grids with a larger grid. See also:
See also Bootstrap 3 - 940px width grid?,
Twitter's Bootstrap 3 grid, changing breakpoint and removing padding
To add and extra grid, download Bootstrap's LESS files from: https://github.com/twbs/bootstrap/tree/master/less, add a extra grid() and recompile your CSS.
In grid.less replace:
//or define in variables.less
#screen-superlg: 1920px;
#screen-superlg-min: #screen-lg;
// Large screen / wide desktop
//or define in variables.less
#container-superlarge-desktop: ((1860px + #grid-gutter-width));
#container-superlg: #container-superlarge-desktop;
.container {
.container-fixed();
#media (min-width: #screen-sm) {
width: #container-sm;
}
#media (min-width: #screen-md) {
width: #container-md;
}
#media (min-width: #screen-lg-min) {
width: #container-lg;
}
/* Larger devices (HD TV, 1920px and up) */
#media (min-width: #screen-superlg-min) {
width: #container-superlg;
}
}
and add:
// Super Large grid
//
// Columns, offsets, pushes, and pulls for the hd tv device range.
#screen-lg-max: (#screen-superlg-min - 1); // define in variables.less
#media (min-width: #screen-superlg-min) {
.make-grid-columns-float(superlg);
.make-grid(#grid-columns, superlg, width);
.make-grid(#grid-columns, superlg, pull);
.make-grid(#grid-columns, superlg, push);
.make-grid(#grid-columns, superlg, offset);
}
After doing this you can use the new Super Large grid by using col-superlg-* grid column classes.
After this you should also have te extend the Responsive utilities (http://getbootstrap.com/css/#responsive-utilities) defined in less/responsive-utilities.less.