horizontal Bootstrap Image Gallery

I'm having an issue with Bootstrap Thumbnails. Currently, my thumbnails are stacked vertically like this: img01. However, I want them to be in a horizontal layout. What should I do?

This is my code:

HTML:

<div class="hrs" align="center">
    <div class="row">
      <div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
        <div class="thumbnail">
          <img src="img/AxMahsool.jpg" alt="AxMahsool01" class="img-responsive" />
          <img src="img/AxMahsool.jpg" alt="AxMahsool02" class=" img-responsive" />
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-lg-6 col-md-6 col-sm-6">
        <div class="thumbnail">
          <img src="img/AxMahsool.jpg" alt="AxMahsool03" class=" img-responsive" />
          <img src="img/AxMahsool.jpg" alt="AxMahsool04" class=" img-responsive" />
        </div>
      </div>
    </div>
  </div>

CSS:

.hrs{
  display: table;
  margin: 0 auto;
  padding: 20px;
  color: white;

Answer №1

The reason for the issue is due to having separate <div class="row"> containers for each image. To fix this, all images should be placed within the same row container (remove the second <div class="row">) -alternatively- you can try including the following code in your CSS:

.thumbnail>img { display: inline-block; }

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

Tips for ensuring Opera browser compatibility with buttons using the CSS background image property

Is there a way to make background images work on buttons in Opera web browser using CSS? I've tried using the background image property, but it doesn't show up when I use Opera. Strangely enough, it works fine in Firefox. However, I have noticed ...

How to keep jQuery horizontal submenu open when clicking on the menu

Seeking assistance with a menu issue. I have a horizontal menu with subitems that display when clicked, but having trouble with the submenu behavior. When clicking on a submenu item, I want it to remain open and show the related items underneath it. For ex ...

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...

How to set a specific text color when hovering over a link with jQuery

Seeking assistance in customizing a hover effect for spans within links. The current code applies the effect to all links with spans, rather than just the hovered item. Any tips on refining the code to target specific elements would be highly valued. $( ...

Liquid Static Content

What is needed to fix the fluid-fixed layout issue? HTML: <div class="header"> <div class="title">Title</div> <div class="options">Opt</div> </div> CSS: .header{margin:0;padding:0;} .title{margin-right:50px; ...

how to toggle visibility of bootstrap accordion panel using jQuery

I have a bootstrap accordion that I want to customize. Specifically, I only want to enable a panel under specific conditions. The idea is for the second panel to be collapsible only when the first panel is valid. <div class="panel-group" id="accordion" ...

An unusual CSS phenomenon with z-index

I've encountered a peculiar issue with my z-indexing. I have an image positioned relatively with a z-index of 1, and it should be above my navigation that is positioned absolutely with a z-index of -1. The problem is that upon page load, the image ap ...

How can I show hidden column names in the Sencha Touch 2 date picker component with CSS?

I am currently utilizing a date and time picker that has the ability to display ['month', 'day', 'year','hour','minute','ampm']. You can find the source code here. Although everything is function ...

Error encountered: The Bootstrap Carousel function is causing a TypeError as e[g] is not defined

I am attempting to build a dynamic bootstrap carousel using my json data, and I have implemented jQuery-Template for rendering. Essentially, I am generating the carousel slider on-the-fly from my json data with the help of jQuery-Template. Here is a snippe ...

Arrange the items in the last row of the flex layout with equal spacing between them

How can I arrange items in rows with equal space between them, without a large gap in the last row? <div fxFlex="row wrap" fxLayoutAlign="space-around"> <my-item *ngFor="let item of items"></my-item> </div> Current Issue: htt ...

Designing my website to resize and adapt to different screen resolutions using CSS

As I navigate my first week of CSS, HTML, and PHP programming, I encountered a problem with text overlapping and causing issues on my site when scaled according to window size. I'm seeking clarity on what mistakes I may be making. Despite trying medi ...

Creating a logo that scales seamlessly across different web browsers while maintaining responsiveness through

I am working on making this logo align perfectly with all screen resolutions and browsers, while ensuring it stays at the exact center (both vertically and horizontally) of the #container. If the resolution drops below 320px, I want the company name to dis ...

How can I connect the playback speed of an HTML5 video element with Vue.js?

Is it possible to bind the playbackRate of an HTML5 video element without using getElementById in Vue.js? //Example of directly manipulating playbackRate with plain javascript var vid = document.getElementById("myVideo"); vid.playbackRate = 0.5; ...

SQL Sorting Investigation

I am working with a SQL table that contains a column called reference_number. The values in the reference_number column follow the format of x-MMYY-xxxx. (MM represents the month and YY stands for year. -xxxx indicates auto-increment.) My current challen ...

Incorporating Dynamic Javascript: A Step-by-Step Guide

I came across a select object that looks like this: <select id="mySelect" onchange = "start()" > <option>Apple</option> <option>Pear</option> <option>Banana</option> <option>Orange</option> < ...

What size should I use for creating a responsive website?

After scouring the internet, I stumbled upon numerous dimensions referred to as proper for developing responsive designs. However, I am specifically interested in identifying the ideal breakpoints, particularly for mobile devices with small screens like ...

What is the best way to send a parameter from jQuery to PHP?

I am trying to create a simple button that, when clicked, will pass a value from jQuery to a PHP file for execution. The idea is that when the button is clicked, it triggers an onclick event which sends the number "1" to the jQuery code. Then, jQuery shoul ...

Exploring the utilization of attributes with slots in Vue.js

Can attributes be set on a slot so that the element from the parent inherits those attributes? Parent <vDropdown> <button slot="button">new button</button> <ul>content</ul> </vDropdown> Dropdown.vue <d ...

What could be causing the Navbar Collapse feature to malfunction in my Bootstrap setup?

Hey there, I'm facing an issue with the Bootstrap navbar collapse button not working. I've tried everything, followed all the steps in a tutorial, but still can't get it to function properly without altering the Signup and Login buttons. Ca ...

Issues with CSS3 Animation failing to trigger upon hovering over links

Background: Looking to design a visually appealing hover effect for links in the future Current Demo Link: You can view the demo here specifically on Firefox Browser. body { color:#ffffff; font-family:"Helvetica"; font-size:12pt; backgr ...