Bootstrap Scrolling Nav Bar funktioniert nicht richtig

Question

Ich versuche, es richtig funktionieren zu lassen, aber es funktioniert nicht auf Karussellbereich. Es scheint, dass meine About und Industry (Karussell) Abschnitte identisch sind. Ich versuche, die beiden zu trennen, aber immer noch glaubt, dass Karussell Bereich ist in etwa div Abschnitt, was nicht ist .. Danke! Außerdem habe ich den Nav-Test-Link zum Testen auf Karussell gesetzt.

<!------------- navigation --------------> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <!-- Hidden li included to remove active class from about link when scrolled up past about section --> 
 
     <li class="hidden"> 
 
      <a class="page-scroll" href="#page-top"></a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#home">Home</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#about">About</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#myCarousel">test</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#contact1">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav> 
 

 
<!---------- video ----------> 
 

 
<div id="home"></div> 
 

 
<video loop autoplay poster="links/._Aloha-Mundo.jpg" id="bgvid"> 
 
    <source src="links/eb%20vid.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser. 
 
    <source src="links/eb_vid.webm" type="video/webm" />Your browser does not support the video tag. I suggest you upgrade your browser. 
 
</video> 
 
<div class="logo"> 
 
    <img src="links/eb-logo-01.png" /> 
 
</div> 
 

 
<!---------- about --------> 
 
<div id="about"> 
 
    <div class="about-all container col-md-12"> 
 
    <div class="row"> 
 
     <div class=""></div> 
 
     <div class="eb-about col-md-offset-3 col-md-6 col-xs-6"> 
 
     <h1>About Eon-Blue</h1> 
 
     <p>Based in Las Vegas, Nevada, Eon Blue is your complete branding technology solution. By putting a robust scope of capabilities together, we make sure each component is working with the other – all towards achieving your objectives. With web, information 
 
      technology, marketing, software engineering and graphic design all moving in lockstep, our clients avoid the pitfalls of fragmentation...and enjoy the benefits of seamless integration.</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="tech col-md-4"> 
 
     <img src="links/icons-01.png" alt="technology and consulting" class="compass"> 
 
     <h2>Technology &amp; Consulting</h2> 
 
     <p>We’ve put together a team of professionals who are not only adept at what they do, but also great at working with clients, personally, to get the job done. We’re here to advise our clients. To educate them on new technologies and capabilities. 
 
      And most of all, to hear their goals and objectives.</ br> 
 
      We can create the innovative solutions that achieve them. We do our due-diligence before starting any project to make sure that all of the missing puzzles are put together before any development begins to take place on the canvas.</ br> 
 
      Creating sustainable software is important to us and we make sure we get it right the first time.</p> 
 
     </div> 
 
     <div class="software col-md-4"> 
 
     <img src="links/icons-02.png" alt="software development"> 
 
     <h2>Software Development</h2> 
 
     <p>No matter what your objectives, our experienced development team can create the software that helps you accomplish them. Eon Blue will tailor a solution specific to you, built from the ground up. Our approach is:</p> 
 
     <ul class="sd-list"> 
 
      <li>Strategy-driven</li> 
 
      <li>Free from open-source software</li> 
 
      <li>We work closely with our analysts &amp; designers</li> 
 
      <li>Grounded in best practices</li> 
 
      <li>Maintaining the systems once they are up and running</li> 
 
      <li>Testing the product in controlled, real situations before going live</li> 
 
      <li>Reviewing current systems</li> 
 
     </ul> 
 
     </div> 
 
     <div class="data-services col-md-4"> 
 
     <img src="links/icons-03.png" alt="data"> 
 
     <h2>Data Services</h2> 
 
     <p>Data is what moves the world. Yet many companies find the volume of data to be unwieldy, or sometimes downright unmanageable. We help you make sense of data so you can turn it into profits. Our full capabilities include:</p> 
 
     <ul> 
 
      <li>Warehousing</li> 
 
      <li>Scrubbing</li> 
 
      <li>Validations</li> 
 
      <li>Reports</li> 
 
      <li>Conversions</li> 
 
      <li>SRS reporting</li> 
 
      <li>Management</li> 
 
      <li>Mining</li> 
 
      <li>Crystal reports...and more</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<!--------- carousel ---------> 
 
<section id="industries"></section> 
 
