02.06.2015 Views

Bootstrap Tutorial

You also want an ePaper? Increase the reach of your titles

YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.

<strong>Bootstrap</strong> Grid System Example: Mobile, Tablet, Desktops<br />

We have seen an example for Medium and Large Device. Now let us take it to another level, where we would want<br />

to change it for the extra small phone size as well. Say we want to add the option for the columns to be split<br />

25%/75% for tablets, we go like this:<br />

....<br />

....<br />

Now this gives us 3 different column layouts at each point. On a phone, it will be 25% on the left, and 75% on the<br />

right. On a tablet, it will be 50%/50% again, and on a large viewport, it will be 33%/66%. 3 different layouts for each<br />

of the 3 responsive sizes. Check it out in the following example. (Here styling for each column is used. You can<br />

avoid it.)<br />

<br />

Hello, world!<br />

<br />

<br />

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do<br />

eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut<br />

enim ad minim veniam, quis nostrud exercitation ullamco laboris<br />

nisi ut aliquip ex ea commodo consequat.<br />

<br />

Sed ut perspiciatis unde omnis iste natus error sit voluptatem<br />

accusantium doloremque laudantium, totam rem aperiam, eaque ipsa<br />

quae ab illo inventore veritatis et quasi architecto beatae vitae<br />

dicta sunt explicabo.<br />

<br />

<br />

<br />

Sed ut perspiciatis unde omnis iste natus error sit voluptatem<br />

accusantium doloremque laudantium.<br />

<br />

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,<br />

consectetur, adipisci velit, sed quia non numquam eius modi<br />

tempora incidunt ut labore et dolore magnam aliquam quaerat<br />

voluptatem.<br />

<br />

<br />

<br />

TUTORIALS POINT<br />

Simply Easy Learning

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!