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