How do I implement bootstrap's panel component for a specific block / block region in my bootstrap (sub) theme?

Question

I have a bootstrap sub-theme, and would like to render some of my blocks using Bootstrap's Panels components, so that the block would need to be wrapped something like this:

<div class="panel panel-default">
  <div class="panel-heading">
    {{ header }}
  </div>
  <div class="panel-body">
    {{ content }}
  </div>
</div>

So far I've tried to implement this via the following series of dirty hacks:

• Setting the css-class setting on the advanced settings of the view to panel panel-default
• wrapping the header of the view in a <div class="panel-heading"> block
• setting the row-class parameter in the settings of the view's unformatted list format to panel-body

This almost works, but isn't quite right:

The issue is that the resulting classes aren't nested correctly:

If I manually modify the classes in my browser and set view-header to panel-heading and view-content to panel-body I get the desired effect:

So I know what I want, but how do I achieve this? I'm new to twig and I feel like there must be an easy solution to this out there, I just don't know what it is. Note that I don't want to make every block behave like this, just this one.

Answer 1

Quick-and-dirty way: Uncheck all the boxes to display default classes in Views, and then use a twig template specifically for that views block to write the CSS exactly as you want.

You can find the Views twig templates in /core/modules/views/templates.

It depends on how you configured the view, but if it's an unformatted block, you want the unformatted template, views-view-unformatted.html.twig. Copy that file from the Views template directory into your subtheme's directory.

Next, you have to rename the file so that it only applies to the block. In Drupal 7, Views was nice and gave you the suggested theme hooks, but in Drupal 8, you have to figure them out yourself.

The rule is TEMPLATE_NAME--VIEW_MACHINE_NAME--DISPLAY_MACHINE_NAME.

If you go to edit the view in the admin UI, you can get this info from the URL.

/admin/structure/views/view/VIEW_MACHINE_NAME/edit/DISPLAY_MACHINE_NAME.

Once you rename the file, you will need to rebuild the cache to get Drupal to use it.

Sometimes you may need to customize other views templates as well (a single view can use multiple templates); you can do that in the same way as described above..