Unable to display image between two inline-table divs while using Bootstrap

I'm currently developing a website for trading in-game items, but that's not important right now.
The code snippet I am working with is:

<div class="trade">
        <h6><strong>RaiZeN</strong> wants to trade: (5 minutes ago)</h6>
        <div class="items-holder">
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
                <div class="item-rarity">Field-Tested</div>
                <div class="pink"></div>
            </div>
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV08u_mpSOhcjnI7TDglRc7cF4n-T--Y3nj1H6-hBrMW_3LIOWdlU_MlGDqwO6wrvq15C6vp-bnHY36SAm4XbYl0SwhgYMMLJqUag1Og/360fx360f');">
                <div class="item-rarity">Field-Tested</div>
                <div class="pink"></div>
            </div>
        </div>

        <div class="arrow">
            <img src="http://i.imgur.com/dusRcnt.png" />
        </div>

        <div class="items-holder">
            <div class="item-img" style="background-image:url('http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpot7HxfDhjxszJemkV086jloKOhcj8NrrHj1Rd6dd2j6fA9ImniQex_UQ_NT-nJtKRJgU3aFHY_Vm-ybrqjMO56Z3OnXE27HIq-z-DyAtSAyL7/360fx360f');">
                <span class="item-rarity">Battle-Scared</span>
                <div class="red"></div>
            </div>
        </div>
    </div>

JSFIDDLE

It appears that the arrow is not aligned properly with the rest of the content. However, when I remove Bootstrap from the code (remove the first HTML line), it works fine. The issue is, I need to utilize Bootstrap on my website. How can I resolve this discrepancy?

htmlcssstatistics-bootstrap

Answer №1

Take a look at this - https://jsfiddle.net/9d3pexob/3/

The adjustments I implemented are as follows - 

.items-container
{
    background-color: #F4F4F4;
    border-radius: 6px;
    padding: 12px;
    display: inline-block;
    border-collapse: separate;
    border-spacing: 8px 0px;
    vertical-align: middle;
}

Switched from "inline-table" to "inline-block" and included "vertical-align: middle".

Trust that clarifies things for you!

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

Achieving an italicized appearance throughout an HTML document

I recently downloaded a sample page from the Mathjax website and acquired their package from Github to use it locally. In addition, I wanted to incorporate the computer modern font, so I unzipped the file containing ttf files into fonts/cmu. Here's ...

htmlcssmathjax

What does "SPAN CLASS="SKYPE_C2C_FREE_TEXT_SPAN" refer to?

While browsing a website, I noticed the use of this HTML class surrounding customer address information entered in a form. I am curious about the purpose of these tags - perhaps they trigger a specific behavior on Skype? Unfortunately, I couldn't find ...

htmlcssskype

Route parameters do not function correctly with computed properties

I'm facing an issue with my getter function that stores all products. When I try to retrieve a single product dynamically based on this.$route.params.id, it doesn't return any value. The code works fine when I navigate to a specific product, but ...

javascripthtmlvue.jsvuejs2vue-router

Conflicting events arising between the onMouseUp and onClick functions

I have a scrollbar on my page that I want to scroll by 40px when a button is clicked. Additionally, I want the scrolling to be continuous while holding down the same button. To achieve this functionality, I implemented an onClick event for a single 40px s ...

javascripthtmlreactjstypescriptresponsive-design

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

I have an embedded iframe that contains a form with jQuery validation. When errors occur, the content height of the iframe increases dynamically. Below is the script I use to adjust the height of my iframe based on its content: function doIframe(){ o = d ...

javascriptjqueryhtmliframe

Searching for nested divs with the same class name in jQuery can be achieved by using the

Need assistance in locating all divs with a specific class name. Some divs may have nested divs with the parent div's class name. Take this scenario for example: <div class="myForm"> <div class ="myDiv"> <div class ="myDiv"> ...

javascriptjqueryhtml

A div element featuring a border with transparent edges on the top right and bottom left corners

Does anyone know how to code the border for the upper right corner and lower left corner of the box (as shown in the image below)? I would really appreciate some help. Thank you in advance! This is the HTML <div class="carouselle"> <div clas ...

htmlcssbordercss-shapes

Error encountered when compiling SCSS with the '@use' statement

Currently, I am utilizing Gulp for the purpose of compiling scss into css. However, whenever I include a @use statement in my code, it does not compile the css correctly into the css file; instead, it simply duplicates the @use statement. What could be cau ...

csssass

Easiest and quickest method to retrieve metadata from a website

Currently, I am using preg_match to extract the 'title' from websites, however, it is loading very slowly. Here is what I have so far: This code sends links to a function: <?php foreach($savedLinks as $s) { echo "<div class='sa ...

phphtmlpreg-matchmetadata

The dropdown menu appears when the user clicks on an empty area

How can I ensure that the drop-down menu is only activated when the arrow or the name is clicked? I've tried looking at similar questions but haven't found a solution. Currently, clicking anywhere next to "shop" activates the drop-down. Here&apo ...

htmlbootstrap-4

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

javascripthtmlcssangulartypescript

Is there a way to retrieve a list of li tags using BeautifulSoup4 in Python?

I am attempting to extract information from a Persian webpage where I need to retrieve only 3 li tags out of a ul element that contains 6 of them. The issue is that each li tag also has nested li tags within it, so when I use soup.find_all('li'), ...

pythonhtmlbeautifulsouphtml-parsing

showcasing diverse outcomes

I am currently developing a game and I'm stuck on determining which syntax to utilize. My goal is to input any letter into a text box and have it display a different letter. For example, typing the letter 'a' should result in 'H' b ...

phphtml

Is it possible to design this layout within a flex container while ensuring the specific order of elements remains intact for potential future swaps?

Check out this example layout <div class="flex"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item"& ...

htmlcssflexbox

Is it possible to create two header columns for the same column within a Material UI table design?

In my Material UI table, I am looking to create a unique header setup. The last column's header will actually share the same space as the previous one. Picture it like this: there are 4 headers displayed at the top, but only 3 distinct columns undern ...

javascriptcssreactjsmaterial-ui

Using jQuery to modify the collapse behavior in Bootstrap accordion from the "+" sign to the "-" sign

Currently, I am attempting to display the 'minus (hyphen)' sign when a user clicks the button. Despite trying various codes, none seem to be working as expected. Can anyone identify where the mistakes may be? <a role="button" data-toggle="col ...

jqueryhtmltwitter-bootstrap

Why is the feedback section showing a horizontal scrollbar?

I'm puzzled as to why a horizontal scrollbar is appearing in the feedback section. I've examined the elements but can't seem to pinpoint the issue. ...

csshtmlscrollbar

How can CSS and DIVs be utilized to align two smaller content boxes alongside one larger content box?

I'm trying to use CSS to create a layout with three div tags arranged in a specific way. I want two small content boxes stacked on each other, with a small space between them, to the left of a large content box. Any suggestions on how I can achieve t ...

csscss-float

Encountering a connection issue: SMTP connect() failure when using PHPmailer with reCaptcha on a CentOS server

My company is looking to set up a website on a CentOS server that includes a contact form with captcha. I came across PHPMailer and got the code working on my local machine, but when trying to send emails on CentOS, I encountered an error saying "SMTP conn ...

phphtmlphpmailerrecaptcha

Activate the preview mode by transmitting information between two controllers

I'm trying to set up a preview mode in one controller to show an image in another controller using an angular service. However, I'm struggling with the final step of getting the URL from the passed parameter into the ng-src in SideMenuCtrl dynami ...

htmlangularjs