<div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
    <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="2" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="3" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="4" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="5" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="6" class=""></li> 
 
    <li data-target="#myCarousel" data-slide-to="7" class=""></li> 
 
    </ol> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
    <div class="item active"> 
 
     <img class="first-slide" src="links/self-insured-groups.png" alt="First slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Self Insured Groups</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="second-slide" src="links/captive-insurance.png" alt="Second slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Captive Insurance</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="third-slide" src="links/workers-comp.png" alt="Third slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Workers Compensation Insurance</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="fourth-slide" src="links/alternative-risk.png" alt="Third slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Alternative Risk</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="fifth-slide" src="links/property-and-casualty.png" alt="Third slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Property and Casualty</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="sixth-slide" src="links/reinsurance-and-excessInsurance.png" alt="Third slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Reinsurance and Excess Insurance</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="seventh-slide" src="links/Self-Funded-Health.png" alt="Third slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Self Funded Health</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="item"> 
 
     <img class="eight-slide" src="links/risk-management.png" alt="Third slide"> 
 
     <div class="container"> 
 
     <div class="carousel-caption"> 
 
      <h1>Risk Management</h1> 
 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute 
 
      irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div> 
 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Answer 1

Um zu verstehen, was passiert ist, ich habe auf den Platzhalter ersetzt Bilder.

Das Problem besteht darin, dass die relative Verknüpfung die Seite nicht zum Karussell scrollt. Um das Problem zu lösen, entfernen Sie col-md-12 von <div class="about-all container col-md-12">. Diese Klasse wird hier nicht benötigt, sondern fügt dem Block, der vor dem Karussell steht, ein Attribut float: left; hinzu. Es führte dazu, dass die Verbindung zu dem Ort führte, an dem das Karussell noch nicht erschienen war.

---

Weitere Empfehlungen

Sie den Abschnitt nicht nur wie ein Lesezeichen verwenden. Teilen Sie Code in Abschnitte ein. Der Code wird übersichtlicher und fehlerresistenter.

Es scheint notwendig, <div class="eb-about col-md-offset-3 col-md-6 col-xs-6"> durch <div class="eb-about col-md-offset-3 col-md-6 col-xs-12"> zu ersetzen.

Verwenden Sie <br /> oder <br> anstelle von </ br>. Und noch besser - einen großen Absatz in kleinere Absätze aufteilen.

Folien haben lange Beschreibungen. Es wäre besser, sie auf kleinen Bildschirmen zu verstecken. Ich habe hidden-xs zu ihnen hinzugefügt.

Dieser Code hilft Header nicht unter dem Menü fallen beim Scrollen:

#home, #about, #industries, #contact1 { 
    margin-bottom: -70px; 
    padding-top: 70px; 
} 

---

Überprüfen Sie das Ergebnis

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'); 
 

 
#home, #about, #industries, #contact1 { 
 
    margin-bottom: -70px; 
 
    padding-top: 70px; 
 
} 
 
#contact1 { 
 
    margin-bottom: 20px; 
 
} 
 

 
img { 
 
    height: auto; 
 
    max-width: 100%; 
 
    width: 100%; 
 
} 
 
.logo { 
 
    margin: 20px auto; 
 
    width: 100px; 
 
}

<!------------- navigation --------------> 
 
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
 
    <div class="container"> 
 
    <div class="navbar-header page-scroll"> 
 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </button> 
 
     <a class="navbar-brand page-scroll" href="#page-top">Start Bootstrap</a> 
 
    </div> 
 

 
    <!-- Collect the nav links, forms, and other content for toggling --> 
 
    <div class="collapse navbar-collapse navbar-ex1-collapse"> 
 
     <ul class="nav navbar-nav"> 
 
     <!-- Hidden li included to remove active class from about link when scrolled up past about section --> 
 
     <li class="hidden"> 
 
      <a class="page-scroll" href="#page-top"></a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#home">Home</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#about">About</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#industries">Carousel</a> 
 
     </li> 
 
     <li> 
 
      <a class="page-scroll" href="#contact1">Contact</a> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
    </div> 
 
    <!-- /.container --> 
 
</nav> 
 

 
<!---------- video ----------> 
 
<section id="home"> 
 
    <div class="container"> 
 
    <img src="http://placehold.it/800x200&text=Video" alt=""> 
 

 
    <div class="logo"> 
 
     <img src="http://placehold.it/100x100&text=Logo" alt=""> 
 
    </div> 
 
    </div> 
 
</section 
 

 
<!---------- about --------> 
 
