Minimal Bootstrap Column using Custom HTML

Show and Tell
#1

I love the default Material design theme. But I’ve always had issues getting full width (truly full width) content with the standard page template.

I’ve found some simple Bootstrap classes thrown into some very simple HTML is the solution. Here is a very simple two-column layout you can create with custom HTML. In this case, it’s a 75% width column on the left and a 25% one on the right.

I’m also leveraging the full-width-row class in Anvil’s Material design theme. One thing this layout won’t work for is mobile screens. You could remove the xs classes to simply have it wrap if you wanted. I don’t in my case and will figure something else out for a mobile screen.

<div class="row full-width-row">
  <div class="col-md-9 col-sm-9 col-xs-9 main-column content">
    <div anvil-slot-repeat="left" class="anvil-measure-this"></div>
    <div class="placeholder drop-here" anvil-if-slot-empty="left" anvil-drop-slot="left">Drop something to put on the left here.</div>
  </div>
  <div class="col-md-3 col-sm-3 col-xs-3 main-column content">
    <div anvil-slot-repeat="right" class="anvil-measure-this"></div>
    <div class="placeholder drop-here" anvil-if-slot-empty="right" anvil-drop-slot="right">Drop something to put on the right here.</div>
  </div>
</div>
<style>
  .main-column {
    padding: 0 0 0 0px;
  }
</style>

One area I wish was shared more on the forum was theming. It’s considered “advanced”, but it’s also one of the major stumbling blocks for building out consumer products for those of us less JS inclined.

5 Likes