Put them in a table
- Create a table with one row and two cells. (Insert Table > 1 x 2.)
- Insert the images. They should be the same size or you can set them to be the same size.
- Click on the table to open the table menu.
- Click on the paintbrush to open the Table Styles menu.
- Deselect Bordered Table to remove the borders.
- You can use either the image alignment or the table cell alignment to get the desired effect (center align on the cells gives the most consistent spacing).
- Save.
Here's a sample of this layout:
Use Display Inline on images
- Insert the images one after the other.
- For each image, click on the image once to get the image menu to appear.
- Then click the star to show the Image Display menu.
- Choose Display Inline instead of Break Text so the images are inline with each other.
- Adjust the widths how you want.
- Save.
Here's a sample of this layout:
Use a Bootstrap grid in the HTML
- Insert the images.
- Click the < /> button to switch to the Code View.
- Add HTML to create a Bootstrap row as shown below. Use the row class to set the row all the images will appear in, and then use an appropriate column size to get the display you're looking for. Leave the images' code as it was when you inserted them.
<div class="row"> <div class="col-sm-6"> <img class="img-responsive fr-fil fr-dib" src="//dyzz9obi78pm5.cloudfront.net/app/image/id/5e9dee62ad121cd86d8c5903/n/sample-image-unsupported-browser-list.png"> </div> <div class="col-sm-6"> <img class="img-responsive fr-fil fr-dib" src="//dyzz9obi78pm5.cloudfront.net/app/image/id/5e9dee6aec161c025a0231fc/n/sample-image-safari-unsupported.png"> </div> </div>
- Save.
You can adjust the col-sm-6 to use different numbers to include more images, etc. Bootstrap grid expects a max of 12, so if you have 3 images you could use col-sm-4 instead of 6, for example.
Here's a sample of this layout: