All geek questions in one place

Bootstrap buttons with <a> tag are not grouped

First off, I'm pretty new to HTML, so it can 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>

Typically, the btn-group class works and they are grouped together. However, if I add the tag A to the button, this button will not be grouped.

Here are some screenshots.

http://imgur.com/a/G1d6C

+4
source share
3 answers

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>
+4
source

You put the .btn class inside the <a> tag. But the twitter-bootstrap frame group buttons only if the .btn elements are direct children of the .btn-group . Indeed, a rule can be written using .btn-group > .btn .

Put the .btn class in your <a> tag and even remove the itelss button tag and it will work. For instance:

 <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>
+2
source

Instead of using buttons, just add the btn class to the a tag. Example:

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

Demo

+1
source

Source: https://habr.com/ru/post/1497087/

More articles:


All Articles