geostocker geostocker - 2 months ago 7
HTML Question

Bootstrap columns squished

I need some help, or advice rather. I've been working on creating a really basic recruitment portal for my employer. However it would seem like I'm not setting up the bootstrap scaffolding correctly as the columns seem to be very 'squashed' together when looking at it from a smaller device.
What is confusing me is the fact that I've used xs columns, which I would have assumed would take smaller devices into consideration and as such would adjust the width's of the columns accordingly...

I'd really appreciate it if someone could either tell me what I'm doing wrong or show me how to fix it to make it more responsive.

Here is a pen to a working example and below are the columns (without headers):

<div class="row buffer-top">
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Controllers</h3>
<p><strong>Location:</strong> UK-wide</p>
<p><a href="portals/0/resources/pdf/placeholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank"class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
<div class="caption">
<h3>Software Developers</h3>
<p><strong>Location:</strong> Tunbridge Wells</p>
<p><a href="portals/0/resources/pdf/softwarePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Access Manager</h3>
<p><strong>Location:</strong> UK-wide</p>
<p><a href="portals/0/resources/pdf/hOfficePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
<div class="col-xs-2 col-xs-offset-1 text-center">
<div class="thumbnail">
<span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
<div class="caption">
<h3>Site Consultants</h3>
<p><strong>Location:</strong> UK-Wide</p>
<p><a href="portals/0/resources/pdf/consultantPlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
</div>
</div>
</div>
</div>

Answer

Try below code and see Bootply Demo

You can add col-lg-3 col-md-3 col-sm-6 col-xs-12

col-lg-3 for large device, col-md-3 for medium device, col-sm-6 for small-medium device, col-xs-12 for mobile device

<div class="container-fluid">
   <div class="row">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
         <div class="circle one">
            <div class="table-row"> <span>Site Access </span> </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 ">
         <div class="circle two">
            <div class="table-row"> <span>Developers</span> </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
         <div class="circle three">
            <div class="table-row"> <span>Head Office </span> </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
         <div class="circle four">
            <div class="table-row"> <span>Consultants </span> </div>
         </div>
      </div>
   </div>
   <div class="row buffer-top">
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
         <div class="thumbnail">
            <span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-siteAccess"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-clipboard fa-stack-1x"></i></span>
            <div class="caption">
               <h3>Site Access Controllers</h3>
               <p><strong>Location:</strong> UK-wide</p>
               <p><a href="portals/0/resources/pdf/placeholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
         <div class="thumbnail">
            <span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-developers"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-code fa-stack-1x"></i></span>
            <div class="caption">
               <h3>Software Developers</h3>
               <p><strong>Location:</strong> Tunbridge Wells</p>
               <p><a href="portals/0/resources/pdf/softwarePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
         <div class="thumbnail">
            <span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-office"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-building-o fa-stack-1x"></i></span>
            <div class="caption">
               <h3>Site Access Manager</h3>
               <p><strong>Location:</strong> UK-wide</p>
               <p><a href="portals/0/resources/pdf/hOfficePlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
      <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 text-center">
         <div class="thumbnail">
            <span class="fa-stack fa-4x"><i class="fa fa-circle fa-stack-2x icon-consultant"></i><i class="fa fa-circle-thin fa-stack-2x"></i><i class="fa fa-question fa-stack-1x"></i></span>
            <div class="caption">
               <h3>Site Consultants</h3>
               <p><strong>Location:</strong> UK-Wide</p>
               <p><a href="portals/0/resources/pdf/consultantPlaceholder.pdf" target="blank" class="btn btn-default" role="button">More info</a><a href="mailto:joakim.kakaei@jaberoconsulting.com" target="_blank" class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
   </div>
</div>
Comments