The horizontal display of images is currently experiencing issues

I am having trouble displaying images horizontally in a row. I am aiming to show 8 images next to each other, but my current grid system setup is not achieving this. The images are currently stacked on top of each other, but I want them to be aligned horizontally. When I try using col-md-1 or col-md-2, the layout is not coming out as intended. How can I resolve this issue? Thank you in advance!

Here is the code snippet I am working with:

  <div class="row">

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/LogoIcon01_over.png" alt="160x66" >
      </div>
    </div>

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/LogoIcon02_over.png" alt="160x66" >
      </div>
    </div>

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/LogoIcon03_over.png" alt="160x66" >
      </div>
    </div>

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/LogoIcon04_over.png" alt="160x66" >
      </div>
    </div>

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/LogoIcon05_over.png" alt="160x66" >
      </div>
    </div>

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/LogoIcon06_over.png" alt="160x66" >
      </div>
    </div>

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/LogoIcon07_over.png" alt="160x66" >
      </div>
    </div>

    <div class="col-md-1.5">
      <div class = "thumbnail">
        <img src="pics/ViewBrandsButton.png" alt="160x66" >
      </div>
    </div>

  </div>
csstwitter-bootstraptwitter-bootstrap-3

Answer №1

One thing to note is that there isn't a column class that is equivalent to 12.5% or 1/8 of 100%. Images are automatically inline elements. In order to ensure these images stay on a single line when the screen width is at least 992px (col-md-x), here is one method. If you decide to wrap these images with the .thumb class, remember to switch it to inline-block or inline since a div is a block element.

See a demonstration: http://jsbin.com/yivavo/1/

CSS:

.my-images {font-size:0;}/*remove white space for inline elements */
.my-images img {padding:2px}

@media (min-width:992px) {
  .my-images img {width:12.5%;height:auto;}  
}

HTML

   <div class="my-images text-center">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
      <img src="http://placehold.it/166x60/444444/FFFFFF&text=image" alt="">
   </div>

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

Is it possible to update the page title with JQuery or JavaScript?

Is it possible to modify the page title using a tag inside the body of the document with jQuery or JavaScript? ...

javascriptjqueryhtmlcssdom

Updating the CSS style of an inner DIV using JavaScript

Can you provide guidance on how to modify the background color using JavaScript for the different styles listed below? i) Internal Style sheet and/or ii) External Style sheet I am currently working with the card deck slide show available at https://githu ...

javascriptcssbackground-colordivision

Refrain from engaging with "disabled" table rows to prevent user interaction

I have an HTML table with certain rows marked as 'disabled'. To make this clear to the user, I decided to apply a blur filter to the tr, resulting in a table that looks like this: https://i.stack.imgur.com/GcX67.png NOTE: You can view a live ex ...

htmlcss

"Embracing Flexbox for a fully responsive mobile experience

What's the best way to make this flexbox design responsive for mobile devices? I want the layout to look consistent across both desktop and mobile screens. The issue seems to be related to the responsiveness of the flexbox and the smaller size of mobi ...

htmlcssmobileflexboxresponsive

Ways to halt a CSS animation when it reaches the screen boundary

I put together this demo: By clicking, a red box falls down. The issue arises when trying to determine the screen size using only CSS. In my demo, I set the box to fall for 1000px regardless of the actual screen height. Here is the keyframe code snippet ...

javascriptjquerycssanimation

Harnessing conflict in HTML with various versions of jQuery can be a powerful tool for enhancing the

Is it possible to use 2 different jQuery libraries on the same HTML page? I came across some blogs mentioning conflicts, but when I tried to add them both, I had no luck. Can anyone assist me with this? Here is my code: Product slider <link hre ...

jqueryhtmlcssconflict

Achieving equal height in Bootstrap columns

Artwork Hey everyone, I'm facing a small dilemma. Currently, I am tackling a project with a unique design. Within the layout of this project, there is an image section that is causing some trouble for me. I am aiming to create a portion of the webs ...

htmlcssflexboxbootstrap-4

How can we make a link stand out when clicked in jQuery, and additionally display a hidden element?

Check out the codepen: http://codepen.io/tristananthonymyers/full/BRPmKa/ The goal is to have the ".active-link:after" style applied only to the clicked link and show the corresponding page like "#about-page". However, the issue is that the "#about-page" ...

jqueryhtmlcss

Looking to eliminate the vertical spacing of the <hr> tag?

Summary: For a quick solution, just click on the image at the bottom. Greetings to everyone! I am facing an issue with two <div> elements that I need to separate using a <hr class="separator"> element. Below is the CSS code for the ...

htmlcssmarginvertical-alignmentspacing

My jquery filter is not functioning properly

I need help making the active class work on each category when clicked, shifting to the next one. I've tried implementing it but no luck so far. $(document).ready(function() { $('.list-inline-item').click(function() { const value = ...

htmljquerycss

Please disregard clicking on see-through areas of images

Currently working on a game project that involves layering multiple images (tiles) on top of each other to create a sense of depth. However, I have encountered an issue when attempting to click on these overlapping tiles. Due to their transparency, click ...

htmlcssreactjsclicktile

Tips for getting the sidebar to move down on mobile devices

When viewing my website on a mobile device, the sidebar appears above my products. I would like it to be positioned below my products. The sidebar is currently on the left side with content on the right. Is there a more effective way to create a sidebar ...

csstwitter-bootstrapbootstrap-4

What is the process for combining two elements using tailwind?

I am trying to stack two elements on top of each other using tailwind CSS. Here is what I have attempted: <div class = "w-10 h-10" id="container"> <button class = "relative w-4 h-4 bg-red"> Started </button> ...

htmlcsstailwind-css

Accessibility issues detected in Bootstrap toggle buttons

I've been experimenting with implementing the Bootstrap toggle button, but I'm having an issue where I can't 'tab' to them using the keyboard due to something in their js script. Interestingly, when I remove the js script, I'm ...

javascriptjqueryhtmltwitter-bootstraptoggle

Ways to prevent a div containing a lengthy content string from extending beyond other divs

Check out my Codepen project here Here is the HTML code for my personal website: <div id="splash" class="divider"> <h1 class="text-center text-uppercase">vincent/rodomista</h1> <p class="text-center text uppercase">Full Stack ...

htmlcsstwitter-bootstrap

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

htmlcssreactjsfirefoxcss-hyphens

Can anyone suggest a stellar sprite generator for me?

I am in search of a sprite generator to streamline my web development process. With so many options available, I am seeking recommendations for the best tool. Ideally, I want a generator that can produce both a sprite image and corresponding CSS files wi ...

htmlcssspritecss-sprites

The width:auto attribute for images in ie6 is not functioning as expected

I am facing a challenge with dynamically changing and resizing an image element to fit its container. My current approach involves: Resetting the image: // Ensuring the 'load' event is re-triggered img.src = ""; // Resetting dimensions img. ...

javascripthtmlcssinternet-explorerinternet-explorer-6

What makes styling the iconic Browse button (file input) such a challenge?

Many people are curious about how to style a file input in an HTML form, as evidenced by the plethora of well-known techniques available. However, I am more interested in understanding why we encounter such technical limitations that seem so trivial and fr ...

htmlcss

Creating a stylish menu with CSS and Bootstrap featuring two beautifully designed rows

Looking to design a header for a webpage that features a logo on the left side in the center, along with two rows of menu items positioned on the right using CSS and Bootstrap classes. Below is an example layout: ---------------------------------------- ...

htmlcsstwitter-bootstrap