CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
swennemen
swennemen

Reputation: 955

Centering button over Bootstrap 3 carousel

I'm trying to center a button over a bootstrap 3 carousel, this button is hovering above the carousel.

I tried to wrap the button in a div class and center it with either text-align: center; or margin: 0 auto; without succes.

I can manually set margin-left of the .hover-class; this will work, but it's not perfectly centered. How to center my button?

This is my code:

HTML: 

<!--The slider-->
<section>
    <div class="hover-slide">
            <a href="#page-intro" class="btn btn-default start-me">Let's go</a>
    </div>
    <div id="slider-top" class="carousel slide" data-ride="carousel">

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


    <!--Wrapper for the the slide-->
    <div class="carousel-inner">
        <!--specify first slide-->
        <div class="item active">
            <img src="img/01.jpg" alt="Foto1">
            <div class="carousel-caption">
                <h3>TEST</h3>
            </div>
        </div>
        <!--specify second slide-->
        <div class="item">
            <img src="img/02.jpg" alt="Foto2">
            <div class="carousel-caption">
                <!--<a href="#page-intro" class="btn btn-default start-me">Let's go</a>-->
                <h3>TEST SLIDE 2</h3>
            </div>

        </div>
    </div>

        <a class="carousel-control left" href="#myCarousel" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left"></span>
        </a>
        <a class="carousel-control right" href="#myCarousel" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

</div>

My CSS: 

.hover-slide {
    position: absolute;
    /*margin-left: 30%;*/
    z-index: 10;
}


.carousel .item {
    width: 100%;
    height: 100%;
 }

.carousel .item img {
    width: 100%;
    height: 100%;
}

.btn.start-me {margin: 0 auto;}

Upvotes: 2

Views: 9540

Answers (1)

BENARD Patrick
BENARD Patrick

Reputation: 30975

You need to wrap in column and add text-center class :

Fiddle : http://bootply.com/112692

Extract : 

<section>
    <div class="col-md-12 hover-slide text-center">    // <------   HERE
            <a href="#page-intro" class="btn btn-default start-me">Let's go</a>
    </div>
    <div id="slider-top" class="carousel slide col-md-12" data-ride="carousel">  // <------   HERE

        <ol class="carousel-indicators">
            <li data-target="#slider-top" data-slide-to="0" class="active"></li>
            <li data-target="#slider-top" data-slide-to="1"></li>
            <!--<li data-target="#slider-top" data-slide-to="2"></li>-->
        </ol>

Upvotes: 6

Related Questions