Twitter bootstrap 引导映像模板和共享按钮

我正在查找此图像模板1*，但没有找到任何内容。在Bootstrap中有这样的类吗

另外，创建共享按钮2*的最佳方法是什么。

---

第1点：如果您使用引导程序4：

第2点：我建议将它们从各自的服务中编码，facebook、twitter等都有小部件来做这类事情，或者可能使用如下服务：

下面的第1点脚本将适用于Bootstrap v3。

Html和CSS `

---

第2点请检查此链接

查看第1点=>查看第2点=>使用，我没有在第一部分使用bootstrap 4，还有其他方法吗？我想这是一篇老文章，比如2014年之类的。

  <div class="row">

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

    <div class="col-xs-3">
      <div class="thumbnail">
        <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=500%C3%97330&w=500&h=330" alt="">
          <div class="caption">
            <h4>Thumbnail label</h4>
        </div>
      </div>
    </div>

  </div><!-- End row -->

</div><!-- End container -->` `<style type="text/css">
.thumbnail {
    position: relative;
    padding: 0px;
    margin-bottom: 20px;
 }
.thumbnail img {
    width: 100%;
 }
.caption{
  background: black;
  color: white ! important;
  text-align: center;
 }</style>`