equalHeight.js requires jQuery

without equalHeight.js

It's too easy. This is a small box.

This is a larger box. Did you know, this is working on IE too?

And now you! Equal box heights to your Layouts!

Download

with equalHeight.js

It's too easy. This is a small box.

This is a larger box. Did you know, this is working on IE too?

And now you! Equal box heights to your Layouts!

Download

<div class="row">
    <div class="col-xs-4">
        <div class="panel panel-default no-margin-bottom" data-eqh>
            <div class="panel-body">
                <p>
                    It's too easy. This is a small box.
                </p>
            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="panel panel-default no-margin-bottom" data-eqh>
            <div class="panel-body">
                <p>
                    This is a larger box. Did you know, this is working on IE too?
                </p>
            </div>
        </div>
    </div>
    <div class="col-xs-4">
        <div class="panel panel-default no-margin-bottom" data-eqh>
            <div class="panel-body">
                <p>
                    And now you! Equal box heights to your Layouts!
                </p>
                <a href="./equalHeight.js" class="btn btn-block btn-default">Download</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('[data-eqh]').equalHeight();
</script>

without equalHeight.js

It works beautiful with responsive layouts.

Sidebar with funny stuff

And not so funny stuff

with equalHeight.js

It works beautiful with responsive layouts.

Sidebar with funny stuff

And not so funny stuff

<div class="row">
    <div class="col-xs-8">
        <div class="panel panel-default no-margin-bottom" data-eqh>
            <div class="panel-body">
                <p>
                    It works beautiful with responsive layouts.
                </p>
            </div>
        </div>
    </div>
    <div class="col-xs-4" data-eqh>
        <div class="panel panel-default">
            <div class="panel-body">
                <p>
                    Sidebar with funny stuff
                </p>
            </div>
        </div>
        <div class="panel panel-default no-margin-bottom">
            <div class="panel-body">
                <p>
                    And not so funny stuff
                </p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('[data-eqh]').equalHeight();
</script>

without equalHeight.js

Sidebar with funny stuff

Sidebar with awesome funny stuff

And bad stuff

with equalHeight.js

Sidebar with funny stuff

Sidebar with awesome funny stuff

And bad stuff

<div class="row">
    <div class="col-xs-8">
        <div class="panel panel-default equalHeight no-border no-margin-bottom" data-eqh>
            <div class="panel panel-default no-border bg-lightgray" data-eqh="nestedGroup">
                <div class="panel-body">
                    <p>
                        Sidebar with funny stuff
                    </p>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-4" data-eqh>
        <div class="panel panel-default no-border bg-lightgray" data-eqh="nestedGroup">
            <div class="panel-body">
                <p>
                    Sidebar with awesome funny stuff
                </p>
            </div>
        </div>
        <div class="panel panel-default no-border no-margin-bottom">
            <div class="panel-body">
                <p>
                    And bad stuff
                </p>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('[data-eqh]').equalHeight();
</script>