Tips for arranging Bootstrap thumbnails in a horizontal row

Could someone assist me with arranging Bootstrap thumbnails side by side instead of vertically stacked? Any advice is appreciated!

Here is the current code snippet for the two thumbnails:

<div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="photos/square.png" alt="...">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="row"> 
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
                <img src="photos/square.png" alt="...">
                <div class="caption">
                    <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
                    <p>...</p>
                    <p><a href="#" class="btn btn-primary btn-ok" role="button">Read More</a></p>
                </div>
            </div>
        </div>
    </div>

Click here to view a screenshot of the current layout.

htmlcssbootstrap-4

Answer №1

Eliminate the <div class="row"> elements along with their closing tags. Currently, you are mandating a distinct "row" by utilizing them, causing a vertical layout.

Answer №2

You made two 'rows'. How about trying this instead:

<div class="row">
<div class="col-sm-6 col-md-4">
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
    <div class="thumbnail">
        <img alt="..." src="photos/square.png">
        <div class="caption">
            <h3 style="font-size:16px;position:relative;left:35px;top:-27px;font-family:Myriad Pro;color:white;">Software Name</h3>
            <p>...</p>
            <p><a class="btn btn-primary btn-ok" href="#" role="button">Read More</a></p>
        </div>
    </div>
</div>

Answer №3

Make the thumbnails fixed width and in-line by removing the second row and adding some CSS.

UPDATE: Included additional CSS to create background colors without using images.

.thumbnail {
    border:1px black solid;
    width:180px;
    display:inline-block;
    background-color:white;
    height:300px;
  }
  .green-space {
    margin:3px;
    height:150px;
    background-color:#3ECE30;
  }
  .green-space .empty-space {
    height:120px;
  }
  .green-space h3 {
    font-size:16px;
    font-family:Myriad Pro;
    color:white;
    background-color:#1F641A;
    text-align:center;
    height:22px;
    line-height:22px;
  }
  .caption {
    position:relative; 
    height:calc(100% - 150px);
    text-align:center;
  }
  .caption .btn{
    position:absolute;
    bottom:10px;
    left:50%;
    margin-left: -45px;
  }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
        <div class="col-sm-6 col-md-4">
            <div class="thumbnail" style="display:inline-block">
                <div class="green-space">
                  <div class="empty-space">
                  </div>
                  <h3>Software Name</h3>
                </div>
                <div class="caption">
                    <p>...</p>
                    <a href="#" class="btn btn-default btn-ok" role="button">Read More</a>
                </div>
            </div>
        </div>
    </div>

Answer №4

Eliminate the div in the second row and its closing div, then they will appear next to each other.

<div class="row"> initiates a new row

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

Using TypeScript with Angular UI Router for managing nested named views in the application

Hey there! I am new to typescript and have a bit of experience with Angular. Lately, I've been struggling to make a common angular-ui-router setup work with typescript. I have a nested named views structure that just doesn't seem to load correctl ...

angularjshtmltypescriptangular-ui-router

Tips for creating a function that utilizes a select option value

