RudziankoŇ≠ RudziankoŇ≠ - 3 months ago 15
HTML Question

Bootstrap: centralize row elements

I have tried this and this answers. But I didn't succeed:

<div class="container">
<div class="btn-group-vertical">
<div class="row row-eq-height" style="overflow: hidden">
<div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px;
padding-bottom: 99999px;">
<button class="btn btn-default">hello</button>
</div>
<div class="col-sm-6" style="display: inline-block; vertical-align: middle; margin-bottom: -99999px;
padding-bottom: 99999px;">
<span class="label label-success"
style="font-size: small; vertical-align: iddle;">World</span>
</div>
</div>
</div>
</div>


enter image description here

I want
World
be centralized by
hello
element. How could I make it happen?

Answer

Just use Bootstrap form-inline.. no extra CSS needed.

<div class="container">
     <div class="form-inline">
       <div class="form-group">
         <button class="btn btn-default">hello</button>
       </div>
       <div class="form-group">
         <span class="label label-success">World</span>
       </div>
     </div>
</div>

http://bootply.com/ZjjHreVVjA

P.S. - btn-group-vertical is for vertical button groups, not vertical alignment.

Comments