Troubles with div vertical align (Twitter Bootstrap 3)

Question

I've read many same topics but their solution haven't helped me. I've the header where first comes the logo and two buttons at right position. The problem is that those buttons are placed at top. I need to place them along horizontal line.

Giving them top-margin rules with % solves the problem but then comes another. With top-margin rules resizing browser's window gives really big spaces between logo and buttons.

So I'm searching for true bootstrap's solution :) Maybe my header's mark-up isn't correct?

<div id="header" class="row">
<div class="col-md-6 col-md-push-1">
    <div class="moduletable">               
        <div class="custom">
            <p><img class="img-responsive" src="/images/logo_ru/logo.png" alt="Школа Успешного Общения" /></p>
        </div>
    </div>
</div>

<div class="col-md-6 btn-group col-md-push-1">
    <div class="col-md-3 col-md-push-1">        
        <div class="moduletable_consultation">
            <div class="custom_consultation"  >
                <p><em>Бесплатная консультация</em></p>
                <div class="row">
                    <div class="btn-group">
                        <div class="col-md-12">
                            <a class="btn btn-warning btn-lg" href="/component/chronoforms5/?chronoform=Anketa-v5">ЗАПИСАТЬСЯ</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3 col-md-push-1">
        <div class="moduletable">                   
            <div class="custom"  >
                <div class="social_buttons_box">
                    <div class="btn-group">
                        <a class="btn btn-warning btn-lg" href="#">О Нас</a>
                    </div>

                    <div class="social_b_header">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none"data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Waiting for help!

Here is live demo: http://www.kuzma.tk

Here is JsFiddle: http://jsfiddle.net/DTcHh/154/

Edit: I'm using placeholders(Joomla CMS) in markup. Just for convenience:

<div id="header" class="row">
<div class="col-md-6 col-md-push-1">
    <jdoc:include type="modules" name="header-2" style="xhtml" />
</div>

<div class="col-md-6 btn-group col-md-push-1">
    <div class="col-md-3 col-md-push-1"><jdoc:include type="modules" name="header-4" style="xhtml" /></div>
    <div class="col-md-3 col-md-push-1"><jdoc:include type="modules" name="header-3" style="xhtml" /></div>
</div>

Edit2: the live version's header has been rewritten, but still no luck

score 0 · Answer 1 · answered Feb 14 '14 at 14:44

Maybe this helps

<div id="header" class="row">
<div class="col-md-6 col-md-push-1">
    <div class="moduletable">               
        <div class="custom">
            <p><img class="img-responsive" src="/images/logo_ru/logo.png" alt="Школа Успешного Общения" /></p>
        </div>
    </div>
</div>

<div class="col-md-6">
    <div class="col-md-3">        
        <div class="moduletable_consultation">
            <div class="custom_consultation"  >

                <div class="row">
                  <div class='col-md-1'>
                  <p><em>Бесплатная консультация</em></p>
                  </div>
                       <div class='col-md-2 col-md-offset-6'>
                            <a class="btn btn-warning btn-lg" href="/component/chronoforms5/?chronoform=Anketa-v5">ЗАПИСАТЬСЯ</a>
                  </div>

                </div>
            </div>
        </div>
    </div>

    <div class="col-md-3">
        <div class="moduletable">                   
            <div class="custom"  >
                <div class="social_buttons_box">
                    <div class="btn-group col-md-offset-12">
                        <a class="btn btn-warning btn-lg" href="#">О Нас</a>
                    </div>

                    <div class="social_b_header">
                        <div class="row">
                            <div class="col-md-2 ">
                                <div class="yashare-auto-init" data-yashareL10n="ru" data-yashareType="none"data-yashareQuickServices="vkontakte,facebook,twitter,odnoklassniki"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
  </div>

Hi! I've updated my live demo: kuzma.tk Very strange, but there are still those errors... Can't find what I'm doing wrong. P.S. by they way the text "Бесплатная консультация" now isn't over button as it was. It's inline — Kuzma, Feb 14 '14 at 15:51
Hi! I've removed the offsets entirely. As I've noticed there are two options: remove them or make them '12'. But the buttons are still at the top... — Kuzma, Feb 14 '14 at 16:18
By they way. Once the logo is loaded the buttons are placed at top. Here bootply.com/113746 the logo is absent and of this situation it seems that it looks OK — Kuzma, Feb 14 '14 at 16:20
No, it's still as it was before :( You could check the live demo. I always post there newest mark-up once I find a better solution. But now I'm stuck... — Kuzma, Feb 14 '14 at 17:33
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47520/discussion-between-arun-and-kuzma) — Arun, Feb 14 '14 at 17:38

score 0 · Accepted Answer · answered May 05 '14 at 11:41

After so long time finally I've found the solution. Only it lacks the two features: doesn't align pictures, don't give the possibility to achieve more subtle vertical height's align. http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height

Troubles with div vertical align (Twitter Bootstrap 3)

2 Answers2