Bootstrap Carousel Caption Top Alignment

Bootstrap Carousel Caption Top Alignment?

Add this to your css to change the element position:

.carousel-caption {
    top: 0;
    bottom: auto;
}

See demo fiddle

How to vertically center a Bootstrap carousel-caption?

You can use the translateY function of the CSS property transform to vertically align elements. Browser support is quite decent, including IE9.
Therefore just add the following to your .carousel-caption CSS.

top: 50%;
transform: translateY(-50%);

Now you need to get rid of the extra bottom space, added by the default bootstrap CSS. Add the following as well to your .carousel-caption CSS.

bottom: initial;

And last but not least give the parent element, in this case .item, the following CSS to prevent blurry elements when it's placed on half a pixel.

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;

Working Example

Bootstrap 4 carousel caption vertical align

TranslateY, and overriding the Bootstrap bottom position should work. You also want to remove the containers.

.carousel-caption {
  transform: translateY(-50%);
  bottom: 0;
  top: 50%;
}

https://www.codeply.com/go/ziV9Qvxms8

How to make carousel-caption appear on top?

change css of .carousel-caption

.carousel-item .carousel-caption {
  position: static;
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
}

working fiddle here

Bootstrap Carousel Caption Center Align

Without the code, I can only guess - right now you have:

<div class="carousel-item">  
<img src="la.jpg" alt="Los Angeles">  
<div class="carousel-caption">  
<h3>Los Angeles</h3>  
<p>We had such a great time in LA!</p>  
</div>  
</div>  

source: w3schools

simple reordering may work, if not show us the code

<div class="carousel-item">  
<div class="carousel-caption">  
<h3>Los Angeles</h3>  
<p>We had such a great time in LA!</p>  
</div>  
<img src="la.jpg" alt="Los Angeles">  
</div>  

How to center caption in Bootstrap 4 carousel?

As of BS alpha 6, the .carousel-item is display:flex; which limits some of the positioning you can do with the contents of carousel-item. This is a known issue: https://github.com/twbs/bootstrap/issues/21611

So, one option is to change the active .carousel-item is display:block;. Then you can simply use text-center to center the contents.

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev{
    display:block;
}

<div class="carousel-inner" role="listbox">
    <div class="carousel-item active text-center p-4">
        <h1>My Carousel</h1> ...is centered!
    </div>
    <div class="carousel-item text-center p-4">
        <h1>2 Carousel</h1> ...is centered!
    </div>
    <div class="carousel-item text-center p-4">
        <h1>3 Carousel</h1> ...is centered!
    </div>
</div>

http://www.codeply.com/go/ja3h44A7bQ

---

Another option is to simply use the flexbox utils, and change the direction to flex-column. Then align-items-center can be used...

      <div class="carousel-inner text-white" role="listbox">
            <div class="carousel-item active align-items-center flex-column p-4">
                <h1>My Carousel</h1> ...is centered!
            </div>
            <div class="carousel-item align-items-center flex-column p-4">
                <h1>2 Carousel</h1> ...is centered!
            </div>
            <div class="carousel-item align-items-center flex-column p-4">
                <h1>3 Carousel</h1> ...is centered!
            </div>
       </div>

http://www.codeply.com/go/9I7voUaDUi

In both cases I've removed the carousel-caption. The carousel-caption should only be used if you want the text to overlay a slide image. There's no reason to use the 'carousel-caption' if there is no image, just put the content inside carousel-item.

---

Also see: Vertically center text in Bootstrap carousel

Vertically center text in Bootstrap carousel

You can use the Bootstrap 4 utility classes (no additional CSS is needed)...

https://www.codeply.com/go/ORkdymGWzM

<div class="carousel slide" data-ride="carousel">
    <div class="carousel-inner text-center">
        <div class="carousel-item active">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 1</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 2</h1>
            </div>
        </div>
        <div class="carousel-item">
            <div class="d-flex h-100 align-items-center justify-content-center">
                <h1>Text 3</h1>
            </div>
        </div>
    </div>
</div>

Add static vertically and horizontally centred caption (or other content) to Bootstrap 4's Carousel

Can you try the following code where your caption's class is carousel-caption

.carousel-caption {
  width: 50%; height: 50%; left:25%; top:25%
}

**issue is resolved by the code snippet above.

---

Related Topics