Dynamically Center Elements inside a Row - html

Question

I have two Images with Links inside a row. Sometimes only one Image will be needed so I have added JSTL tags to verify that. The problem is when I'm displaying just one Image. Then they're not centered. Only when both the Images are available it's centered. How to tackle this?
<div class="row">
<c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
<div class="col-sm-3 col-sm-offset-3 col-xs-6">
<a href="${content.facebookLink}" target="_blank">
<img src="<c:url value="/resources/images/fb.png"/>">
</a>
</div>
</c:if>
<c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
<div class="col-sm-3 col-xs-6">
<a href="${content.twitterLink}" target="_blank">
<img src="<c:url value="/resources/images/twitter.png "/>">
</a>
</div>
</c:if>
</div>
Thanks.

Answer 1

Better way is to convert .col-sm-3.col-xs-6 to inline-block element and use text-center class to .row
.col-sm-3.col-xs-6 {
display: inline-block;
float:none;
width:auto;
}
img {
width: 100px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class=container>
<div class="row text-center">
<div class="col-sm-3 col-xs-6">
<a href="${content.facebookLink}" target="_blank">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</a>
</div>
<div class="col-sm-3 col-xs-6">
<a href="${content.twitterLink}" target="_blank">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</a>
</div>
</div>
</div>
<div class=container>
<div class="row text-center">
<div class="col-sm-3 col-xs-6">
<a href="${content.twitterLink}" target="_blank">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
</a>
</div>
</div>
</div>

Answer 2

Found a simple solution. Omitted he columns from the dynamic elements.
<div class="row">
<div class="col-md-12">
<c:if test="${content.facebookLink ne 'NO_FACEBOOK_LINK'}">
<a href="${content.facebookLink}" target="_blank" style="display: inline">
<img src="<c:url value="/resources/images/fb.png"/>">
</a>
</c:if>
<c:if test="${content.twitterLink ne 'NO_TWITTER_LINK'}">
<a href="${content.twitterLinkk}" target="_blank" style="display: inline">
<img src="<c:url value="/resources/images/twitter.png "/>">
</a>
</c:if>
</div>
</div>
Works perfect.