Bootstrap 4：移动和全屏尺寸的垂直线

Question

目前的外观：
外观如何：

我正在尝试为我的网站构建一个模块，但在放置垂直hr时遇到了问题，该hr在顶部和底部应该有点褪色。

x =一些标题下面的图片，I =垂直hr

移动电话：

| x I x |
 | x I x |
 | x | |

全屏：
“ | x I x I x I x I x |”

我当前的html文件（目前不使用任何scss，css等）。 {{ }}部分来自我正在使用的hugo框架，代表文本。 目前，我删除了所有用于放置竖线的尝试。希望有人可以帮助我解决我的问题。

{{ $file := index $.Site.Data (.Get "folder") (.Get "file") }}
<section class="five-icon">
   <div class="container">
     <h2 class="text-center mb-3">{{ $file.title }}</h2>
     <div class="row text-center d-flex justify-content-center">
      {{ range $file.images}}
        <div class=" col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6">
	<img class="img-fluid" src="{{ .img_path }}" alt="{{ .img_alt }}" title="{{ .img_title }}">
	<div class="mt-3">
	  <b class="text-center bold c-white">{{ .title_bold }} </b>
	  <p class="text-center c-white" style="hyphens: auto;">{{ .title }}</p>
	</div>
        </div>
      {{end}}
      </div>
    </div>
</section>