I am getting stuck about aligning some buttons on line and all centered with bootstrap.
I have created the following bootply sample. Why do the buttons stack vertically and not horizontally?
Also, I have to mix simple buttons with code like the following
@Html.ActionLink( "REGISTER", "LoginRegister", "Account", new { LoginTabActive = false, RegisterTabActive = true }, new { @class = "btn btn-primary btn-lg center-block" } )
which generates the following markup
<a href="/Account/LoginRegister?LoginTabActive=False&RegisterTabActive=True" class="btn btn-primary btn-lg center-block">REGISTER</a>
In this case the button will expand to occupy all the horizontal space.
Just add Bootstrap's text-center
class to your menuArea div.
HTML:
<div class="menubar" style="background-color: #0055b8; color:#ffffff; height: 30px;">
<h3 class="text-center">menu bar title</h3>
</div>
<div class="text-center">
<a data-toggle="collapse" href="#topMenu" aria-expanded="false" aria-controls="topMenu">
<span class="chevron_toggleable glyphicon glyphicon-chevron-down"></span>
</a>
</div>
<div class="collapse" id="topMenu">
<div class="menuArea text-center">
<button id="mybutton" name="mybutton" class="btn btn-primary btn-lg">1</button>
<button id="mybutton2" name="mybutton2" class="btn btn-primary btn-lg">2</button>
<button id="mybutton3" name="mybutton3" class="btn btn-primary btn-lg">3</button>
</div>
</div>