Twitter-bootstrap banner and image postion

Question

Hello I have an issue with position in navigation bar. I would like the picture above to stretch out just like the navigation bar if you see the black line so it looks like it's together. The carousel to be closer to the navigation bar so there is no space between navbar and carousel.

Navbar and carousel

 $('#topnavbar').affix({ offset: { top: $('#banner').height() } }); 

 #topnavbar { margin: 0; } #topnavbar.affix { position: fixed; top: 0; width: 100%; } /*.navbar-nav > li{ padding-left:30px; padding-right:30px; } */ /*navbar colour*/ .navbar-default { background-color: #177f5e; border-color: #ffffff; } .navbar-default .navbar-brand { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #000000; } .navbar-default .navbar-text { color: #ffffff; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #000000; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-toggle { border-color: #ffffff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ffffff; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #000000; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #000000; background-color: #ffffff; } } /*bildspel*/ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; overflow:hidden; } .item.active img { /*Hur lång bilden ska spelas*/ transition: transform 5000ms linear 0s; transform: scale(1.05, 1.05); } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* scrollUp */ #scrollUp { bottom: 20px; right: 20px; padding: 10px 20px; background: #555; color: #fff; } /*Google maps*/ .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="container" id="banner"> <img class="img-responsive center-block" src="http://puu.sh/ropPN/eb19c8f85b.jpg" alt="logo"> </div> <!--Navigeringsfält.--> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Om oss</a> </li> <li><a href="textiltryck.html">Textiltryck</a> </li> <li><a href="transfertryck.html">Transfertryck</a> </li> <li><a href="brodyr.html">Brodyr</a> </li> <li><a href="digitaltryck.html">Digitaltryck</a> </li> <li><a href="tampotryck.html">Tampotryck</a> </li> <li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a> </li> </ul> </div> </div> </nav> </div> <!--Navigeringsfält slut.--> <!--bildspel--> <br> <div class="container"> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner carousel-zoom"> <div class="active item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="lokal"> <div class="carousel-caption"> <h2>Vi har en kapacitet av ca. 2-300 tryck i timmen.</h2> <a href="textiltryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="tampotryck"> <div class="carousel-caption"> <h2>Tampotryck (pad printing på engelska) inkluderar tre komponenter.</h2> <a href="tampotryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="brodyr"> <div class="carousel-caption"> <h2>Man kan få upp till 15 olika färger i en och samma brodyr.</h2> <a href="brodyr.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel" data-slide="next">›</a> </div> </div> 

Answer 1

You can add this to your css and then it will strech so it matches your navbar

#banner img {
  margin: 0 auto;
  width: 100%;
}

 #topnavbar { margin: 0; } #topnavbar.affix { position: fixed; top: 0; width: 100%; } #banner img { margin: 0 auto; width: 100%; } /*.navbar-nav > li{ padding-left:30px; padding-right:30px; } */ /*navbar colour*/ .navbar-default { background-color: #177f5e; border-color: #ffffff; } .navbar-default .navbar-brand { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #000000; } .navbar-default .navbar-text { color: #ffffff; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #000000; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-toggle { border-color: #ffffff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ffffff; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #000000; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #000000; background-color: #ffffff; } } /*bildspel*/ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; overflow:hidden; } .item.active img { /*Hur lång bilden ska spelas*/ transition: transform 5000ms linear 0s; transform: scale(1.05, 1.05); } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* scrollUp */ #scrollUp { bottom: 20px; right: 20px; padding: 10px 20px; background: #555; color: #fff; } /*Google maps*/ .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="container" id="banner"> <img class="img-responsive center-block" src="http://puu.sh/ropPN/eb19c8f85b.jpg" alt="logo"> </div> <!--Navigeringsfält.--> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Om oss</a> </li> <li><a href="textiltryck.html">Textiltryck</a> </li> <li><a href="transfertryck.html">Transfertryck</a> </li> <li><a href="brodyr.html">Brodyr</a> </li> <li><a href="digitaltryck.html">Digitaltryck</a> </li> <li><a href="tampotryck.html">Tampotryck</a> </li> <li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a> </li> </ul> </div> </div> </nav> </div> <!--Navigeringsfält slut.--> <!--bildspel--> <div class="container"> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner carousel-zoom"> <div class="active item"><img class="img-responsive" src="image/lokal.jpg" alt="lokal"> <div class="carousel-caption"> <h2>Vi har en kapacitet av ca. 2-300 tryck i timmen.</h2> <a href="textiltryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="image/tampotryck.jpg" alt="tampotryck"> <div class="carousel-caption"> <h2>Tampotryck (pad printing på engelska) inkluderar tre komponenter.</h2> <a href="tampotryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="image/brodyr.jpg" alt="brodyr"> <div class="carousel-caption"> <h2>Man kan få upp till 15 olika färger i en och samma brodyr.</h2> <a href="brodyr.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel" data-slide="next">›</a> </div> </div> 

