Equal height

Purpose

Equalize the height of elements on the same baseline.

Example

Short container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Medium container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Long container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Short container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Medium container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Long container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Short container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Medium container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Long container

Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.

Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.

Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.

Code

HTML

<section id="simple">
	<h2>Example</h2>

	<div class="wb-eqht">
		<section>
			<h3>Short container</h3>
			...
		</section>
		<section>
			<h3>Medium container</h3>
			...
		</section>
		<section>
			<h3>Long container</h3>
			...
		</section>
	</div>

	<div class="wb-eqht">
		<section>
			<h3>Short container</h3>
			...
		</section>
		<section>
			<h3>Medium container</h3>
			...
		</section>
		<section>
			<h3>Long container</h3>
			...
		</section>
		<section>
			<h3>Short container</h3>
			...
		</section>
		<section>
			<h3>Medium container</h3>
			...
		</section>
		<section>
			<h3>Long container</h3>
			...
		</section>
	</div>
</section>

CSS

#simple .wb-eqht section {
	display: inline-block;
	margin-bottom: 15px;
	padding: 15px;
	width: 100%;
}

@media (min-width: 768px) {
	#simple .wb-eqht section {
		width: 49%;
	}
}

@media (min-width: 1200px) {
	#simple .wb-eqht section {
		width: 33%;
	}
}

Nested Example

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test

Column 2

Column 2

  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test

Column 3

Column 3

  • test
  • test

Column 1

Column 1

  • test
  • test
  • test
  • test
  • test

Code

<section>
	<h2>Nested Example</h2>

	<div class="row wb-eqht">
		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 1</h3>
				</div>
				<div class="panel-body">
					<p>Column 1</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 2</h3>
				</div>
				<div class="panel-body">
					<p>Column 2</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 3</h3>
				</div>
				<div class="panel-body">
					<p>Column 3</p>
					...
				</div>
			</section>
		</div>

		<div class="col-sm-6 col-md-3">
			<section class="panel panel-default hght-inhrt">
				<div class="panel-heading">
					<h3 class="panel-title">Column 1</h3>
				</div>
				<div class="panel-body">
					<p>Column 1</p>
					...
				</div>
			</section>
		</div>
	</div>
</section>
Date modified: