scrolling through horizontal bootstrap thumbnails

Hey there, I'm currently working on making the bootstrap thumbnails fit into a Div that has a horizontal scroll. However, I've run into an issue where they are collapsing beneath it instead of being offset properly as shown in the image. Does anyone have any suggestions on how to resolve this? Below is the code snippet I am using.

<div class="container">
    <h1 style="color:white">Merchandise</h1>
    <div style="overflow-x: scroll;width:100%;">
    <?php 
        while($row = mysqli_fetch_array($Merchval)) 
        {
             echo '<div style="float:left;width:200px;display: block;">
                    <div class="thumbnail " style="margin-right:5px;margin-left:5px;">
                        <img src="assets/Merch/'.$row[1].''.$row[2].'" alt="'.$row[1].'">
                        <div class="caption">
                            <h3>'.$row[0].'</h3>
                            <h7>'.$row[3].'</h7>
                            <p>€'.$row[4].'</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> 
                        </div>
                     </div>
                    </div>';
        }
    ?>
    </div>
</div>
htmlcsstwitter-bootstrap

Answer №1

It looks like your code is functioning properly. The issue may lie elsewhere. Have you checked the CSS settings for the .container class?

.container {
  background: darkgray;
}
<div class="container">
  <h1 style="color:white">Merchandise</h1>
  <div style="overflow-x: scroll;width:100%;">
  
    <div style="float:left;width:200px;  display: block;">
      <div class="thumbnail " style="margin-right:5px;margin-left:5px;">
        <img src="http://placehold.it/100" alt="">
        <div class="caption">
          <h3>Test</h3>
          <h7>Test</h7>
          <p>€200</p>
          <p><a href="#" class="btn btn-primary" role="button">Button</a>
        </div>
      </div>
    </div>


    <div style="float:left;width:200px;  display: block;">
      <div class="thumbnail " style="margin-right:5px;margin-left:5px;">
        <img src="http://placehold.it/100" alt="">
        <div class="caption">
          <h3>Test</h3>
          <h7>Test</h7>
          <p>€200</p>
          <p><a href="#" class="btn btn-primary" role="button">Button</a>
        </div>
      </div>
    </div>
    
  </div>
</div>

Answer №2

Finally managed to make it work! Here's the updated code :

<div class="container">
     <h1 style="color:white">Merchandise</h1>  
            <div style="overflow-x: scroll;width:100%;    white-space: nowrap;">
                                 <?php 
   while($row = mysqli_fetch_array($Merchval)) {
        echo '<div style="width:200px;display: inline-block; vertical-align: top;"><div class="thumbnail " style="margin-right:5px;margin-left:5px;">
                          <img src="assets/Merch/'.$row[1].''.$row[2].'" alt="'.$row[1].'">
                          <div class="caption">
                            <h3>'.$row[0].'</h3>
                            <h7>'.$row[3].'</h7>
                            <p>€'.$row[4].'</p>
                            <p><a href="#" class="btn btn-primary" role="button">Button</a> 
                          </div>
                        </div> </div>';
   }
                        ?>
          </div>
        </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

The alignment in Firefox and Google Chrome does not appear to be consistent

The appearance of the content is correct in Google Chrome but incorrect in Firefox. Does anyone have any suggestions on how to fix this for Firefox? ...

htmlcsspositionlesscss-position

After clicking in the Firefox browser, the Window.open function is unexpectedly showing [object Window]

I have added an anchor link that, when clicked, opens a new window with the specified link. Below is the code I used for this purpose: <a href="javascript:window.open('https://www.remax.fi/fi/kiinteistonvalitys/tietosuojaseloste/', &apos ...

javascripthtmlfirefoxbrowserwindow.open

Guide to incorporating crispy forms with Bootstrap 4 in Django

I'm struggling to integrate a bootstrap upload form with a Django form using crispy forms. Does anyone know how to incorporate crispy forms into a bootstrap form? This is an example of a Django crispy form: <form method="post" en ...

pythonhtmldjangobootstrap-4django-crispy-forms

The outcome when submitting an HTML survey

I have a curiosity about what really happens when you click the submit button on an HTML survey like the one displayed below: <INPUT TYPE="radio" NAME="bev" VALUE="no" CHECKED>No beverage<BR> <INPUT TYPE="radio" NAME="bev" VALUE="tea">Te ...

pythonhtmlsurveysubmit-button

Enhance your Datatables experience with the inclusion of a select form

Here is the code I am working with: Javascript: $(document).ready(function() { $('#example').DataTable( { "ajax": '../ajax/data/arrays.txt' } ); } ); HTML <select id="office-select" name="idOffice"> <op ...