I'm struggling with a form that includes two select inputs. I want the second input to only be enabled if the first one has been selected. I attempted using an onclick event, but it didn't work out as expected. Can anyone provide assistance? (apo ...

javascripthtml

PHP search function malfunctioning

I'm feeling quite confused about the current situation. I am utilizing a form that requires a student code input of "lz." <form action="classgrades.php?id=<?php echo $courseid ?>" method="post"> <input type="text" name="studen ...

phpmysqlsqlhtml

JavaScript layout: Thymealf

I have a unique thymeleaf template like so: <body> <div id="layout"> <!-- Menu toggle --> <a href="#menu" id="menuLink" class="menu-link"> <!-- Hamburger icon --> <span>& ...

javascriptcsshtmlthymeleaf

What is the best way to create space between three columns in Bootstrap?

Despite my efforts to find a solution on Stackoverflow, I have not been able to locate exactly what I need. I am trying to evenly space and center three columns across my page. However, when I assign col-md-4 to each column, they end up too close together ...

htmlcsstwitter-bootstrap

Set up bootstrap 5 on your website while incorporating the beloved color scheme of bootstrap

Bootstrap has introduced new color schemes in version 5 compared to version 4. Is it possible to update to Bootstrap 5 while retaining the original color palette of Bootstrap 4 without the need for manual file adjustments? Are there any content delivery ...

cssbootstrap-4bootstrap-5

Is there a way to prompt the native browser message for HTML5 form validation on a custom element?

https://i.sstatic.net/3wuWh.png Can the native validation UI be activated on non-default input elements like divs or similar? I want to develop a custom React element with validation without relying on hidden or invisible input fields. ...

javascripthtmlformsvalidation

Looking to dynamically set a background image using data fetched from an API in a ReactJS project

Looking to incorporate a background image from an API response in ReactJS Here is some sample code: useEffect(() => { axios.get(`https://apiaddress=${API_KEY}`) .then(res=>{ console.log(res); setRetrieved(res.data); console.log(retrieved ...

javascriptcssnode.jsreactjs

Tips for Successfully Passing Personal Parameters Using Html.BeginForm

I am looking to pass some additional parameters from my MVC Form to the Controller. Can anyone provide guidance on how to accomplish this? Specifically, I want to pass parameters for StateName and CityName with values from the form so that I can retrieve t ...

jqueryasp.net-mvchtmlasp.net-mvc-4

What is the process for modifying a Joomla plugin?

Just starting out with Joomla development and recently installed Joomla 2.5 on my local computer for some practice. I have a question about editing Joomla plugins - specifically the layout of the Content - Pagebreak plugin (the pagination that appears wh ...

phpcssjoomla2.5

The tab component is failing to load due to an issue with the Bootstrap tab

I've created a page displaying different locations with two tabs - one for Google Maps and another for weather. For example, take a look at this location: The issue I'm facing is that when switching between the tabs, they don't load fully. ...

javascriptjqueryhtmlcsstwitter-bootstrap

The modal window pops up immediately upon the first click

Experience a dynamic modal element that springs to life with just the click of a button or an image. The magic lies in the combination of HTML, CSS, and jQuery code: <div id="modal-1" class="modal"> <div class="button modal-button" data-butto ...

javascriptjqueryhtmlcss

CSS hover effects are malfunctioning

Having an issue with hover in CSS. Attempting to create a menu bar using saved PNG files, each file within its own div. When applying a class name and hover modifier, it only works on the first element. As the pointer moves to subsequent elements, they are ...

htmlcss

Warning: HTML input values are being cleared when added

I've been working on some code that adds an input field when a button is clicked. When the limit reaches 5 (counter), it displays a bootstrap warning. The issue I'm facing is that after hitting "add field" more than 5 times, the values in the fie ...

javascriptjqueryhtmltwitter-bootstrap

jsx eliminate parent based on dimensions

Imagine I have a DOM structured like this <div className="parent"> <div>child 1</div> <div>child 2</div> </div> If the view is on mobile, I would like the DOM to transform into <div>child 1</ ...

htmlreactjsjsx

Ensuring various conditions with ngIf

I've created a toggle function that updates the text of a link, but I'm struggling to handle multiple conditions. For example, *ngIf="condition1 or condition2". Below is an excerpt from my code: <a routerLink="/ads" class="tip" (click)="togg ...

htmlangular

Tips for extracting title and image from someone else's blog posts to share on your own website

Currently, I am in the process of creating a website where I can showcase my personally curated content. I have been struggling to figure out how to seamlessly integrate this content into my site without relying on an API. My initial idea was to manually ...

javascriptjqueryhtml

Using CSS to apply hidden box shadow to nth child element

I am encountering a challenge with using the CSS selector :nth-child(...) in combination with the box-shadow effect. The intended outcome is as follows: The even-numbered div elements within a specific container should have alternating background colors. ...

htmlcsscss-selectors

What are some ways to modify the appearance of the post title table using CSS?

In this snippet of HTML code- <table style='min-width:60%;height:25px;'> <tr> <td><b><data:post.title></b></td> <td id='date-and-author' style='position: relative;bo ...

htmlcsshtml-table

<ol><li>Arranges elements in a peculiar way if the image is aligned to the left</li></ol>

Explore this comprehensive presentation on combining PDFs online. In this blog post, I have encountered two instances of <ol><li> formatting. The first one is styled properly using the following CSS: .post_content ul, .post_content ol ...

cssimagehtml-listsalignment