Over a million developers have joined DZone.

Bootstrap Responsive Grid for Desktop and Mobile

· Java Zone

What every Java engineer should know about microservices: Reactive Microservices Architecture.  Brought to you in partnership with Lightbend.

The Bootstrap grid layout system is simple to use, it provides style classes that can be used to create different kinds of grid layout, ranging from one to twelve columns and with support for responsive layouts (where the layout of the grid changes based on the width of the screen, allowing the same content to be laid out on mobile and desktop devices). With the new Bootstrap 3 version, it design with the “mobile first” approach so you don’t need to include a separate css to support mobile instead Mobile first styles can be found throughout the entire library.

To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.

<meta name="viewport" content="width=device-width, initial-scale=1">

You can disable zooming capabilities on mobile devices by adding user-scalable=no to the viewport meta tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Creating Responsive Grids

The main use for responsive grids is to allow mobile devices and desktops to display the same content, taking advantage of whatever screen space is available. To create a responsive grid, use the col-* class on individual cells with one of the classes shown in Table below.

When the width of the screen is less than the class supports, the cells in the grid row are placed vertically rather than horizontally. Following is a html code to demonstrate the responsive grid.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Twitter Bootstrap responsive grid</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" />
<link href="css/bootstrap-theme.css" rel="stylesheet" />
	#gridContainer { padding: 20px; }
	.grid-row > div { 
		border: 1px solid lightgrey;
		padding: 10px;
		background-color: aliceblue;
		margin: 5px 0; 

<div class="panel">
	<h3 class="panel-header">Grid Layout</h3>
	<div id="gridContainer">
		<div class="row grid-row">
			<div class="col-sm-3">3</div>
			<div class="col-sm-4">4</div>
			<div class="col-sm-5">5</div>
		<div class="row grid-row">
			<div class="col-sm-6">6</div>
			<div class="col-sm-6">6</div>
		<div class="row grid-row">
			<div class="col-sm-11">11</div>
			<div class="col-sm-1">1</div>



Desktop Version

Mobile Version

Microservices for Java, explained. Revitalize your legacy systems (and your career) with Reactive Microservices Architecture, a free O'Reilly book. Brought to you in partnership with Lightbend.


Published at DZone with permission of Tousif Khan, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}