htmlajaxdatatables

Is it possible to preserve the <canvas> elements to use for future animation frames?

Currently, I am working on a graph visualization project that involves complex calculations being done on an HTML5 canvas. My goal is to create an interactive animation where the graph remains fixed, but additional elements are overlaid as the mouse moves ...

javascripthtmlcanvas

Ways to conclude a running function

This script has been created by me: $(document).ready(function(){ $("div#tabs a").hover(function(){ rod = this.id $('div.tabber').hide(); $('#tabber_' + rod).fadeIn(); $("div#tabs a").removeClass("ta ...

jqueryhtmlmenutabsfadein

`I noticed that the CSS appears differently when viewed in Mozilla compared to Chrome``

Why do the images with the same CSS property appear different in Chrome and Mozilla? I want them all to float left with equal margins between them, covering the complete area horizontally despite having varying image widths. I'm unsure why there is a ...

htmlcssgoogle-chromefirefox

How can I organize a dictionary based on a specified key order in Jinja2?

Suppose I need to showcase the following data: • b is foo • a is bar • c is baz ...however, my dataset is structured like this (or any other sequence due to JSON's flexibility): { "a": "bar", "b": "foo", "c": "baz" } How can I utilize Jinja2 ...

pythonhtmldjangojinja2

Customize Angular Material styles uniquely across various components

Within my application, I am utilizing two components that contain tab groups. The first component serves as the main page, where I have adjusted the CSS to enlarge the labels by using ViewEncapsulation.None. The second component is a dialog, and I aim to m ...

cssangularangular-material

SQL statement not recognized

My current project involves conducting an experiment using a pre-coded script accessible through the link here. In this experiment, I'm utilizing xampp as my web server with mysql. However, when I attempt to run the authentication page containing the ...

phphtml

Issues with CSS properties not functioning correctly within the class.col function

When attempting to apply specific CSS properties to a particular area (e.g., "Dashboard") by assigning the class name "main" to the div.col function in the HTML, I encountered an issue where the CSS property applied affected the entire page. The following ...

javascripthtmlcssbootstrap-4

The width of my root container does not display at a full 100% in mobile dimensions

After creating a simple React.js project, I set up the folder structure using `npx create-react-app`. Additionally, I added some styling with `* { margin: 0; padding: 0; box-sizing: border-box }`, and specified background colors for the body and #root elem ...

htmlcssreactjs

How can I ensure that a form submission still functions properly even when the submit button disappears due to an onBlur event in React and Next

I am facing an issue with a form on my website that triggers an event upon submission. Within the form, there is a textarea field. When you click on the textarea, a submit button appears. However, it disappears when you click out of the textarea. This fun ...

htmlreactjsreact-hooksform-submitonblur

Pressing the up arrow in Javascript to retrieve the most recent inputs

Is there a way to retrieve the most recent inputs I entered in a specific order? For example: I have an array with 20 elements, and every time I enter something, I remove the first element from the array and add the new input at the end. So, when I press ...

javascripthtmljquerymemoryinput

Troubleshooting problem with AngularJS and jQuery plugin when using links with # navigation

I have integrated a specific jquery plugin into my angularjs single page application. The primary block can be found in the following menu: http://localhost:81/website/#/portfolio This menu contains the following code block: <li> <a href=" ...

javascriptjqueryhtmlangularjs

Styling with CSS and Angular: Loading background images dynamically with a greyscale effect

Incorporating the image displayed above as a background photo in CSS is my current objective using Angular. My aim is to alter the photo path for each new item added to my list. As it stands, the styles are hardcoded, resulting in a constant image that fun ...

jqueryhtmlcssangularjs

Allow checkboxes to function similar to radio buttons within individual rows of a table

I am facing an issue with a table that has multiple rows, each containing one column with three checkboxes. The requirement is for the user to select only one out of the three options in each row. I attempted to solve this using JQuery, but ran into the pr ...

jqueryhtml

What is the best way to calculate the number of squares required to completely fill a browser window in real-time?

I am creating a unique design with colorful squares to cover the entire browser window (for example, 20px by 20px repeated both horizontally and vertically). Each square corresponds to one of 100 different colors, which links to a relevant blog post about ...

javascriptjqueryhtmlcss

Alerts for drop down menu validation with multiple buttons

My goal is to design a multi-step form that collects user information. This form consists of 5 stages: Step 1: User details (Name, email, phone, age, gender) Step 2: Yes or No question Step 3: Yes or No question Step 4: Yes or No question Step 5: Yes o ...

javascriptjqueryhtml