Removing HTML rendered for Block Regions

Question

In my custom Drupal 8 theme, for all regions of my page, there is HTML looking like:

<div class="block-region-xxxx"></div>

where xxxx is the region name.

There are also empty 's rendered around my blocks.

This is my block.html.twig

{% block content %}
    {{ content }}
{% endblock %}

as you see, no divs there.

Here's my theme.info.yml , region part:

regions:
  header: Header
  hero: Hero
  help: Help
  top: 'Page Top'
  content: Content
  sub: 'Sub Content'
  bottom: 'Page Bottom'
  footer: Footer

Here's a screenshot of the actual HTML tree rendered:

essentially I'd like to remove everything between the .row and the .col..

Answer 1

This may help some one else who is having this issue.

So how to remove the extra black divs inside a region you would do the following:

Find "core/modules/system/templates/region.html.twig"

Change it from this –

{#
/**
 * @file
 * Default theme implementation to display a region.
 *
 * Available variables:
 * - content: The content for this region, typically blocks.
 * - attributes: HTML attributes for the region <div>.
 * - region: The name of the region variable as defined in the theme's
 *   .info.yml file.
 *
 * @see template_preprocess_region()
 *
 * @ingroup themeable
 */
#}
{% if content %}
  <div{{ attributes }}>
    {{ content }}
  </div>
{% endif %}

To this –

{#
/**
 * @file
 * Default theme implementation to display a region.
 *
 * Available variables:
 * - content: The content for this region, typically blocks.
 * - attributes: HTML attributes for the region <div>.
 * - region: The name of the region variable as defined in the theme's
 *   .info.yml file.
 *
 * @see template_preprocess_region()
 *
 * @ingroup themeable
 */
#}
{% if content %}
    {{ content }}
{% endif %}