How Bootstrap 3 Gives an Edge with New Fangled Features rating not rated
SoftXML
                  Programming Books
                Open Web Directory
           SoftXMLLib | SoftEcartJS
xml products   Home page    contact    site map
Contact Us
Latest Blog Articles:   Latest SEO Articles | RSS Feed
DOM manipulation best practices
JavaScript Module Pattern
How to start developing with the Nextjs
Angular application structure
Write Guest Articles
Articles Archive




Loading...

The Art & Science of JavaScript ($29 Value FREE For a Limited Time)
The Art & Science of JavaScript ($29 Value FREE For a Limited Time)









How Bootstrap 3 Gives an Edge with New Fangled Features


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.

bootstrap 3

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.

Tag cloud

/* For }

</div>

<div (maxwidth (minwidth */ @media only

1000px){

1222px){

340px){

768

800px){

992

==========*/

Bootstrap

Desktops

Devices Devices</div> <div

Devices</div> </div> <div

Devices*/ @media only

Internet

Medium

Method

Resolution*/ @media only

Screens

Smallest

Tablets

Wide

Wordpress

browser

browsers

class="colmd6 class="colsm6 class="visiblelg class="visiblemd class="visiblexs

code

collg3"> collg3"> <div

column

columns constitutes

designers

desktop

desktops

development devices

example

fact

Rate This Article

No Comments comments

Post Comment

We love comments on this blog - they are as important as anything we write ourself. They add to the knowledge and community that we have here. If you want to comment then you�re more than welcome � whether you feel you are a beginner or an expert � feel free to have you say.



* = required
Leave a Reply
Name *:
Email *
(will not be published):
Website:
Comment *:
Human Intelligence Identification *:
What is the background color of this web page?
  
Close
Please enter a valid email Please enter a valid name Please enter valid email Please enter valid name Enter valid year
™SoftXML.   Privacy Statement  |  Article Archive  |  Popular Web Development Books
^Top