Arranging Elements in a Vertical Stack Using Bootstrap

I'm currently working with bootstrap to arrange a series of cards side by side, but I'm facing an issue where the cards end up stacking on top of each other instead of aligning horizontally.

<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="col-sm-2">
        <div class='card' style='width:20rem;'>
          <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
            alt='Card image cap'>
          <div class='card-body text-center'>
            <p class='card-text text-center' style='color: black'> Car</p>
            <ul class='list-group list-group-flush'>
              <li class='list-group-item'>
                <div class='row'>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe227;</i><span> Price </span>
                  </div>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe0c8;</i><span>City</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <div class="col-sm-2">
        <div class="card" style='width:20rem;'>
          <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL"
            alt='Card image cap'>
          <div class='card-body text-center'>
            <p class='card-text text-center' style='color: black'> Car</p>
            <ul class='list-group list-group-flush'>
              <li class='list-group-item'>
                <div class='row'>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe227;</i><span> Price </span>
                  </div>
                  <div class='col-md-6'>
                    <i class='material-icons'>&#xe0c8;</i><span>City</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 offset-1">
    </div>
  </div>
</div>

Essentially, my goal is to have these two cards displayed on the same row, one after the other, but I'm struggling to figure out what might be causing them to stack. Could it be due to the size of the cards?

javascripthtmlcssbootstrap-4positioning

Answer №1

The issue lies in the inline styling you have applied to your cards: width: 20rem. This setting restricts the card's width to 20rem, which is causing the next card to move to the next line instead of staying on the same row within the grid (col-sm-2). It's recommended to avoid setting a fixed width for the cards to prevent this issue.

Additionally, it is necessary to add an extra row after declaring col-8. Below is the revised code snippet:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-8">
      <div class="row">
        <div class="col-sm-6">
          <div class='card'>
            <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
            <div class='card-body text-center'>
              <p class='card-text text-center' style='color: black'> Car</p>
              <ul class='list-group list-group-flush'>
                <li class='list-group-item'>
                  <div class='row'>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe227;</i><span> Price </span>
                    </div>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe0c8;</i><span>City</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div class="col-sm-6">
          <div class="card">
            <img class='card-img-top' src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtjjCv9pQRtLSNn-zjQrsdKnCFWVe-WSH7Rf_qJnXm99mrHTZL" alt='Card image cap'>
            <div class='card-body text-center'>
              <p class='card-text text-center' style='color: black'> Car</p>
              <ul class='list-group list-group-flush'>
                <li class='list-group-item'>
                  <div class='row'>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe227;</i><span> Price </span>
                    </div>
                    <div class='col-md-6'>
                      <i class='material-icons'>&#xe0c8;</i><span>City</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-4 offset-1">
    </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

Issue with adding a video to a playlist using Youtube API

While I have successfully implemented GET requests using the Youtube API v3, I am encountering difficulties when trying to make a POST request to add a video to a playlist. Despite trying various approaches such as including the key in the query string, pl ...

javascriptjqueryajaxyoutubeyoutube-api

Vue seems to be experiencing some difficulty displaying the data

I am facing an issue with loading data from firestore asynchronously. Although I can see the data in the log, Vue is only displaying the initial value before the data is loaded. I have tried calling the loading method both using beforeMount() and from a c ...

javascriptvue.jsgoogle-cloud-firestore

Is there a way to keep my <nav> positioned in the top right corner of my header?

I'm in the process of setting up a fresh homepage and I've implemented the code below: menu { width: 100%; height: 60px; background: rgb(0, 0, 0); z-index: 2; position: fixed; } #content { margin: 0 auto; width: 1024px; height: ...

htmlcsswebnav

How to resolve the error "TypeError: 'listener' argument must be a function" in Gulpfile.js?

I am in the process of setting up my development environment and encountering some issues when running gulp in the terminal. I am not sure where this error is originating from. Here is the snippet of code from my Gulpfile.js : var gulp = require(&a ...

javascriptnode.jsgulp

How can I dive into a nested array to access the properties of an object within?

My array, called sportPromise, is structured like this: 0: Array[0] 1: Array[1] 2: Array[2] 3: Array[3] When I run console.log(angular.toJson($scope.sportPromise, 'pretty'));, the output looks like this: [ [], [ { "id": 5932, ...

javascriptarraysangularjslodash

preventing firefox from highlighting text on a webpage

Similar Question: What's the most effective method to prevent text highlighting when clicking inside a div using JavaScript? Is there a way to prevent Firefox from highlighting content when a user clicks and drags? ...

javascriptfirefoxhighlighting

The appearance of the upload button in React using Material-UI seems off

After following the MUI document on React Button upload, I noticed that the UI results were different than expected. Instead of just showing the button UI, there was an additional UI element present. By adding the sx={{display:'none'}} property, ...

javascriptreactjsmaterial-ui

Is it possible for a DIV in one bootstrap column to appear on top of the content in another column?

Is there a way to get a div in the first bootstrap column to overflow the x-axis and have its content display above the second column to the right? <div class="row h-100"> <div class="col-3 bg-info"> <div class="LEFT ...

cssbootstrap-4

What happens when browsers encounter unfamiliar attributes in HTML code

Direct and to the point: if I were to execute: <div id = "thisid" class = "a plethora of classes" mother = "your mother" levelofhotness = "over 9000"> I am aware that Chrome and Firefox (the browsers I typically test with) simply disregard these a ...

htmlcross-browsertags

Efficiently Minimize Bootstrap Components Upon Clicking the Link

I've successfully created a navigation menu that expands and collapses without using a dropdown feature. However, I'm encountering an issue where I can't seem to toggle the div when clicking on a menu link. I attempted to use JavaScript to c ...

javascripthtmlcsstwitter-bootstrapnavigation

Please explain this ES6 syntax to me: Using a colon after a function call

While exploring the documentation for a flux store in React, I came across an example that caught my attention. import {ReduceStore} from 'flux/utils'; class CounterStore extends ReduceStore<number> { getInitialState(): number { ret ...

javascriptreactjsecmascript-6flux

Position the vertical bar directly adjacent to the form input field

Looking for assistance with creating a unique webpage layout that includes a form where the employee ID is visually separated from the rest of the content by a vertical bar extending across the entire page. However, my attempts to achieve this using a gr ...

javascriptcssreactjs

Display the printed outcome in a fresh window

HTML: <form id="dbview" method="post" action="core/process.php"> .... <p style='text-align:center;'> <input id='delete' type='submit' name='process' value='Delete selected'/> < ...

phpjavascriptjqueryajaxwindow

What can I do to prevent masonry images from piling on top of one another?

I have been working on creating a photo gallery using the Bootstrap 5 example on masonry, and everything is working well so far. I have also successfully implemented modal boxes. However, the only issue I'm facing is with the JS Image Loaded not preve ...

javascriptbootstrap-5masonry

Is it possible to scroll by using the dragenter event?

Looking for a way to achieve incremental scroll up and scroll down using jQuery without jQuery UI? Here's the scenario - I have two divs: <div class="upper" style="height:35px;background-color:red;right:0;left:0;top:0;position:fixed;width:100%;z-i ...

javascriptjquery

Having trouble with the response from the Object object?

Can someone assist me with the response I am getting here? I am receiving a response from an API call and trying to store the results from screen_results. However, when I attempt to print it out, all I see is [Object object]. I have tried to stringify it, ...

javascriptnode.jsjson

Exploring recursive looping within a directory using Emscripten's File API

Is there a way to iterate through files in a folder using Emscripten? For example, I have created a folder called '/res' (FS.mkdir('/res')) and added some temporary files and subfolders inside it. How can I go about looping through th ...

javascriptnode.jsemscripten

What is the best way to combine elements from different arrays to create a comprehensive listing?

My current function successfully pulls data from another source to create a listing. However, the data I require is spread across multiple arrays, causing some items to be returned as "undefined." At the moment, I am only fetching data from the products a ...

javascriptjqueryarraysjson

Create beautiful HTML forms with Laravel Collective Forms in Laravel 5.7

I am currently using the Laravel Collective form code shown below: {!! Form::open(['action' => ['CategoryController@sub8', $item1->id], 'method' => 'post']) !!} {{Form::label('postaladdress', &apos ...

phphtmllaravelforms

Exploring the world of web scraping by using Python to loop through HTML elements

Created a Python script to extract information from the website regarding its asset listings. So far, I have successfully retrieved the name of the first coin "Bitcoin," but I'm unable to get the ticker. With 27 pages on the site, each containing 40 ...

pythonhtmlpython-3.xpandasweb-scraping