Bootstrap Carousel Button Position

Question

I need to change the position of some element in a bootstrap carousel.

I have this example slide and i want to change position for the primary button but i don't find any type of suggest online.

<div class="carousel-inner">
        <div class="item active">
            <img id="sliderImage" src="~/Content/images/SfondoF&VHomeSlide.png">
            <div class="container">
                <div class="carousel-caption" >
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="Slide" align="center" style="margin-top:30px">
                            <a class="btn btn-lg btn-primary" href="http://getbootstrap.com">Learn More</a>
                    </div>
                </div>
            </div>
        </div>

Please, can you help me?

Thanks to all

When you use the bootstrap class "btn btn-lg btn-primary" the button is automatically positioned in the bottom of the image inserted. I need to know how to change the prefixed value. I know how to set a new css configuration for the button. Thanks to all — user5297740, Jan 05 '16 at 11:10

score 1 · Answer 1 · answered Jan 05 '16 at 10:58

1

Add an id to your button and change the position in CSS, hope that help

Something like this ...

HTML :

    <a class="btn btn-lg btn-primary" href="http://getbootstrap.com" id="test">Learn More</a>

CSS :

    #test{padding-top:80px;}

answered Jan 05 '16 at 10:58

codepervert

11
3

But the position is already setting in the bottom of the image from bootstrap. Where i can change the default setting for this type of button? – user5297740 Jan 05 '16 at 11:01

score 1 · Accepted Answer · answered Jan 05 '16 at 11:26

you change carousel-caption class.

try this:

    <div class='item active'>
    <img class='sliderImage' src='images/man2.jpg' alt=''>
<div class='container'>
<div class='col-sm-8'>
<div class='carousel-content'>
<a class='btn btn-lg btn-primary' href="http://getbootstrap.com">Learn More</a>
</div>
</div>
</div></div>

Bootstrap Carousel Button Position

2 Answers2