CODEWITHSUNDEEP
htmlcsstwitter-bootstraptwitter-bootstrap-3
Max
Max

Reputation: 97

Bootstrap 3: vertically centered buttons

I want to vertically center a group of buttons in a column (see image). The height of the row is dynamic. I've tried a lot of things that I found, but nothing works.

Screenshot: https://www.dropbox.com/s/ztogupb46o1rfym/bootstrap.PNG

<div class="row question even">
    <div class="col-sm-7 col-md-9 text r-text">
        <div>
            dynamic content
        </div>
    </div>

    <div class="col-sm-5 col-md-3 r-answer" id="radio">
        <input class="answerradio" id="question3" name="question3" type="hidden" value="4">

        <div class="btn-group" data-target="question3" data-toggle="buttons-radio">
            <button class="btn btn-primary" data-toggle="button" type="button" value="1">1</button> <button class="btn btn-primary" data-toggle="button" type="button" value="2">2</button>
            <button class="btn btn-primary" data-toggle="button" type="button" value="3">3</button> <button class="btn btn-primary" data-toggle="button" type="button" value="4">4</button>
            <button class="btn btn-primary" data-toggle="button" type="button" value="5">5</button>
        </div>
    </div>
</div>

Here is the my entire code: http://bootply.com/95760

Have some one an idea?

I'm using Bootstrap 3.

Thanks in advance!

Upvotes: 4

Views: 12827

Answers (2)

Mehdi
Mehdi

Reputation: 1

A little bit late but try using the button-group-vertical class instead of button-group:

    <div class="btn-group-vertical" data-target="question3" data-toggle="buttons-radio">
        <button class="btn btn-primary" data-toggle="button" type="button" value="1">1</button> <button class="btn btn-primary" data-toggle="button" type="button" value="2">2</button>
        <button class="btn btn-primary" data-toggle="button" type="button" value="3">3</button> <button class="btn btn-primary" data-toggle="button" type="button" value="4">4</button>
        <button class="btn btn-primary" data-toggle="button" type="button" value="5">5</button>
    </div>

Here is the modified code

Upvotes: 0

Razz
Razz

Reputation: 4005

Try this:

.question{
    position: relative;
}
.r-answer{
    position: static;
}
.r-answer .btn-group{
    position: absolute;
    top: 50%;
    margin-top: -17px;
}

Aslong as the buttons stays the same in size this will get them to align center, otherwise you will need javascript to fix it.

Upvotes: 1

Related Questions