List-group messes up when an tag is inside

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

AdamEsterle free asked 8 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>

Add comment

AdamEsterle free answered 8 years ago

0 0 Best answer

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

Add comment

Michal Szymanski staff answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

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>

Add comment

AdamEsterle free answered 8 years ago

0 0 Best answer

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

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Specification of the issue

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

AdamEsterle

12Support score
14Questions 18Answers 0Snippets