Topic: List-group messes up when an tag is inside

AdamEsterle free asked 6 years ago


WITHOUT a tag http://postimg.org/image/4030hxnfv/
<div class="list-group">
    <a href="#" class="list-group-item">
        <div class="row">
            <img src="http://placehold.it/50x50" alt="" class="img-circle pull-xs-left">
            <div class="col-md-10">
                <div class="pull-xs-right">
                    ♕
                </div>
                <h4 class="list-group-item-heading">Food</h4>
                <p class="list-group-item-text">$10</p>
            </div>
        </div>
    </a>
</div>
WITH a tag http://postimg.org/image/5awzl6ewb/
<div class="list-group">
    <a href="#" class="list-group-item">
        <div class="row">
            <img src="http://placehold.it/50x50" alt="" class="img-circle pull-xs-left">
            <div class="col-md-10">
                <div class="pull-xs-right">
                    ♕
                </div>
                <h4 class="list-group-item-heading">Food</h4>
                <p class="list-group-item-text">$10</p>
            </div>
            <a href="#">TEST</a>
        </div>
    </a>
</div>

AdamEsterle free answered 6 years ago


Yeah that code works. It's the second set of code that does not work I think it's because I'm next an a tag inside of the a "list-group-item" tag But if I change the a "list-group-item" tag to a div "list-group-item tag, then it works. So maybe disregard this submission. It probably is working correctly

Michal Szymanski staff answered 6 years ago


Are you sure you do not overwrite it with some custom code? Your html works fine for me:
<div class="list-group">
                <a href="http://mdbootstrap.com/" class="list-group-item">
                    <div class="row">
                        <img src="http://placehold.it/50x50" alt="" class="img-circle pull-xs-left">
                        <div class="col-md-10">
                            <div class="pull-xs-right">
                                β™•
                            </div>
                            <h4 class="list-group-item-heading">Food</h4>
                            <p class="list-group-item-text">$10</p>
                        </div>
                    </div>
                </a>
            </div>

AdamEsterle free answered 6 years ago


Works if you change the outer a tag to a div, but then you lose clicking abilities

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Free
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags