Bootstrap Grid Example: Medium devices


Medium devices the design may be better as a 50%/50% split.

Tip: Medium devices are defined as having a screen width from 992 pixels to 1199 pixels.

For medium devices we will use the .col-md-* classes.

Now we will add the column widths for medium devices:

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

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

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

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

	<div class="row">
		<div class="col-sm-3 col-md-6" 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 col-md-6" style="background-color:gray; 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>
</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.

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.


Share this article on