Bootstrap provides 260 glyphicons from the Glyphicons glyphicon set. Glyphicons can be used in text, buttons, toolbars, navigation, forms, etc.
<span class="glyphicon glyphicon-name"></span>
| pull-left | Floats an element to the left |
| pull-right | Floats an element to the right |
| center-block | Sets an element to display:block with margin-right:auto and margin-left:auto |
| clearfix | Clears floats |
| sr-only | Hides an element to all devices except screen readers |
| caret | Indicates dropdown functionality (will reverse automatically in dropup menus) |
Once you have completed coding the HTML page, you need to check whether all the contents are deing displayed properly or not. If any of the contents position is not satisfactory, you need to adjust them manually according to your preference. For this, you need to write different css properties to such contents under the media title for different screen size. Since, it's impossible to make a call for all screen sizes, we code them in a range. As the screen size increases, the requirement for extra css properties under media title decreases.
| Screen Size | Media Query |
| Max width 320px | @media (max-width: 320px) |
| Min width 321px and Max width 375 | @media (min-width: 321px) and (max-width: 375px) |
| Min width 376px and Max width 425 | @media (min-width: 376px) and (max-width: 425px) |
| Min width 426px and Max width 640 | @media (min-width: 426px) and (max-width: 640px) |
| Min width 641px and Max width 767 | @media (min-width: 641px) and (max-width: 767px) |
| Min width 768px and Max width 992 | @media (min-width: 768px) and (max-width: 992px) |
| Min width 993px and Max width 1024 | @media (min-width: 993px) and (max-width: 1024px) |
| Min width 1025px and Max width 1440 | @media (min-width: 1025px) and (max-width: 1440px) |
Leave a comment