CODEWITHSUNDEEP
htmltwitter-bootstrapowl-carousel
Bill Noble
Bill Noble

Reputation: 6744

Positioning next/prev buttons along side of owl carousel in Bootstrap

I am trying to position some text buttons either side of the owl carousel in bootstrap 3, vertically centered, and invisible when not viewed on a desktop.

My code looks like this:

<div class="container">       
    <div class="row">
        <div class="col-md-2 text-right visible-desktop">
            <<<
        </div>
        <div class="col-md-8">
            <div id="owlCarousel" class="owl-carousel">
            </div>
        </div>
        <div class="col-md-2 text-left visible-desktop">
            >>>
        </div>
    </div>       
    <div class="row text-center">
        <div class="col-md-offset-2 col-md-8">
            <img id="savePlace" src="/assets/img/icon_paperclip_sm.png"/>
        </div>
    </div>  
</div>

This puts the texts either side of the owl carousel but I cannot work out how to vertically center them, and they don't disappear when viewed on an iPhone. Is this possible?

Upvotes: 0

Views: 2145

Answers (1)

matcygan
matcygan

Reputation: 725

If you know height of the slider you can set it as line-height for button or button's container.

To hide buttons on smaller screens you can use .hidden-sm .hidden-xs classes and add .col-xs-12 .col-md-8 for slider to fit full width of screen.

Try this: http://jsfiddle.net/matcygan/q70wbuwv/9/

Upvotes: 1

Related Questions