Creating a Jumbotron in Bootstrap3 in Drupal 8.5.x

By peterm, 6 June, 2018

There are at least two methods to get this done. Here's the method I used and below is the outline of a method I found in the book Mastering Drupal 8.

This is a simple overriding process. Get a copy of the page.html.twig from the Bootstrap parent theme folder and copy it into our subtheme/templates directory.

First, we need to create a jumbotron region. This can be accomplished by modifying the page.html.twig file with the following snippet.

Above the #Main section, we'll paste this block. Use your own image

{# Jumbotron #}

{% if page.jumbotron %}

  {% block jumbotron %}

    <div class="container">

    <div id="jumbotron" class="jumbotron">

        <img src="/sites/default/files/2018-06/womens_center.jpg" class="img-responsive">

      {{ page.jumbotron }}

    </div>

    </div>

  {% endblock %}

{% endif %}

Then we clear the cache and go back to the Blocks UI. We will then place a jumbotron block in the Jumbotron region.

The second method to accomplish this is:

Create a custom block, add fields to hold the text or a button

Add the new block

Modify the tnode emplate per naming convention for node--page--full.html.twig

I haven't tried this second method, but it is more complete and perhaps a more proper approach.