Agfdhyk

I created a custom theme in drupal 8.6. Everything works fine but for some reason if I put a content in my sidebar region it goes to the bottom of my page after my main content. Any suggestions on how to fix this would be highly appreciated. Thanks

Here is my page.html.twig

<div class="layout-container">



<header role="banner">

{{ page.header }}

</header>



<main role="main">

<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}



<div class="layout-content">

  {{ page.content }}

</div>{# /.layout-content #}



{% if page.sidebar %}

  <aside class="layout-sidebar-first" role="complementary">

    {{ page.sidebar }}

  </aside>

{% endif %}



</main>



{% if page.footer %}

<footer role="contentinfo">

  {{ page.footer }}

</footer>

{% endif %}



</div>{# /.layout-container #}

st_saviours.info.yml file

name: St Saviours

description: Drupal 8 theme

type: theme

core: 8.x

libraries:

  - st_saviours/global-css

  - st_saviours/global-js

stylesheets-remove:

  - core/themes/stable/css/views/views.module.css

  - core/themes/stable/css/system/components/align.module.css

regions:

  header : 'Header'

  content: 'Main Content'

  footer: 'Footer'

  sidebar : 'Sidebar'

I used bootstrap grid layout to arrange the main content and the sidebar in my page.html.twig file.

<main role="main">

<a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}

<div class="col-md-12">

  <div class="row">







      {% if (page.first_sidebar and page.second_sidebar) %}

        <div class="col-md-4">

          <aside class="layout-sidebar-first" role="complementary">

            {{ page.first_sidebar }}

          </aside>

        </div>



        <div class="col-md-5">

            <div class="layout-content">

              {{ page.content }}

            </div>{# /.layout-content #}

        </div>





        <div class="col-md-3">

          <aside class="layout-sidebar-second" role="complementary">

            {{ page.second_sidebar }}

          </aside>

        </div>

      {% else %}

        <div class="col-md-12">

          <div class="row">

            <div class="layout-content">

              {{ page.content }}

            </div>{# /.layout-content #}

          </div>

        </div>

      {% endif %}



  </div>  

</div>

</main>