Bootstrap Inline Carousel

Question

I am trying to inline a Bootstrap 4 carousel with another inline-block element (represented by an <img> element here). But whenever I put them side-to-side, the carousel element gets shifted upwards by 50% its height. How can I have them perfectly side-by-side?

Repro JSFiddle: https://jsfiddle.net/yok78wrt/2/

Answer 1

Use vertical-align:top;

The vertical-align property in CSS controls how elements set next to each other on a line are lined up.

The working jsfiddle: https://jsfiddle.net/y5a0b18s/

The valid values are:

baseline - This is the default value.
top - Align the top of the element and its descendants with the top of the entire line.
bottom - Align the bottom of the element and its descendants with the bottom of the entire line.
middle - Aligns the middle of the element with the middle of lowercase letters in the parent.
text-top - Aligns the top of the element with the top of the parent element's font.
text-bottom - Aligns the bottom of the element with the bottom of the parent element's font.
sub - Aligns the baseline of the element with the subscript-baseline of its parent. Like where a would sit.
super - Aligns the baseline of the element with the superscript-baseline of its parent. Like where a would sit.
length - Aligns the baseline of the element at the given length above the baseline of its parent. (e.g. px, %, em, rem, etc.)

Answer 2

Go to inspect element and you will get that tag has a property vertical-align: middle. That's why your image is not aligned side by side.

You can add a custom class to your css file and like that

<img class="image-position" src="https://loremflickr.com/200/200">

and in the css file you need to write:

.image-position {
    vertical-align: top;
    border-style: none;
}

after doing that the image and the slider will be side by side as you want.