How to only use the Bootstrap grid system and the default screen sizes
As many people I have used many times Bootstrap to do in my web projects, thus, Bootstrap is a also a good choice to convert an old site to a responsive site (necessary in these times with so many devices in the market). Someone might say that when is used Bootstrap, the website takes a very common style used today, losing originality and personality. Well, that’s true, but you can take Bootstrap only to use its grid system.
To obtain only the grid system you can go to official webpage and customice the library here , remember to uncheck all the things unless ‘Grid system’ on Common CSS. In other hand there are many github projects that offer only the grid, for example this .
Now you can take the css files and begin easily to make a responsive website using only this known grid system (without the common twitter style for headers, buttons, fields and so on).
Another good resource is to know quickly how many screen sizes are used in Bootstrap in order to change our styles when the Boostrap columns change according the resolution. Here you have the Bootstrap 3 version and 2 version.
Boootstrap 3 screen sizes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | /*================================================== = Bootstrap 3 Media Queries = ==================================================*/ /*========== Mobile First Method ==========*/ /* Custom, iPhone Retina */ @media only screen and (min-width : 320px) { } /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) { } /* Small Devices, Tablets */ @media only screen and (min-width : 768px) { } /* Medium Devices, Desktops */ @media only screen and (min-width : 992px) { } /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) { } /*========== Non-Mobile First Method ==========*/ /* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) { } /* Medium Devices, Desktops */ @media only screen and (max-width : 992px) { } /* Small Devices, Tablets */ @media only screen and (max-width : 768px) { } /* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) { } /* Custom, iPhone Retina */ @media only screen and (max-width : 320px) { } |
Boootstrap 2.3.2 screen sizes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | /*===================================================== = Bootstrap 2.3.2 Media Queries = =====================================================*/ @media only screen and (max-width : 1200px) { } @media only screen and (max-width : 979px) { } @media only screen and (max-width : 767px) { } @media only screen and (max-width : 480px) { } @media only screen and (max-width : 320px) { } |
