It is no hidden fact that Bootstrap can help websites click into the top gear right away. This avant-garde open source web framework comes with features and capabilities blazing, helping web developers and designers to take massive strides towards empowered web development. And its latest version is a further improvement over its previous installments, giving the same professionals a bona fide reason to stick around.
With Bootstrap 3, the biggest shift witnessed is in regards to the grid system. When Bootstrap 2 was built, it was built keeping in mind the platforms of both, the mobile devices and the desktops. It made sure that the website built on it should be compatible across all browsers of different devices.
However, with Bootstrap 3, things have changed. It now is about mobile-first, and not surprisingly so. With more and more Internet users leaning towards their mobile phones to access the Internet, it is only logical for the doers to prioritize mobiles more than anything else. In Bootstrap 2, the grid created works perfectly on the desktop screens, without any hassles. As and when the browser size falls below 767 pixels, the grids fall in a stack-like structure. In the latest Bootstrap installment, the grid system is attuned for the mobile devices.
Let us clarify the same with an example. If you have a website for which you need specifications like:
A single column on very small browser sizes
2 columns on sizes that range from small to medium
4 columns on devices that have relatively larger screens
Now that the grid system is in sync with mobile, the code for the same would be:
<div class="row">
<div class="col-sm-6 col-lg-3">
This constitutes the grid
</div>
<div class="col-sm-6 col-lg-3">
This constitutes the grid
</div>
<div class="col-sm-6 col-lg-3">
This constitutes the grid
</div>
<div class="col-sm-6 col-lg-3">
This constitutes the grid
</div>
</div>
We have already set the default value for the devices that are very small, so we don`t need to tinker with that part. The grid size for small devices has to be preset.
Knowing More About Grid Sizes
One of the highlights of the new-fangled grid system is the fact that as a website owner, you can have different grid size for different browsers. Here is how the sizes are defined as: The .col-xs-$ is for very small devices, i.e. the mobiles that have les than 768 pixel of resolution. The .col-sm-$ is for reasonably small devices Tablets that have the size greater than 768 pixels and less than 992 pixels. The .col-md-$ is for the devices that are medium sized and have a size between 992 pixels and 1200 pixels. And finally, we have the very large devices that have te resolution of greater than 122 pixels. For the same, we have .col-lg-$.
There is thus a lot of sense of structure to how the different grid sizes cater to different sized devices, and the same has a considerable effect on the overall process of web designing, as it gives the designers a more clear eyed idea of how to proceed.
In certain cases, media queries will give you a better idea of how you should work out the grid structure of your site. Let`s Get Introduced to the
Media Queries in Bootstrap 3:
/*========== Made-for-Mobile Method ==========*/
/* For iPhone Resolution*/
@media only screen and (min-width : 340px){
}
/* For the Smallest Devices*/
@media only screen and (min-width : 500px){
}
/* For medium sized Devices like Tablets */
@media only screen and (min-width : 800px){
}
/* For Bigger Devices like Desktops */
@media only screen and (min-width : 1000px){
/*
}
/* For Large Wide Screens */
@media only screen and (min-width : 1222px){
}
/*========== Desktop First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1222px){
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 1000px){
}
/* For medium sized Devices like Tablets */
@media only screen and (max-width : 800px){
}
/* For Smallest Devices*/
@media only screen and (max-width : 500px){
}
/* For iPhone Resolution*/
@media only screen and (max-width : 340px){
}
The above code proves to be helpful in the sense that it gives us a sense of structure while proceeding forward.
Let us also see an example of how we can have a website that has a single column on very small devices and on comparatively bigger devices like tablets , 2 columns on desktops screens with medium size, and 4 columns on very large desktop screens:
<div class="row"> <div class="col-md-6 col-lg-3"> <div class="visible-lg text-success">Huge Devices!</div> <div class="visible-md text-warning">Reasonably Big Devices!</div> <div class="visible-xs visible-sm text-danger">Small and Medium sized Devices</div> </div> <div class="col-md-6 col-lg-3"> <div class="visible-lg text-success"> Huge Devices!</div> <div class="visible-md text-warning">Reasonably Big Devices!</div> <div class="visible-xs visible-sm text-danger">Small and Medium sized Devices</div> </div> <div class="col-md-6 col-lg-3"> <div class="visible-lg text-success">Huge Devices</div> <div class="visible-md text-warning">Reasonably Big Devices</div> <div class="visible-xs visible-sm text-danger">Small and Medium sized Devices</div> </div> <div class="col-md-6 col-lg-3"> <div class="visible-lg text-success">Huge Devices!</div> <div class="visible-md text-warning">Reasonably Big Devices</div> <div class="visible-xs visible-sm text-danger">Small and Medium sized Devices</div> </div> </div>
As we open ourselves more to Bootstrap, the latest installment will continue to make website development a pleasant romp for us.
Author Bio:
Amy Brown is a Wordpress developer by calling and an essayist by distraction. She works for Wordprax Ltd., a Wordpress plugin development service provider company. Amy cherishes offering information with respect to Wordpress customization tips & traps.