<section id="about"> 
 
    <div class="about-all container"> 
 
    <div class="row"> 
 
     <div class=""></div> 
 
     <div class="eb-about col-md-offset-3 col-md-6 col-xs-12"> 
 
     <h1>About Eon-Blue</h1> 
 
     <p>Based in Las Vegas, Nevada, Eon Blue is your complete branding technology solution. By putting a robust scope of capabilities together, we make sure each component is working with the other – all towards achieving your objectives. With web, information 
 
      technology, marketing, software engineering and graphic design all moving in lockstep, our clients avoid the pitfalls of fragmentation...and enjoy the benefits of seamless integration.</p> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="tech col-md-4"> 
 
     <img src="http://placehold.it/400x100&text=Icon%201" alt=""> 
 
     <h2>Technology &amp; Consulting</h2> 
 
     <p>We’ve put together a team of professionals who are not only adept at what they do, but also great at working with clients, personally, to get the job done. We’re here to advise our clients. To educate them on new technologies and capabilities. And most of all, to hear their goals and objectives.</p> 
 
     <p>We can create the innovative solutions that achieve them. We do our due-diligence before starting any project to make sure that all of the missing puzzles are put together before any development begins to take place on the canvas.</p> 
 
     <p>Creating sustainable software is important to us and we make sure we get it right the first time.</p> 
 
     </div> 
 
     
 
     <div class="software col-md-4"> 
 
     <img src="http://placehold.it/400x100&text=Icon%202" alt=""> 
 
     <h2>Software Development</h2> 
 
     <p>No matter what your objectives, our experienced development team can create the software that helps you accomplish them. Eon Blue will tailor a solution specific to you, built from the ground up. Our approach is:</p> 
 
     <ul class="sd-list"> 
 
      <li>Strategy-driven</li> 
 
      <li>Free from open-source software</li> 
 
      <li>We work closely with our analysts &amp; designers</li> 
 
      <li>Grounded in best practices</li> 
 
      <li>Maintaining the systems once they are up and running</li> 
 
      <li>Testing the product in controlled, real situations before going live</li> 
 
      <li>Reviewing current systems</li> 
 
     </ul> 
 
     </div> 
 
     
 
     <div class="data-services col-md-4"> 
 
     <img src="http://placehold.it/400x100&text=Icon%203" alt=""> 
 
     <h2>Data Services</h2> 
 
     <p>Data is what moves the world. Yet many companies find the volume of data to be unwieldy, or sometimes downright unmanageable. We help you make sense of data so you can turn it into profits. Our full capabilities include:</p> 
 
     <ul> 
 
      <li>Warehousing</li> 
 
      <li>Scrubbing</li> 
 
      <li>Validations</li> 
 
      <li>Reports</li> 
 
      <li>Conversions</li> 
 
      <li>SRS reporting</li> 
 
      <li>Management</li> 
 
      <li>Mining</li> 
 
      <li>Crystal reports...and more</li> 
 
     </ul> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 
<!--------- carousel ---------> 
 
<section id="industries"> 
 
    <div id="myCarousel" class="carousel slide" data-ride="carousel"> 
 
    <!-- Indicators --> 
 
    <ol class="carousel-indicators"> 
 
     <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
 
     <li data-target="#myCarousel" data-slide-to="1" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="2" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="3" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="4" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="5" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="6" class=""></li> 
 
     <li data-target="#myCarousel" data-slide-to="7" class=""></li> 
 
    </ol> 
 

 
    <div class="carousel-inner" role="listbox"> 
 
     <div class="item active"> 
 
     <img src="http://placehold.it/800x200&text=Slide%201" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Self Insured Groups</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/800x200&text=Slide%202" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Captive Insurance</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/800x200&text=Slide%203" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Workers Compensation Insurance</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/800x200&text=Slide%204" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Alternative Risk</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/800x200&text=Slide%205" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Property and Casualty</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/800x200&text=Slide%206" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Reinsurance and Excess Insurance</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/800x200&text=Slide%207" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Self Funded Health</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="item"> 
 
     <img src="http://placehold.it/800x200&text=Slide%208" alt=""> 
 
     <div class="container"> 
 
      <div class="carousel-caption"> 
 
      <h1>Risk Management</h1> 
 
      <p class="hidden-xs">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</section> 
 

 
<section id="contact1"> 
 
    <div class="container"> 
 
    <h1>Contact</h1> 
 
    <p>Phone</p> 
 
    <p>E-mail</p> 
 
    <p>Address</p> 
 
    <img src="http://placehold.it/800x200&text=Map" alt=""> 
 
    </div> 
 
</section> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>