<div class="container">
    <div class="row">
        <!-- Heatmap -->
        <div class="col-md-9">
            <yds-heatmap
                    project-id="none"
                    view-type="aidactivity.beneficiary.countries.all"
                    color-axis="true"
                    color-type="logarithmic"
                    legend="true"
                    legend-v-align="bottom"
                    year-selection="true"
                    min-year="1997"
                    max-year="2018"
                    country-selection="true"
                    element-h="550"></yds-heatmap>
        </div>

        <!-- Country list -->
        <div class="col-md-3">
            <yds-country-list element-h="550"></yds-country-list>
        </div>
    </div>
    <div class="row">
        <!-- Pie chart -->
        <div class="col-md-6">
            <yds-pie
                    use-countries-service="true"
                    element-h="350">
            </yds-pie>
        </div>

        <!-- Bar chart -->
        <div class="col-md-6">
            <yds-bar
                    use-countries-service="true"
                    show-legend="false"
                    element-h="350">
            </yds-bar>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <!-- Heatmap -->
        <div class="col-md-9">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Number of Aid Activities</h3>
                </div>
                <div class="panel-body">
                    <yds-heatmap
                            project-id="none"
                            view-type="aidactivity.beneficiary.countries.all"
                            color-axis="true"
                            color-type="logarithmic"
                            legend="true"
                            legend-v-align="bottom"
                            year-selection="true"
                            min-year="1997"
                            max-year="2018"
                            country-selection="true"
                            no-border="true"
                            element-h="550"></yds-heatmap>
                </div>
            </div>
        </div>

        <!-- Country list -->
        <div class="col-md-3">
            <yds-country-list element-h="550"></yds-country-list>
        </div>
    </div>
    <div class="row">
        <!-- Pie chart -->
        <div class="col-md-6">
            <yds-pie
                    use-countries-service="true"
                    element-h="350">
            </yds-pie>
        </div>

        <!-- Bar chart -->
        <div class="col-md-6">
            <yds-bar
                    use-countries-service="true"
                    show-legend="false"
                    element-h="350">
            </yds-bar>
        </div>
    </div>
</div>

Move Dashboard Heatmap inside a panel
Move Dashboard Heatmap inside a panel
