Using Bootstrap's Grid System in Distill Article

Publishing Your Results
1

I am building my first website using Distill, and I am wanting to place text and a figure side by side in a distill article. I am familiar with using rows and columns using the grid system. For example:

<div class="row">
<div class="medium-5 columns" >
insert image here
</div>
<div class="medium-7 columns">
insert text here
</div>
</div>

However, this doesn't seem to work in a distill article. Is there a way to line up an image and text side by side? I do not want to float it.

2

I was able to figure this out. I added the following css style to my theme.css

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(100px, auto);
}

This particular css style splits the available space into 2 equal columns and makes rows a minimum of 100px tall, but they can get larger if the content needs the space. Here is a good resource

Once you have this you can work with div to get them in columns and rows.

Example:

<div class="wrapper">
<div>
Content
</div>
<div>
Content 
</div>
</div>