Answer 2

Can you add the images? I can't see the carousel images. To have the carousel closer of nav menu, change the margin-bottom to 0 of these class:

.navbar{
    position: relative;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

And there is a br after the Navigate block

<!--Navigeringsfält slut.-->
<!--bildspel-->
<br>
<div class="container">...

Answer 3

This is what do you want?

 #topnavbar { margin: 0; } #topnavbar.affix { position: fixed; top: 0; width: 100%; } #banner img { margin: 0 auto; width: 100%; } /*.navbar-nav > li{ padding-left:30px; padding-right:30px; } */ /*navbar colour*/ .navbar-default { background-color: #177f5e; border-color: #ffffff; margin-bottom:0!important; } .navbar-default .navbar-brand { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #000000; } .navbar-default .navbar-text { color: #ffffff; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #000000; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-toggle { border-color: #ffffff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ffffff; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #000000; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #000000; background-color: #ffffff; } } /*bildspel*/ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; overflow:hidden; } .item.active img { /*Hur lång bilden ska spelas*/ transition: transform 5000ms linear 0s; transform: scale(1.05, 1.05); } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* scrollUp */ #scrollUp { bottom: 20px; right: 20px; padding: 10px 20px; background: #555; color: #fff; } /*Google maps*/ .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="container" id="banner"> <img class="img-responsive center-block" src="http://puu.sh/ropPN/eb19c8f85b.jpg" alt="logo"> </div> <!--Navigeringsfält.--> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Om oss</a> </li> <li><a href="textiltryck.html">Textiltryck</a> </li> <li><a href="transfertryck.html">Transfertryck</a> </li> <li><a href="brodyr.html">Brodyr</a> </li> <li><a href="digitaltryck.html">Digitaltryck</a> </li> <li><a href="tampotryck.html">Tampotryck</a> </li> <li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a> </li> </ul> </div> </div> </nav> </div> <!--Navigeringsfält slut.--> <!--bildspel--> <div class="container"> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner carousel-zoom"> <div class="active item"><img class="img-responsive" src="image/lokal.jpg" alt="lokal"> <div class="carousel-caption"> <h2>Vi har en kapacitet av ca. 2-300 tryck i timmen.</h2> <a href="textiltryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="image/tampotryck.jpg" alt="tampotryck"> <div class="carousel-caption"> <h2>Tampotryck (pad printing på engelska) inkluderar tre komponenter.</h2> <a href="tampotryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="image/brodyr.jpg" alt="brodyr"> <div class="carousel-caption"> <h2>Man kan få upp till 15 olika färger i en och samma brodyr.</h2> <a href="brodyr.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel" data-slide="next">›</a> </div> </div> 

 $('#topnavbar').affix({ offset: { top: $('#banner').height() } }); 

 #topnavbar { margin: 0; } #topnavbar.affix { position: fixed; top: 0; width: 100%; } /*.navbar-nav > li{ padding-left:30px; padding-right:30px; } */ /*navbar colour*/ .navbar-default { background-color: #177f5e; border-color: #ffffff; } .navbar-default .navbar-brand { color: #ffffff; } .navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus { color: #000000; } .navbar-default .navbar-text { color: #ffffff; } .navbar-default .navbar-nav > li > a { color: #ffffff; } .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus { color: #000000; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus { color: #000000; background-color: #ffffff; } .navbar-default .navbar-toggle { border-color: #ffffff; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #ffffff; } .navbar-default .navbar-toggle .icon-bar { background-color: #ffffff; } .navbar-default .navbar-collapse, .navbar-default .navbar-form { border-color: #ffffff; } .navbar-default .navbar-link { color: #ffffff; } .navbar-default .navbar-link:hover { color: #000000; } @media (max-width: 767px) { .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #ffffff; } .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #000000; } .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #000000; background-color: #ffffff; } } /*bildspel*/ .carousel-fade .carousel-inner .item { opacity: 0; transition-property: opacity; overflow:hidden; } .item.active img { /*Hur lång bilden ska spelas*/ transition: transform 5000ms linear 0s; transform: scale(1.05, 1.05); } .carousel-fade .carousel-inner .active { opacity: 1; } .carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right { left: 0; opacity: 0; z-index: 1; } .carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right { opacity: 1; } .carousel-fade .carousel-control { z-index: 2; } @media all and (transform-3d), (-webkit-transform-3d) { .carousel-fade .carousel-inner > .item.next, .carousel-fade .carousel-inner > .item.active.right { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.prev, .carousel-fade .carousel-inner > .item.active.left { opacity: 0; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } .carousel-fade .carousel-inner > .item.next.left, .carousel-fade .carousel-inner > .item.prev.right, .carousel-fade .carousel-inner > .item.active { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } } /* scrollUp */ #scrollUp { bottom: 20px; right: 20px; padding: 10px 20px; background: #555; color: #fff; } /*Google maps*/ .google-maps { position: relative; padding-bottom: 75%; height: 0; overflow: hidden; } .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <div class="container" id="banner"> <img class="img-responsive center-block" src="http://puu.sh/ropPN/eb19c8f85b.jpg" alt="logo"> </div> <!--Navigeringsfält.--> <div class="container"> <nav class="navbar navbar-default"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand"></a> </div> <div id="navbar" class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="index.html">Om oss</a> </li> <li><a href="textiltryck.html">Textiltryck</a> </li> <li><a href="transfertryck.html">Transfertryck</a> </li> <li><a href="brodyr.html">Brodyr</a> </li> <li><a href="digitaltryck.html">Digitaltryck</a> </li> <li><a href="tampotryck.html">Tampotryck</a> </li> <li><a data-toggle="modal" data-target="#kontaktoss">Kontakt</a> </li> </ul> </div> </div> </nav> </div> <!--Navigeringsfält slut.--> <!--bildspel--> <br> <div class="container"> <div id="carousel" class="carousel slide carousel-fade" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carousel" data-slide-to="0" class="active"></li> <li data-target="#carousel" data-slide-to="1"></li> <li data-target="#carousel" data-slide-to="2"></li> </ol> <!-- Carousel items --> <div class="carousel-inner carousel-zoom"> <div class="active item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="lokal"> <div class="carousel-caption"> <h2>Vi har en kapacitet av ca. 2-300 tryck i timmen.</h2> <a href="textiltryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="tampotryck"> <div class="carousel-caption"> <h2>Tampotryck (pad printing på engelska) inkluderar tre komponenter.</h2> <a href="tampotryck.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> <div class="item"><img class="img-responsive" src="http://puu.sh/roqMt/6a07e56dc0.jpg" alt="brodyr"> <div class="carousel-caption"> <h2>Man kan få upp till 15 olika färger i en och samma brodyr.</h2> <a href="brodyr.html" class="btn btn-info" role="button">Läs mer</a> </div> </div> </div> <!-- Carousel nav --> <a class="carousel-control left" href="#carousel" data-slide="prev">‹</a> <a class="carousel-control right" href="#carousel" data-slide="next">›</a> </div> </div>