Bootstrap Grid Example: Small devices


Assume we have a simple layout with two columns. We want the columns to be split 25%/75% for small devices.

Tip: Small devices are defined as having a screen width from 768 pixels to 991 pixels.

For small devices we will use the .col-sm-* classes.

We will add the following classes to our two columns:

<div class="col-sm-3">....</div>
<div class="col-sm-9">....</div>

Now Bootstrap is going to say "at the small size, look for classes with -sm- in them and use those".

The following example will result in a 25%/75% split on small devices:

<div class="container-fluid">
	<h1>Hello World!</h1>

	<div class="row">
		<div class="col-sm-3" style="background-color:green; color:white">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
			incididunt ut labore et dolore magna aliqua.</p>
			<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
			aliquip ex ea commodo consequat.</p>
		</div>
		<div class="col-sm-9" style="background-color:gray; color:white">
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
			doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
			veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
		</div>
	</div>

</div>

Note

Make sure that the sum always adds up to 12!

Output

Hello World!

Resize the browser window to see the effect.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.


Share this article on