We help IT Professionals succeed at work.

Bootstrap list items overlap

395 Views
Last Modified: 2017-03-20
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

CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
This problem has been solved!
(Unlock this solution with a 7-day Free Trial)
UNLOCK SOLUTION
Bob SchneiderCo-Owner

Author

Commented:
Thank you!
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019

Commented:
You are welcome.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions