Bootstrap buttons with <a> tag don't group together

Question

First, I am rather new to HTML so this may be simple.

<div class="btn-group pull-center" style="text-align:center">
        <button class="btn btn-large btn-primary" type="button">Home</button>
        <button class="btn btn-large btn-primary" type="button">Forum</button>
        <button class="btn btn-large btn-primary" type="button">Bans</button>
        <button class="btn btn-large btn-primary" type="button">Store</button>  
    <?php
        if($_SESSION['isLogged'] == true) {
            $username = $_SESSION['username'];
    ?>  <a href="logout.php"><button class="btn btn-large btn-primary" type="button">Hello, <?php $username ?></button></a>
        <a href="logout.php"><button class="btn btn-large btn-primary" type="button">Log out</button></a>

    <?php    }else {
    ?>  <a href="login.php"><button class="btn btn-large btn-primary" type="button">Log in</button></a><?php
        }           

        ?>
    </div>

Generally the btn-group class works and they group. However, if I add an A tag to a button, that button will not group.

Here are some screenshots

http://imgur.com/a/G1d6C

Answer 1

This should work for Bootstrap. And I have no buttons here:

<div class="btn-group">
  <a class="btn">Home</a>
  <a class="btn">Forum</a>
  <a class="btn">Bans</a>
  <a class="btn">Store</a>
  <a href="logout.php" class="btn">Hello username</a>
  <a href="logout.php" class="btn">Log out</a>
  <a href="login.php" class="btn">Log in</a>
</div>

Answer 2

You're putting the .btn class inside a <a> tag. But, the twitter-bootstrap framework group buttons only if .btn elements are direct children of .btn-group. Indeed, the rule might be written with .btn-group > .btn.

Put the .btn class on your <a> tag and even remove this uselss button tag and it'll work. For example:

<div class="btn-group pull-center" style="text-align:center">
  <a class="btn btn-large btn-primary" type="button">Home</a>
  <a class="btn btn-large btn-primary" type="button">Forum</a>
  <a class="btn btn-large btn-primary" type="button">Bans</a>
  <a class="btn btn-large btn-primary" type="button">Store</a>  
  <a href="" class="btn btn-large btn-primary" type="button">Hello, Username</a>
  <a href="logout.php" class="btn btn-large btn-primary" type="button">Log out</a>
</div>