CODEWITHSUNDEEP
htmlcssbootstrap-4
The Dead Man
The Dead Man

Reputation: 5566

How to make carousel-caption appear on top?

I have a simple bootstrap 4 carousel, I would like a carousel caption to appear on top instead of bottom something like this below.

enter image description here

update: HERE IS JSFIDLE WITH FULL CODE

carousel demo

Here is what I have tried so far

HTML

<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <div class="pull-left">My Gallery Title</div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
            </div>
            <div class="modal-body">
                <div id="demo" class="carousel slide" data-ride="carousel">

                    <!-- Indicators -->
                    <ul class="carousel-indicators">
                      <li data-target="#demo" data-slide-to="0" class="active"></li>
                      <li data-target="#demo" data-slide-to="1"></li>
                      <li data-target="#demo" data-slide-to="2"></li>
                    </ul>

                    <!-- The slideshow -->
                    <div class="carousel-inner">
                      <div class="carousel-item active">
                            <div class="carousel-caption">
                                    <h3>Heading 1</h3>
                                    </div>
                        <img src="https://placeimg.com/600/400/nature/1" alt="Los Angeles">
                      </div>
                      <div class="carousel-item">
                            <div class="carousel-caption">
                                    <h3>Heading 2</h3>
                                    </div>
                        <img src="https://placeimg.com/600/400/nature/2" alt="Chicago">
                      </div>
                      <div class="carousel-item">
                            <div class="carousel-caption">
                                    <h3>Heading 3</h3>
                                    </div>
                        <img src="https://placeimg.com/600/400/nature/3" alt="New York">
                      </div>
                    </div>

                    <!-- Left and right controls -->
                    <a class="carousel-control-prev" href="#demo" data-slide="prev">
                      <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#demo" data-slide="next">
                      <span class="carousel-control-next-icon"></span>
                    </a>
                  </div>

            </div>
            <div class="modal-footer">
                <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
                <!--end modal-footer-->
            </div>
            <!--end modal-content-->
        </div>
        <!--end modal-dialoge-->
    </div>
    <!--end myModal-->>
</div>

CSS

.carousel-caption {
    position: absolute;
    right: 15%;
    top: -42px;
    left: 15%;
    z-index: 999999999;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

Unfortunately, with this solution, my carousel caption disappear.

What do I need to do to get what I want?

Upvotes: 0

Views: 1151

Answers (3)

Ernest
Ernest

Reputation: 199

Use property relative in div with class ".carousel-item"

.carousel-item{
  position:relative;
}
.carousel-caption {
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  text-align:center;
  z-index: 999999999;
  padding-top: 5px;
  color: #fff;
}

Full working example in codepen: https://codepen.io/anon/pen/bJygvj

Upvotes: 0

Zuber
Zuber

Reputation: 3473

change css of .carousel-caption 

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

working fiddle here

Upvotes: 1

nabil
nabil

Reputation: 15

Change the value of top to 0. The carousel caption will move to top of your carousel exactly opposite to carousel indicators. Try using the inspect element and check the position of your concern element.

Upvotes: 1

Related Questions