How to add block regions in a Drupal theme

To add additional block regions in a Drupal theme you need add the new regions to the following files. In this example I am adding four blocks side by side 25% width just above the content block. As I am using a Bootstrap theme, I have wrapped them in the div col-sm-3.

theme.info.yml - you define them in this info file in this format: 

content_top_first: 'Content Top First'
content_top_second: 'Content Top Second'
content_top_third: 'Content Top Third'
content_top_fourth: 'Content Top Fourth'

theme.theme - you add them as variables in this file. Like this in my example: 

// Content Top First
  $variables['content_top_first_layout_container'] = theme_get_setting('content_top-first_layout_container');
  
// Content Top Second
  $variables['content_top_second_layout_container'] = theme_get_setting('content_top-second_layout_container');
  
// Content Top Third
  $variables['content_top_third_layout_container'] = theme_get_setting('content_top-third_layout_container');
  
// Content Top Fourth
  $variables['content_top_fourth_layout_container'] = theme_get_setting('content_top-fourth_layout_container');

page.html.twig - you add them as html in the page.html.twig file

This is my example of adding the four blocks in a bootstrap theme to the page.html.twig file:

<div id="contentabove">
  {% if page.content_top_first %}
		<div class="container">
          <div class="row">
            <div class="col-sm-3">
              <div class="content-top_first__section">
                {{ page.content_top_first }}
              </div>
            </div>
  {% endif %}
  {% if page.content_top_second %}
            <div class="col-sm-3">
              <div class="content-top_second__section">
                {{ page.content_top_second }}
              </div>
            </div>
  {% endif %}
  {% if page.content_top_third %}
            <div class="col-sm-3">
              <div class="content-top_third__section">
                {{ page.content_top_third }}
              </div>
            </div>
  {% endif %}
  {% if page.content_top_fourth %}
            <div class="col-sm-3">
              <div class="content-top_fourth__section">
                {{ page.content_top_fourth }}
              </div>
            </div>
		  </div>
		</div>
  {% endif %}
</div>
</div>
</div>
</div>