Bootstrap list items overlap

Bob Schneider
Bob Schneider used Ask the Experts™
on
Can someone please tell me why my second list item is overlapping the first in this code (page can be viewed here:

            <div class="list-group">
                <div  class="list-group-item list-group-item-success">
                    <h4 class="h4">Announcer's Portal</h4>
                    <div class="col-xs-1">
                        <img src="/graphics/announcer.jpg" alt="Announcers Portal" class="img-responsive">
                    </div>
                    <div class="col-xs-11">
                        Tell your announcer who is approaching the finish line, which race they are competing in, their age, gender, and where they 
                        are from.  A nice addition to races that are looking to tap in to the social and personal side of fitness events.  Renders
                        very well on an iPad (not included).
                        <br>
                        <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                    </div>
                </div>
                <div  class="list-group-item list-group-item-warning">
                    <h4 class="h4">Announcer</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                    </div>
                <div  class="list-group-item list-group-item-danger">
                    <h4 class="h4">Finish Line Truss</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                </div>
                <div  class="list-group-item list-group-item-info">
                    <h4 class="h4">Finish Line Pix Sponsorship</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                </div>
                <div  class="list-group-item list-group-item-success">
                    <h4 class="h4">Featured Event</h4>
                    <p class="mb-1">
                        Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.
                    </p>
                    <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                </div>
            </div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Most Valuable Expert 2017
Distinguished Expert 2018
Commented:
The code you posted does not appear to match the page 100%. Only the first item above has the <div class="col-xs-?"> items.

The reason you are getting overlap on your page is the column (cells) are not contained inside a row
Try this
            <div class="list-group">
                <div  class="list-group-item list-group-item-success">
                    <h4 class="h4">Announcer's Portal</h4>
                    <div class="row"> <!-- PUT CELLS INSIDE A row -->
                        <div class="col-xs-1">
                            <img src="/graphics/announcer.jpg" alt="Announcers Portal" class="img-responsive">
                        </div>
                        <div class="col-xs-11">
                            Tell your announcer who is approaching the finish line, which race they are competing in, their age, gender, and where they 
                            are from.  A nice addition to races that are looking to tap in to the social and personal side of fitness events.  Renders
                            very well on an iPad (not included).
                            <br>
                            <a href="mailto:bob.schneider@gopherstateevents.com">Request Pricing</a>
                        </div>
                    </div><!-- CLOSE row -->
                </div>
                ...
            </div>

Open in new window


EDIT
<div class="row">  clears the float on the col-xs-?? div's which is what is causing your problem
Bob SchneiderCo-Owner

Author

Commented:
Thank you!
Most Valuable Expert 2017
Distinguished Expert 2018

Commented:
You are welcome.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial