css - How container width is calculated in bootstrap for different devices -


i starting bootstrap , going through docs. right now, seems confusing , have queries follows:

  1. in grid options table, why container width less device width, why not equal device width e.g.small devices tablets (≥768px).

  2. how width 750px determined, why not 743px or 755px or other size. how did determine 750px container width.

  3. as given, bootstrap scales 12 columns gutter between columns , each column width ~62px , gutter 30px (15px on each side) therefore (12(cols)*62px ) + (11(gutters) * 15(width)) equals 909px instead of given 750px container width. why ?

this confusing me. plz show how container widths calculated different breakpoints , why container width not equal device width ?

thanks dk

the bootstrap .container used centered container, if want full-width on devices use .container-fluid

the 62px 62.5px @ small breakpoint. 62.5 x 12 = 750px, , includes 15px padding around each column. gutter within column since padding used (as opposed margin gutter outside column).

here's nice visual demo: http://www.codeply.com/go/sul9kw8kne

aside container width, take @ article bs3 grid


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -