Columns in Bootstrap compressed

Seeking advice regarding setting up a recruitment portal for my employer. Having trouble with the bootstrap scaffolding - columns appear squashed on smaller devices despite using xs columns. Looking for guidance to make it more responsive.

Would greatly appreciate any help in identifying errors or providing solutions. Here is a working example and below are the column details:


   <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>
               ...
            </div>
         </div>
      </div>
      ... (continue remaining columns)
   </div>
htmlcsstwitter-bootstrap

Answer №1

Check out the code below and visit this Bootply Demo

You should include col-lg-3 col-md-3 col-sm-6 col-xs-12

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

<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 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" role="button"><More info</a><<a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97fds8fcf6fcfefab9fcf6fcf6f2fed7fdf6f5f2e5f8f4f8f9e4e2fbe3fef9f0b9f4f8fa">[email protected]</a>" target="_blank" class="btn btn-default" role="button\">Apply</a></p>;
            </div></div></div></div></div>;

Answer №2

When designing for smaller screens, it's important to use col-sm-* classes instead of col-xs-*. This ensures that the layout will adapt and break at 767px, allowing enough space for the div to display horizontally on devices with smaller widths.

Answer №3

If you're working with smaller screens, consider dividing the content into groups of two for a more visually appealing layout. Adjusting your CSS code may be necessary to remove any offset that could affect the overall look:

Check out this CodePen example for reference.

<div class="row buffer-top">
      <div class="col-sm-3 col-xs-6 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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="93f9fcf2f8fafebdf8f2f8f2f6fad3f9f2f1f6e1fcf0fcfde0e6ffe7fafdf4bdf0fcfe">[email protected]</a>" target="_blank"class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
      <div class="col-sm-3 col-xs-6 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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e3898c82888a8ecd88828882886aaabbabcccaaba1aabba8ada6cccacbdaf9a5aebecbcdaadfbfbcbecdbbebfcbb8cefdcbcacc">[email protected]</a>" target="_blank" class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
      <div class="col-sm-3 col-xs-6 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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d0babfb1bbb9bdfebbb1bbb1b5b990bab1b2b5a2bfb3bfbea3a5bca4b9beb7feb3bfbd">[email protected]</a>" target="_blank" class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
      <div class="col-sm-3 col-xs-6 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:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9cf6f3fdf7f5f1b2f7fdf7fdf9f5dcf6fdfef9eef3fff3f2efe9f0e8f5f2fbb2fff3f1">[email protected]</a>" target="_blank" class="btn btn-default" role="button">Apply</a></p>
            </div>
         </div>
      </div>
   </div>

To style the thumbnails in CSS:

