Bootstrap col-md-12 align button

Question

I am trying whole the time to align button center within "col-md-12" But I don't have solution for responsive design. This solution must be placed by button

#player-list-button {
    width: 200px;
    margin-left: auto;
    margin-right: auto;
}

This solution is good, but not for responsive. That means, when I resize browser smaller, this button stay not in the middle of col-md-12, it disappears. Must be placed by col-md-12

#notResponsitiv{
    margin-lef:34%;
}

Sorry, here is my code. My DropDown Buttom i wanna align center.

<div class="col-md-12">
    <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
            <li class="dropdown">
                <button type="button" id="player-list-button" class="btn btn-primary btn-main-style" data-toggle="dropdown">MyItems<span class="caret"></span></button>
                <ul class="dropdown-menu">          
                    <li>item</li>
                    <li>item</li>
                    <li>item</li>                   
                </ul>
            </li>
        </ul>
    </div>
</div>

Version 3 Sadly it does not works.

#player-list-button {
    margin: 0 auto;
    display: block;
    text-align: center;
}

When i use 2 rows, like in following html, the button is on the left side by desktop and if i resize the window, button will disappear:

<div class="container">
   <div class="row">
        <div class="col-md-6" style="background-color:pink">
            <h1>hello</h1>
        </div>
        <div class="col-md-6" style="background-color:pink">
            <h1>hello</h1>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12" style="background-color:pink">
            <div class="collapse navbar-collapse" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="dropdown">
                        <button type="button" id="player-list-button" class="btn btn-primary btn-main-style" data-toggle="dropdown">MyItems<span class="caret"></span></button>
                        <ul class="dropdown-menu">          
                            <li>item</li>
                            <li>item</li>
                            <li>item</li>                   
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
  </div>
</div>

Version 4

Could you please provide a code example on for example http://jsfiddle.net? This would make it easier to understand your problem. — Lukas Gjetting, Jun 05 '16 at 20:21
Just added picture, how should it appears. Please look on "Version 4" — Roma Kap, Jun 07 '16 at 09:07
Solution: http://stackoverflow.com/questions/22578853/how-to-center-buttons-in-twitter-bootstrap-3 — Roma Kap, Jun 07 '16 at 21:41

score 0 · Answer 1 · edited Jun 06 '16 at 00:41

0

#player-list-button {
    margin: 0 auto;
    display: block;
    text-align: center;
}

edited Jun 06 '16 at 00:41

service-paradis

3,333
4
34
43

answered Jun 05 '16 at 21:35

Luis

11
5

that works, but only for the singel button. When i place this button as drop-down menu, so it will be rendered on the left side. And when i placed it simply like button without drop-down menu, it will be placed in the middle. I have to achieve, that the **drop-down-button and these items** will be rendered within col-md-12 in the middle of this column, independly of resizing. Please look on my Post by **Version 3** for the code-example – Roma Kap Jun 06 '16 at 13:50

Bootstrap col-md-12 align button

1 Answers1