i have two columns (col-6) for one my sections. the problem is that the gap between these two columns is so much that i decided to fill this gap by putting a narrow image between them. this is my code:
<div id="Skills">
<div class="container-fluid">
<div class="row">
<div class="section-2">
<div class="col-md-6 col-sm-6 col-xs-12 section-2-left">
<ul>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
</ul>
</div>
<div class="col-md-6 col-sm-6 col-xs-12 section-2-right">
<ul>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
<li class="fade-in-skills slide-in-skills">something</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<style>
#Skills {
background: rgba(168, 198, 222, .2);
margin: 100px 50px 0;
border-radius: 300px 15px 300px 15px;
}
.section-2 ul {
list-style: none;
text-align: center;
}
.section-2 ul li {
margin: 77px auto 0;
opacity: 0;
font-size: 1.6rem;
color: #000
}
.section-2-right, .section-2-left ul li:last-child {
margin-bottom: 77px;
}
</style>
i am using bootstrap 3. so there is a big gap (something about 400px between the content of these two columns in large devices) and i want to add an image at the middle of them only for large devices. i just wanna know if there's a way to put an image at the middle of these two col-6 columns or not. so please avoid any other suggestions. how can i do it?
any assistance you can provide would be greatly appreciated.