.thumbnail {
  margin: 0 auto 20px auto;
    width: 200px;
    height: 350px;
    border: 2px solid black;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a dynamic design with a responsive background image and three columns of engaging content placed on top using Bootstrap

I'm struggling to translate a design mockup into Bootstrap 3.3.6 Here is an image showcasing the concept I am aiming for: https://i.sstatic.net/1jZmh.png The blue background represents an image, with grey text boxes overlaid on top (one of which in ...

htmlcsstwitter-bootstrap

Looking to access the layout details of an HTML element similar to what can be done in Firefox's debugger tool?

I am facing a challenge with a aspx.net grid control where I need to extract the first row's information and copy it into another table using JavaScript. To achieve this, I am attempting to calculate the width of each cell in the first row by accessin ...

javascripthtmlcssasp.net

How can I use Angular to automatically check a checkbox while a page is loading?

I have a list of checkboxes, and based on the selected checkbox, offers are displayed. Everything is working fine as expected. Below is the code snippet I have implemented: function Test1Controller($scope) { var serverData = ["Samsung Galaxy Note ...

javascriptjqueryhtmlangularjscheckbox

Altering the text and functionality of buttons with jQuery

A JavaScript method I have is designed to change based on the state of a button, which is determined by using indexOf("..some text.."). $('#add1').click(function(){ if($(this).text().indexOf("Add Me!")) { $.ajax({ type: & ...

javascriptjqueryhtml

Adjusting my navbar to dynamically resize with the changing window dimensions

Seeking guidance on creating a responsive navbar. Currently, I've successfully adjusted the bar's size based on monitor resolution, but the buttons remain static in size. I experimented with using %, vm, and vh, but suspect that there might be a ...

htmlcss

Tips on how to add a file input type:

When working with my HTML code, I encountered an issue. When I change the type attribute to "text", everything works fine. However, when I change it to "file", nothing happens when I click. <input type="file" name="pic[]" accept="image/*">a <inpu ...

jqueryhtml

What is the best method for populating a text area in Pharo with HTML content?

When logging in through Pharo using an HTML form, you can utilize the method of Znclient called formAt:add: followed by a post. I'm interested to know how I can fill a textArea in an HTML form and then make a post request. Is there a specific method f ...

htmlsmalltalkpharopharo-5

Adjusting the color of a value in justGage requires a few simple steps to

Is it possible to modify the color and design of the text in the Value parameter of justGage after creating the gauge? My goal is to change the text color to blue with an underline to give it a link-like appearance. Appreciate your assistance. ...

javascriptcsshtmlraphaeljustgage

Strange Safari 15 bug causing unexpected transformations

Hey there, I'm a div with animation on scroll using GSAP. On Safari 15 (no issues below 15), something strange is happening - parts of the letters are leaving an afterimage on the sides. The code snippet I am using for this animation is: this.$refs.l ...

csssafaritransformgsap

Angular2: using the #ngFor directive to assign a value to a component field

Here's a component I'm working with: @Component({ selector: "expenses-component", templateUrl: "expenses.html" }) export default class ExpensesComponent { private expenses: [] = [{name: "Foo", amount: 100}, {name ...

htmlangulartypescript

Troubleshooting a Border Problem in Bootstrap 5 Accordions

Having trouble with a Bootstrap 5 accordion header that has an icon drop-up menu. The bottom border disappears under the icon and I can't figure out why? HTML <div class="w-50 mt-5 mx-auto"> <div class="accordion favorites-f ...

htmlcssbootstrap-5

Display sourcemaps on Chrome's network panel

Recently, I began utilizing source maps for my SASS code in order to debug more efficiently in Chrome. My understanding was that Chrome should request both the stylesheet resource and the .map resource, however, only the stylesheet is visible in the netwo ...

cssgoogle-chromesasssource-maps

What could be causing the malfunction of the Facebook iframe like button?

Even though it functions offline, there seems to be an issue with its performance online. Here is the code that was used: <iframe src="http://www.facebook.com/plugins/like.php?app_id=125925834166578&amp;href=http%3A%2F%2Fwww.facebook.com%2FBaradei. ...

javascripthtmlfacebookfacebook-like

Best placement for <img> tag in HTML for creating a background image using CSS (excluding CSS3)

I am currently working on a programming project called Broadway through Codeacademy. I have been given the task of adding a background image to the webpage. It seems like an easy task to accomplish. The simplest way to achieve this effect is by using the f ...

htmlcsstwitter-bootstrap

Is your event listener failing to activate?

I have been working on a project where I gather array elements from user input and try to display them in an HTML table. Unfortunately, the event listener seems to not be triggering, and I can't figure out why. Here is the relevant HTML code: ...

javascripthtmldom-events

Is there a way to customize the font size of Material UI Autocomplete?

I'm currently trying to customize the Material UI Autocomplete component with my own CSS. Specifically, I aim to adjust the font size of the input field. Below is my current implementation: <Autocomplete style={{ width: 200, height: 60, ...

cssreactjsmaterial-ui

Converting HTML to CSV using PHP

I need assistance with exporting MySQL fields to CSV. I have successfully exported all fields except the one that contains HTML content. My MySQL table is structured as follows: Name: Address: Profile: The 'Name' and 'Address' fields ...

phphtmlmysqlarrayscsv

Can you point out the syntax error in my flex code?

I'm attempting to redesign my layout grid using flex. It seems that the flex code I commented out is incorrect, possibly due to an issue with setting the width in my .container class. The grid auto property adjusts the columns automatically within my ...

htmlcssflexboxcss-grid

encountering difficulty incorporating menu.php within main.php

I'm currently working on integrating the menu.php file into my main.php. Here is what I have accomplished so far: Main.php <html> <body> <?php include("menu.php"); ?> <p>This is an example to demonstrate how ...

phphtmlinclude

Tips for preserving dynamically generated HTML through Javascript during page reload

I have a straightforward question, but I haven't been able to find a suitable answer. Here's my situation: On my HTML page, I have a form. Using jQuery and AJAX, I submit the form and then use some JavaScript code to change the content of a spec ...

javascriptjqueryhtmlajaxcodeigniter