Columns

Bootstrap Grid

Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-8
.col-md-4
.col-md-4
.col-md-4
.col-md-4
.col-md-6
.col-md-6
Show code
		<div class="row">
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		  <div class="col-md-1">.col-md-1</div>
		</div>
		<div class="row">
		  <div class="col-md-8">.col-md-8</div>
		  <div class="col-md-4">.col-md-4</div>
		</div>
		<div class="row">
		  <div class="col-md-4">.col-md-4</div>
		  <div class="col-md-4">.col-md-4</div>
		  <div class="col-md-4">.col-md-4</div>
		</div>
		<div class="row">
		  <div class="col-md-6">.col-md-6</div>
		  <div class="col-md-6">.col-md-6</div>
		</div>
	
Copy code

Full width

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, velit, quos, perferendis consequatur placeat quis nihil dignissimos accusamus earum ea error eveniet nam aut iusto soluta illo nulla sapiente explicabo!
Show code
		<div class="col-md-12">text</div>
	
Copy code

Half width

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea, mollitia, beatae, corporis, eius officiis eaque porro at obcaecati distinctio dolorem alias inventore maxime suscipit esse aliquam perspiciatis nulla eum nisi.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius, numquam, sit laborum dignissimos nostrum nisi sapiente sint provident debitis voluptate. Minima, adipisci alias deserunt dolores accusantium porro illum fugit laborum.
Show code
		<div class="col-md-6">text</div>
		<div class="col-md-6">text</div>
	
Copy code

One third

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, earum, repellat, illo porro ipsum consequatur dolorum neque voluptate adipisci accusantium vero tenetur inventore consectetur consequuntur praesentium similique soluta dolore magnam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, quidem, incidunt, maxime rem sequi doloribus excepturi quibusdam eveniet vitae delectus recusandae voluptatum cumque adipisci repudiandae sint laboriosam animi id facilis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, earum sed et fugit perspiciatis maxime. Deleniti, dicta, neque sit accusamus ipsam assumenda velit. Minus, obcaecati ratione iure magni impedit possimus.
Show code
		<div class="col-md-4">text</div>
		<div class="col-md-4">text</div>
		<div class="col-md-4">text</div>
	
Copy code

Two thirds One third

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, earum sed et fugit perspiciatis maxime. Deleniti, dicta, neque sit accusamus ipsam assumenda velit. Minus, obcaecati ratione iure magni impedit possimus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, earum sed et fugit perspiciatis maxime.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, earum sed et fugit perspiciatis maxime.
Show code
		<div class="col-md-8">text</div>
		<div class="col-md-4">text</div>
	
Copy code

One quarter

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, earum, repellat, illo porro ipsum consequatur dolorum neque voluptate adipisci accusantium vero tenetur inventore consectetur consequuntur praesentium similique soluta dolore magnam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, quidem, incidunt, maxime rem sequi doloribus excepturi quibusdam eveniet vitae delectus recusandae voluptatum cumque adipisci repudiandae sint laboriosam animi id facilis!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, earum sed et fugit perspiciatis maxime. Deleniti, dicta, neque sit accusamus ipsam assumenda velit. Minus, obcaecati ratione iure magni impedit possimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam, earum sed et fugit perspiciatis maxime. Deleniti, dicta, neque sit accusamus ipsam assumenda velit. Minus, obcaecati ratione iure magni impedit possimus.
Show code
		<div class="col-md-3">text</div>
		<div class="col-md-3">text</div>
		<div class="col-md-3">text</div>
		<div class="col-md-3">text</div>
	
Copy code

Subscribed