Ok let me try to walk you through it.
In your site, you must have some sort of tool to provide the contents of each template. That's the tool that makes the several boxes for each page, each box containing the details of one template.
So you must have a master template with this tool inside. First you have your title (find your theme with bootstrap responsive) and then some ordering (latest, most popular, most expensive) and then a tool to provide the details of each template.
If you just want the shares to be for your site, you could put them after your title. But if you want users to be able to share each template, then the shares would need to go in the area where each template details are provided.
What is your specific goal here? What do you want your users to be able to share?
For the css, the class="share" allows you control the style of the share buttons. You might want them pushed to the right or put into a box, whatever you want.
Let me show you what I use, and its not very suitable for you, but it may help.
My code is this:
<div class="col-lg-12 col-md-12 contents">
<div class="main-content"><div class="share">[[BookmarkThis]]</div>
<div style="clear:both;">[[*content]]
</div>
And the css will look something like this (just an estimate, I can check my code later if you need)
.share {float:right; margin-right:5px;}
What this does is make a box for the content section, put the share stuff in there first, then the [[*content]] which means the page content after. Then my css pushes the buttons to the right of that box. Here is a sample of what it looks like on my site:
https://www.rayxilawforums.com/rayxi-branded-content/cn/school-interview-cn.html
For you its not going to be the same probably, but first you need to decide what you want. Please think about it and let me know, I can help you get it in there properly.
