Community

cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
DanielleBowers
New Member

Buttons side by side?

Hi! I am very new to HTML coding in Canvas. I found a great template to create my buttons, but they only show up one per line. I really would like to get them two or even three per line. How do I do that? I would need specific instructions as to where to place the proper coding as I am so new to this. Thank you!

0 Kudos
3 Replies
chofer
Community Coach
Community Coach

Hi @DanielleBowers ...

Depending on the size of your button images, you should be able to add those side-by-side without really needing to mess with the HTML too much (or really at all).  If your buttons are large in size, I would first recommend re-sizing them outside of Canvas using a graphics editing program (you could use something as simple as Windows Paint on a PC).  Then, upload those button images to your course, and then add them to the page you are creating/building.  While editing your Canvas page, you would simply place your cursor on the page where you wanted to insert your button image, and then use these directions:

You can then click on those images and make them "clickable" by creating hyperlinks to other content in your course or other websites that you want your students to visit.  Instead of creating text links, you would highlight the button image, and then create the link that way.

I hope this will be of some help to you.  Sing out if you have any other questions about this...thanks!

ryan_corris
Advocate

Hello @DanielleBowers ! @chofer  has some great ideas!  I know my reply is a while after this was originally posted, but I thought I would add my 2 cents in case you or others are still looking for info regarding this.  In addition to what Chris has already stated, I find a lot of success using tables to place images side by side, in rows, etc.  Once a table is created in the RCE, I place the cursor in the cell where I would like to insert the button and insert the image.  Size can be adjusted after image is added and links are added the same way whether the image is in a table or not.

Tables can be a little finicky at times.  Here is a guide that I put together to help understand some of the logistics of creating tables in Canvas: Tables in Canvas

Here is a silly sample of buttons added to a course using tables:

Buttons in a tableButtons in a table

 

EthanDeceuster
New Member

You could also use "display: inline" to have your block elements side by side.  For example, this bit of code has two links styled as Canvas buttons that are displayed side by side with 10px space between them:

<p style="display: inline; margin-right: 10px;"><a class="Button Button--primary" style="width: 45%;" href="#">Link text</a></p>
<p style="display: inline;"><a class="Button Button--primary" style="width: 45%;" href="#">Link text</a></p>

Preview:

2022-03-30_09-14-42.png

You could do the same with images as buttons, just wrap them in a <p> element and apply the inline display and use margins to create space between them.

If you're interested in expanding your custom styling options in Canvas, you can check out the DesignPLUS product from Cidi Labs.  There are dozens of great features to make this type of styling quick and easy.  One example related to this question is that DesignPLUS can apply Bootstrap column layouts to Canvas pages.

I used to do everything inline but using DesignPLUS opened so many new features and saved me many hours trying to do it all manually.