Avatar of Bob Schneider
Bob Schneider
Flag for United States of America asked on

Bootstrap list items overlap

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

BootstrapCSSWeb Development

Avatar of undefined
Last Comment
Julian Hansen

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Julian Hansen

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
Bob Schneider

ASKER
Thank you!
Julian Hansen

You are welcome.
All of life is about relationships, and EE has made a viirtual community a real community. It lifts everyone's boat
William Peck