Bootstrap Basic Tutorial

Bootstrap Plugins

Bootstrap Grid System Example: Medium and Large Devices Bootstrap CSS Coding Standards

Bootstrap Grid System Example: Stacked horizontally

Let's take a look at a grid example with a simple layout: two columns, each containing two paragraphs. (Styles are defined separately for each column here, but you can avoid doing this.)

Online Example

Example

<!DOCTYPE　html>
<html>
<head>
　　　<meta　charset="utf-8">
　　　<title>Bootstrap Example　-　Stacked horizontally</title>
　　　<link　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"　rel="stylesheet">
　　　<script　src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
　　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
	<h1>Hello, world!>/h1>
	<div class="row">
		<div class="col-md-6" style="background-color: #dedef8; box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>;
			<p>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.　
			</p>
			<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 class="col-md-6" style="background-color: #dedef8; box-shadow: inset　1px　-1px　1px #444, inset　-1px　1px　1px #444>;
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem　
			accusantium doloremque laudantium.
			</p>
			<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,　
			consectetur, adipisci velit, sed quia non numquam eius modi　
			tempora incidunt ut labore et dolore magnam aliquam quaerat　
			voluptatem.　
			</p>
		</div>
	</div>
</div>
</body>
</html>

Test and see ‹/›

The result is as shown below:

Details

<div>...</div>/div> Ensure the element is centered and the maximum width.
Once the container is added, the next thing you need to consider is adding by line units. <div>...</div>/div>, and add columns within the row <div></div>.
Each row in the grid is made up by 12 units to make up, you can use these units to define the size of columns. In our example, there are two columns, each column is made up by 6 units to make up, that is 6+6=12.

You can try other more options, such as <div></div> and <div></div> or <div></div> and <div></div>.

You can try it out, but make sure the total is always 12.

Bootstrap Grid System Example: Medium and Large Devices Bootstrap CSS Coding Standards