- Skip to main content
- Skip to "About this site"

# Equal height

- Documentation
- Questions or comments?

## 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>

## Targeting a deeper nested elements

The following example do the same as if the `hght-inhrt` class was applied on the element to be equalize as well as all the parents (up to the child of wb-eqht) whereas `eqht-trgt` is only applied to the element to equalize (nothing needs to be done about the parents).

### 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

### Code

    <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>
    						...
    					</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>
    						...
    					</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>
    						...
    					</div>
    				</section>
    			</div>
    		</div>
    	</div>

Date modified:
  2014-09-30