I am currently utilizing Bootstrap framework and have a total of four items. However, the last item is displaying beneath the other three items instead of being on the same line. The current code snippet is as follows:
<div class="text-center linksblok">
<p><strong>Looking for specific information about a treatment or your hospital?</strong></p>
<div class="container">
<div class="row">
<div class="col-xs-12 col-ms-12 col-sm-offset-1">
<div class="linkblok hidden-xs col-md-3 col-sm-4">
<a href="http://www.sfg.nl">Visit the site of ></a>
</div>
<div class="img-responsive col-md-3 col-sm-4">
<a href="http://www.sfg.nl"><img src="{channel.link('/designs/SFVG/SFG logo.png')}" alt="logo sfg"/></a>
</div>
<div class="linkblok hidden-xs col-md-3 col-sm-4">
<a href="http://www.sfg.nl">Visit the site of ></a>
</div>
<div class="img-responsive col-md-3 col-sm-4">
<a href="https://www.vlietlandziekenhuis.nl/"><img src="{channel.link('/designs/SFVG/Vlietland logo.png')}" alt="logo vlietland"/></a>
</div>
</div>
</div>
</div>
</div>
Upon inspection, it has resulted in the issue illustrated in the provided screenshot. The final logo item needs to be aligned on the same line as the other three items.
Thank you https://i.stack.imgur.com/zreno.png
The corresponding CSS style is outlined below:
(CSS code here)
When I add this styling rule:
.linksblok div {
display:inline-block;
}
The layout appears like this: