Theming/Aligning Multiple Views Blocks on Homepage I have an article content type which has a category field that is an entity reference field type linked to a taxonomy group of terms I created.

The website has 6 different pages which are just a taxonomy view based on the 6 different article categories listing the articles that are associated with that category. These are the settings of the taxonomy view used for each of the pages:


What I'm trying to do is create 6 block views on the homepage in a grid where each block view is a different category title showing the 4 most recent article titles and a more button to take you to the listing page of said category view. Each background would be a different image based on my CSS. This is what I'd like it to look like:


I'm using Boostrap so what I'd like is each row to be put within a &lt;div class="row"&gt; and then each block to have a &lt;div class="col-sm-4"&gt;.

What I want the final code for each block to look like is the following:

&lt;div class="col-md-4"&gt;
  &lt;div class="category background-img-class-name"&gt;
    &lt;div class="category__content"&gt;
      &lt;div class="category__content--title"&gt;
        &lt;h3&gt;{{ category.title }}&lt;/h3&gt;
      &lt;/div&gt;
      &lt;ul class="category__content--listings"&gt;
        &lt;li&gt;&lt;a href="{{ link.to.article.1 }}"&gt;Article Title 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="{{ link.to.article.1 }}"&gt;Article Title 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="{{ link.to.article.3 }}"&gt;Article Title 3&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="{{ link.to.article.4 }}"&gt;Article Title 4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
      &lt;div class="category__content--more"&gt;
        &lt;a class="btn btn-primary" href="{{ link.to.category.view }}"&gt;More&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;


I know I could create a different block view in views for each of these (would that be the best practice?) and then place them in the content region only on the homepage but then how would I theme the template files so that I could have them work the way I've shown above?

Is there a better approach to this than what I'm suggesting above? Any help/suggestions is greatly appreciated. Also, if something exactly like this has been asked/answered before, a link to that would be helpful as I've tried searching on here and haven' been able to find anything exactly like my issue.
Please comment below if I have misunderstood anything and I can modify my answer.

First, I will clarify that I understand what is happening.

To the user, there appear to be 6 different pages on the site but in actuality, they are looking at the View Page that you posted above with contextual filters (each containing a different taxonomy term).

On the homepage, in a grid, you would like to display 6 Block Views that display the 4 most recent posts for their respective Taxonomy Term.

You would want Views to print out in a Bootstrap-like format so that they utilize the Bootstrap responsive grid.



This is what I recommend:


First we are going to create the first New Block.
Create a Block View called "Front Page News Blocks" (Or something along those lines) that lists Nodes of the Article type
Limit the View to only display 4 nodes
Ensure that it is sorted via post date (Ascending)
Add a "Custom text" field to the view and put the "More" link (with the btn and btn-primary classes) in the value
All of the above settings are "Applied to All Displays"
Now, you want to create some Block Views within this View. Have a total of 6 different Block Views
Within these, you can add categories Filters (but apply them only to the respective displays)
Also, override the URL in the "More" link in each view (Once again, don't forget to only apply it to the current display)
Create a template based on views-view.html.twig but name it after your View to override the default theme file
Within your custom TWIG file, you can add the "col-md-4" grid classes
You would also need to override the Homepage template so that you can add a div with the "row" class to the region where these blocks will be.
Now your CSS classes should be in the markup and you should be able to style your site as planned.

What I laid out was pretty generalized and high level. Definitely comment below if you need clarification on anything and I can edit this answer.

Hope this helps get you on the right track!