---
{
	"title": "Equal height",
	"language": "en",
	"category": "Plugins",
	"description": "A plugin for responsive equal height.",
	"tag": "equalheight",
	"parentdir": "equalheight",
	"altLangPrefix": "equalheight",
	"css": ["demo/equalheight"],
	"dateModified": "2023-07-17"
}
---
<section>
	<h2>Purpose</h2>
	<p>Equalize the height of elements on the same baseline.</p>
</section>

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

	<div class="wb-eqht">
		<section>
			<h3>Short container 1</h3>
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</section>
		<section>
			<h3>Medium container 1</h3>
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
			<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
		</section>
		<section>
			<h3>Long container 1</h3>
			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
			<p>Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text. Different example text.</p>
			<p>Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text. Other example text.</p>
		</section>
		<section>
			<h3>Short container 2</h3>
			<p>Example text. Example text. Example text. Example text. Example text. Example text.</p>
		</section>
		<section>
			<h3>Medium container 2</h3>
			<p>Example text. Example text. Example text. Example text. Example text. Example text.</p>
			<p>Different example text. Different example text. Different example text. Different example text.</p>
		</section>
		<section>
			<h3>Long container 2</h3>
			<p>Example text. Example text. Example text. Example text. Example text. Example text.</p>
			<p>Different example text. Different example text. Different example text. Different example text.</p>
			<p>Other example text. Other example text. Other example text. Other example text.</p>
		</section>
		<section>
			<h3>Short container 3</h3>
			<p>Example text. Example text. Example text.</p>
		</section>
		<section>
			<h3>Medium container 3</h3>
			<p>Example text. Example text. Example text.</p>
			<p>Different example text. Different example text.</p>
		</section>
		<section>
			<h3>Long container 3</h3>
			<p>Example text. Example text. Example text.</p>
			<p>Different example text. Different example text.</p>
			<p>Other example text. Other example text.</p>
		</section>
	</div>

	<section>
		<h3>Code</h3>
		<section>
			<h4>HTML</h4>
			<pre><code>&lt;section id="simple"&gt;
	&lt;h2&gt;Example&lt;/h2&gt;

	&lt;div class=&quot;wb-eqht&quot;&gt;
		&lt;section&gt;
			&lt;h3&gt;Short container 1&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Medium container 1&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Long container 1&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Short container 2&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Medium container 2&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Long container 2&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Short container 3&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Medium container 3&lt;/h3&gt;
			...
		&lt;/section&gt;
		&lt;section&gt;
			&lt;h3&gt;Long container 3&lt;/h3&gt;
			...
		&lt;/section&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
		</section>

		<section>
			<h4>SCSS</h4>
			<pre><code>{{#escape}}{{#stripbanner}}{{> equalheight }}{{/stripbanner}}{{/escape}}</code></pre>
		</section>
	</section>
</section>

<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>
					<ul>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
					</ul>
				</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>
					<ul>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
					</ul>
				</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>
					<ul>
						<li>test</li>
						<li>test</li>
					</ul>
				</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>
					<ul>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
						<li>test</li>
					</ul>
				</div>
			</section>
		</div>
	</div>
	<section>
		<h3>Code</h3>
		<pre><code>&lt;section&gt;
	&lt;h2&gt;Nested Example&lt;/h2&gt;

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

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

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;section class="panel panel-default hght-inhrt"&gt;
				&lt;div class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Column 3&lt;/h3&gt;
				&lt;/div&gt;
				&lt;div class="panel-body"&gt;
					&lt;p&gt;Column 3&lt;/p&gt;
					...
				&lt;/div&gt;
			&lt;/section&gt;
		&lt;/div&gt;

		&lt;div class="col-sm-6 col-md-3"&gt;
			&lt;section class="panel panel-default hght-inhrt"&gt;
				&lt;div class="panel-heading"&gt;
					&lt;h3 class="panel-title"&gt;Column 1&lt;/h3&gt;
				&lt;/div&gt;
				&lt;div class="panel-body"&gt;
					&lt;p&gt;Column 1&lt;/p&gt;
					...
				&lt;/div&gt;
			&lt;/section&gt;
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/section&gt;</code></pre>
	</section>
</section>

<section>
	<h2>Targeting a deeper nested elements</h2>
	<p>The following example do the same as if the <code>hght-inhrt</code> class was applied on the element to be equalize as well as all the parents (up to the child of wb-eqht) whereas <code>eqht-trgt</code> is only applied to the element to equalize (nothing needs to be done about the parents).</p>
	<div class="row wb-eqht">
		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 1</h3>
					</div>
					<div class="panel-body">
						<p>Column 1</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 2</h3>
					</div>
					<div class="panel-body">
						<p>Column 2</p>
						<ul>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-12 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default eqht-trgt">
					<div class="panel-heading">
						<h3 class="panel-title">Column 3</h3>
					</div>
					<div class="panel-body">
						<p>Column 3</p>
						<ul>
							<li>test</li>
							<li>test</li>
						</ul>
					</div>
				</section>
			</div>
		</div>
	</div>
<section>
		<h3>Code</h3>
		<pre><code>&lt;div class=&quot;row wb-eqht&quot;&gt;
		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Column 1&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body&quot;&gt;
						&lt;p&gt;Column 1&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class=&quot;col-sm-6 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Column 2&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body&quot;&gt;
						&lt;p&gt;Column 2&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;

		&lt;div class=&quot;col-sm-12 col-md-4&quot;&gt;
			&lt;div class=&quot;well well-lg&quot;&gt;
				&lt;section class=&quot;panel panel-default eqht-trgt&quot;&gt;
					&lt;div class=&quot;panel-heading&quot;&gt;
						&lt;h3 class=&quot;panel-title&quot;&gt;Column 3&lt;/h3&gt;
					&lt;/div&gt;
					&lt;div class=&quot;panel-body&quot;&gt;
						&lt;p&gt;Column 3&lt;/p&gt;
						...
					&lt;/div&gt;
				&lt;/section&gt;
			&lt;/div&gt;
		&lt;/div&gt;
	&lt;/div&gt;</code></pre>
	</section>
</section>

<section>
	<h2>Special test case examples</h2>
	<p><a href="test-case-en.html">Consult the special test case examples webpage</a></p>
</section>
