Custom pages - Bootstrap Grid system not working as expected

[Mecanik]

Hello,

I`m trying to create a simple homepage with 2 rows each with 2 columns showcasing... some images, and some other stuff. It appears that a lot of the default Bootstrap col-* grid system are disabled somehow (very weird) and you cannot use anything else than col, col-lg-4/8.

Also the row > content is somehow split specifically to have a sidebar with flex enabled, which prevents you from making a 12 width row/column. I haven't looked into what/where/how is disabled because I installed the skeleton template as a Hugo module and frankly I don't want to break the "default" layout of the project as I`m happy with how it looks across the posts/etc.

With that being said, I cannot create a simple grid with 2 columns on larger devices that would stack on mobile. The closest I've come to achieve this is:

layouts/index.html:

{{ define "content" }}

<div class="container">
	<div class="row no-gutters">
	  <div class="col-auto d-flex align-items-center">
		<figure class="figure">
		  <img src="https://via.placeholder.com/576x324" width="576" height="324" class="figure-img img-fluid rounded" alt="..." data-viewer-invisible />
		  <figcaption class="figure-caption">Banana</figcaption>
		</figure>
	  </div>
	  <div class="col-auto d-flex align-items-center">
		<figure class="figure">
		  <img src="https://via.placeholder.com/576x324" width="576" height="324" class="figure-img img-fluid rounded" alt="..." data-viewer-invisible />
		  <figcaption class="figure-caption">Papaya</figcaption>
		</figure>
	  </div>
	</div>
</div>	

{{ end }}

However, whilst this "works" you will still have a nasty empty space on the right side:

If anyone has some ideas/suggestions on how to achieve what I want without making changes to the default template... I would appreciate it.

The requirement is simple, have 2/3 columns in a row on the homepage that would stack on mobile (currently it will not).

Thanks

[razonyang]

Hi, it works as expected actually, according to the Margin utilities, you'll need to add some margin utilities to make it fill up the whole container:

<div class="row no-gutters">
   <div class="col-auto me-auto">
   </div>
   <div class="col-auto">
   </div>
</div>

Btw, since this theme uses the purgecss and pwa, there may be some cache exists, you may need to restart server(hugo server) and force refresh the page(CTRL+F5) sometime.

[Mecanik]

Thanks, it's not entirely "correct" but I managed to get it working. What I did not know is: 1. Purgecss and 2. The cache.