Bootstrap: carousel with parallax without background-img - css

Iam trying to do parallax effect with bootstrap carousel at the top. I want to cover it by a content.
Here is the code how I have it now without parallax.
.content{
width: 100%;
height: 500px;
background-color: brown;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/200x80/fff/000" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/200x80/fff/000" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/200x00/fff/000" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="content">
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
I have already tried so many things. I can not use backgroung-img and then fix it becouse Iam using dynamicly rendering objects. I was thinking about z-index and position relative but that one did not work for me either.


This should do it: JS Fiddle
HTML:
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="content">
<p>
lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem lorem
</p>
</div>
<div class="carousel-item active">
<img class="d-block w-100" src="http://placehold.it/200x80/8a2908/000" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/200x80/8a2908/000" alt="Second slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="http://placehold.it/200x80/8a2908/000" alt="Third slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
CSS:
.carousel-inner {
position: relative;
}
.content{
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.content p {
color: #FF8000;
}
.carousel-control-next, .carousel-control-prev {
z-index: 2;
}
I made some colour changes to make the text and the carousel indicators more visible.


So after long thinking I found out a solution.
Insted of using
<div class="carousel-item active">
<img class="d-block w-100 img-fluid" src="${blok.get_obrazek_url(site)}">
</div>
I did it like this
<div class="carousel-item active">
<div class="carousel-image " style="background-image:url('${blok.get_obrazek_url(site)}');"></div>
</div>
and after this I can use background-attachment in my css file.

Related

Text is not wrapping when max-width is set [duplicate]

This question already has answers here:
How can I have text wrap in a child element of an element with nowrap?
(2 answers)
CSS white-space nowrap parent, wrap child
(1 answer)
Closed 24 days ago.
I am trying to make a horizontal scrolling container that contains a list of cards. Each card contains a set image and has details (title and description). The sizes of the cards vary depending the amount of text that is in the details. The max-width a card can grow to is 45em. Even when a card has a max-width, the text on the details side does not wrap and flows out of the card. I think my problem is because of the white-space: nowrap on the container div, but I'm not sure how to correct it.
.c-card {
display: flex;
flex-direction: column;
gap: 1em;
}
#media screen and (min-width: 32em) {
.c-card {
max-width: 45em;
flex-direction: row;
}
}
.container {
overflow: x-scroll;
padding-left: 0;
white-space: nowrap;
}
.container__listItem {
display: inline-block;
margin-right: 1em;
}
<ul class="container">
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>
Lorem ipsum dolor sit amete</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt
Lorem ipsum dolo.
</h3>
<p>Lorem ipsum dolo.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus nullam eget felis.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture"><source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
</ul>

You're absolutely right. Resetting white-space behavior on the details element resolves the problem.
.c-card {
display: flex;
flex-direction: column;
gap: 1em;
}
#media screen and (min-width: 32em) {
.c-card {
max-width: 45em;
flex-direction: row;
}
}
.container {
overflow: x-scroll;
padding-left: 0;
white-space: nowrap;
}
.container__listItem {
display: inline-block;
margin-right: 1em;
}
.c-card__details {
white-space: normal;
}
<ul class="container">
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>
Lorem ipsum dolor sit amete</h3>
<p>Lorem ipsum dolor sit amet,</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmodt Lorem ipsum dolo.
</h3>
<p>Lorem ipsum dolo.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nec ullamcorper sit amet risus nullam eget felis.</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
<li class="container__listItem">
<div class="c-card">
<div class="c-card__image">
<picture class="e-picture" id="js-picture">
<source srcset="https://craftypixels.com/placeholder-image/288x240" media="(max-width: 50em)">
<img src="https://craftypixels.com/placeholder-image/356x240" alt="Alternate Text">
</picture>
</div>
<div class="c-card__details">
<h3>Title Here</h3>
<p>Helo hello heleljaeflfj; ajfdklsjakc</p>
</div>
</div>
</li>
</ul>

Boostrap 4 Carousel video controls disappear on right slide

I am using a combination of Images and Videos in Bootstrap Carousel 4. HTML5 Video controls work fine if I slide the carousel in left direction but if slide carousel in the right direction, video controls either disappear or move towards the extreme left.
I found a reference here Bootstrap Video Carousel Play button/ left & right indicators not appearing, but none of the provided answers work.
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="homeCarousel" class="col-lg-12 col-md-12 no-padding">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="7000">
<div class="carousel-inner">
<div id="p_lt_ctl00_pageplaceholder_p_lt_ctl00_UniversalPageViewer_viewElem">
</div>
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-2" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-1" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" width="1920" height="675" style="display:block;">
<div class="carousel-caption carousel-caption-3" style="display:none;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<video controls="controls" width="1920" height="675" style="display:block;">
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class=""></li>
<li data-target="#demo" data-slide-to="3" class=""></li>
</ol>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>

You should avoid setting height and width in html. Setting those measurements from within css will give you much more predictable and flexible results.
.carousel-item img,
.carousel-item video {
width: 100%;
height: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="homeCarousel" class="col-lg-12 col-md-12 no-padding">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="7000">
<div class="carousel-inner">
<div id="p_lt_ctl00_pageplaceholder_p_lt_ctl00_UniversalPageViewer_viewElem">
</div>
<div class="carousel-item active">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-2" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-1" style="display:block;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://via.placeholder.com/1920x675" alt="" style="display:block;">
<div class="carousel-caption carousel-caption-3" style="display:none;">
<h3 class="carousel-title">Test</h3>
<p class="carousel-detail">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</div>
</div>
<div class="carousel-item">
<video controls="controls" style="display:block;">
<source src="https://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
</video>
</div>
</div>
<ol class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1" class=""></li>
<li data-target="#demo" data-slide-to="2" class=""></li>
<li data-target="#demo" data-slide-to="3" class=""></li>
</ol>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>

Responsive Media queries brand logo

I've made a full screen carousel on a responsive web-page. And added a navbar to the carousel. But this navbar have problems with responsiveness. When I shrink the web site (responsive), the navbar creats a problem about responsiveness: words are nested. How can I fix this? When I add something, I do not see anything. The latter under the carousel. Can you help me?
.carousel-item {
height: 100vh;
min-height: 300px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: relative;
}
.navbar {
margin-top: 50px;
margin-left: 50px;
margin-right: 50px;
border-radius: 3px;
z-index: 1090;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top">
<div class="container">
<a class="navbar-brand" href="#"><img src="https://image.ibb.co/bQEXKz/logo.png" alt=""></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item active">
<a class="nav-link" href="#">ANASAYFA
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">BİZ KİMİZ?</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">ÜRÜNLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">HİZMETLERİMİZ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">RESİM GALERİSİ</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">İLETİŞİM</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"><i class="fas fa-search"></i></a>
</li>
</ul>
</div>
</div>
</nav>
<header>
<div id="carouselExampleIndicators" class="carousel slide fixed-top " data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner" role="listbox">
<!-- Slide One - Set the background image for this slide in the line below -->
<div class="carousel-item active" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>First Slide</h3>
<p>This is a description for the first slide.</p>
</div>
</div>
<!-- Slide Two - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Second Slide</h3>
<p>This is a description for the second slide.</p>
</div>
</div>
<!-- Slide Three - Set the background image for this slide in the line below -->
<div class="carousel-item" style="background-image: url('http://placehold.it/1900x1080')">
<div class="carousel-caption d-none d-md-block">
<h3>Third Slide</h3>
<p>This is a description for the third slide.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</header>
<div class="container">
<div class="hizmetlerimiz-top text-center">
<p>NELER YAPIYORUZ?</p>
<h3>HİZMETLERİMİZ</h3>
<i class="fas fa-ellipsis-h"></i>
</div>
<div class="hizmetlerimiz-content">
<div class="row">
<div class="col-sm-3">
<div class="item-logo">
<img src="images/index.jpg" alt="">
</div>
<h4>RASCHEL ÖRME MAKİNALARI</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/cozum.jpg" alt="">
</div>
<h4>AYRIŞTIRICI ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/levent.jpg" alt="">
</div>
<h4>LEVENT ÇÖZGÜ</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
<i class="fas fa-plus"></i>
</div>
<div class="col-sm-3">
<div class="item-logo">
<img src="images/boya.jpg" alt="">
</div>
<h4>BOYAHANE</h4>
<p> Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Suspendisse iaculis varius cursus. consectetur adipiscing elit.
Suspendisse iaculis varius cursus.</p>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Remove fixed-top class from the <div id="carouselExampleIndicators">.
Replace this:
<div id="carouselExampleIndicators" class="carousel slide fixed-top" data-ride="carousel">
With this:
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">

worked with datalist asp.net control

I have an HTML code, that want to bind to sql server DB and using the data list asp.net control.as well as we know data list can repeat the code to read all data from DB.
but in my code there is a tag that i don't want to repeat.How can i do this with data list?
this is HTML code before binding:
<div id="welcomeHero">
<div id="slideshow-main">
<ul>
<li class="p1 active">
<a href="www.sdsd.adsf">
<img src="images/1_big.gif" width="430" height="290" alt=""/>
<span class="opacity"></span>
<span class="content">
<h1>Title 1</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</span>
</a>
</li>
<li class="p2">
<a href="#">
<img src="images/2_big.gif" width="430" height="290" alt=""/>
<span class="opacity"></span>
<span class="content"><h1>Title 2</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</a>
</li>
<li class="p3">
<a href="#">
<img src="images/3_big.gif" width="430" height="290" alt=""/>
<span class="opacity"></span>
<span class="content"><h1>Title 3</h1><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p></span>
</a>
</li>
</ul>
</div>
<div id="slideshow-carousel">
<ul id="carousel" class="jcarousel jcarousel-skin-tango">
<li><img src="images/1_big.gif" width="206" height="95" alt="#"/></li>
<li><img src="images/2.gif" width="206" height="95" alt="#"/></li>
<li><img src="images/3.gif" width="206" height="95" alt="#"/></li>
</ul>
</div>
</div>
and i don't want to repeat this codes:
<div id="welcomeHero">
<div id="slideshow-main">
<ul>
</ul>
</div>
<div id="slideshow-carousel">
</div>
</div>
or any idea?

How to add a search box with icon to the navbar in Bootstrap 3?

I am using the new Twitter Bootstrap 3, and am trying to place a search box like this (below) in the top navbar:
In Bootstrap 2, it could've ben done like this:
<form class="form-search" method="get" id="s" action="/">
<div class="input-append">
<input type="text" class="input-medium search-query" name="s" placeholder="Search" value="">
<button type="submit" class="add-on"><i class="icon-search"></i></button>
</div>
</form>
But I am not sure how to produce the same in Bootstrap 3 as so much has changed.
The default HTML for the navbar search box form in Bootstrap 3 is:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
How do I modify it to achieve what I need?

I'm running BS3 on a dev site and the following produces the effect/layout you're requesting. Of course you'll need the glyphicons set up in BS3.
<div class="navbar navbar-inverse navbar-static-top" role="navigation">
<div class="navbar-header">
<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>
</button>
<a class="navbar-brand" rel="home" href="/" title="Aahan Krish's Blog - Homepage">ITSMEEE</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li>/notes</li>
<li>/dev</li>
<li>/good-reads</li>
<li>/art</li>
<li>/bookmarks</li>
<li>/all</li>
</ul>
<div class="col-sm-3 col-md-3 pull-right">
<form class="navbar-form" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
UPDATE: See JSFiddle

This is the closest I could get without adding any custom CSS (this I'd already figured as of the time of asking the question; guess I've to stick with this):
And the markup in use:
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
PS: Of course, that can be fixed by adding a negative margin-left (-4px) on the button, and removing the border-radius on the sides input and button meet. But the whole point of this question is to get it to work without any custom CSS.

You could use the segmented buttons example from Bootstrap 3:
<form action="" class="navbar-form navbar-right">
<div class="input-group">
<input type="Search" placeholder="Search..." class="form-control" />
<div class="input-group-btn">
<button class="btn btn-info">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>

I tried #PhilNicholas 's code and got the same problem of #its_me said in the comments that search bar show up on the next line of navbar, and I found that form need to be added an attribute width.
<form role="search" style="width: 15em; margin: 0.3em 2em;">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</div>
</div>
</form>

This one I implemented for my website , If some one got more no's of menu item and longer search bar can use this
Here is the code
<style>
.navbar-inverse .navbar-nav > li > a {
color: white !important;
}
.navbar-inverse .navbar-nav > li > a:hover {
text-decoration: underline;
}
.navbar-collapse ul li {
padding-top: 0px;
padding-bottom: 0px;
}
.navbar-collapse ul li a {
padding-top: 0px;
padding-bottom: 0px;
}
.navbar-brand img {
width: 200px;
height: 40px;
}
.navbar-inverse {
background-color: #3A1B37;
}
</style>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">
<img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin"></a>
<div class="col-md-6 col-sm-8 col-xs-11 navbar-left">
<div class="navbar-form " role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="srch-term" id="srch-term" style="max-width: 100%; width: 100%;">
<div class="input-group-btn">
<button class="btn btn-default" style="background: rgb(72, 166, 72);" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="navbar-brand visible-md visible-lg visible-sm" style="visibility: hidden;" runat="server">
<img src="http://placehold.it/200x40/3A1B37/ffffff/?text=Apllicatin" />
</li>
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li><a runat="server" href="~/">Somthing</a></li>
<li><a runat="server" href="~/">Somthing</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a runat="server" href="~/Account/Register">Register</a></li>
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul> </div>
</div>
</div>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>3 Col Portfolio - Start Bootstrap Template</title>
<!-- Bootstrap Core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<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" href="#">Start Bootstrap</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
<form class="navbar-form navbar-right">
<div class="input-group">
<input type="text" name="keyword" placeholder="search..." class="form-control">
<span class="input-group-btn">
<button class="btn btn-default">Go</button>
</span>
</div>
</form>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<!-- Page Content -->
<div class="container">
<!-- Page Header -->
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">Page Heading
<small>Secondary Text</small>
</h1>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<!-- Projects Row -->
<div class="row">
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
<div class="col-md-3 portfolio-item">
<a href="#">
<img class="img-responsive" src="http://placehold.it/700x400" alt="">
</a>
<h3>
Project Name
</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra euismod odio, gravida pellentesque urna varius vitae.</p>
</div>
</div>
<!-- /.row -->
<hr>
<!-- Pagination -->
<div class="row text-center">
<div class="col-lg-12">
<ul class="pagination">
<li>
«
</li>
<li class="active">
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
<li>
»
</li>
</ul>
</div>
</div>
<!-- /.row -->
</div>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>About</h3>
<ul>
<li>
<i class="glyphicon glyphicon-home"></i> Your company address here
</li>
<li>
<i class="glyphicon glyphicon-earphone"></i> 0982.808.065
</li>
<li>
<i class="glyphicon glyphicon-envelope"></i> anhtuank7c#hotmail.com
</li>
<li>
<i class="glyphicon glyphicon-flag"></i> Fan page
</li>
<li>
<i class="glyphicon glyphicon-time"></i> 08:00-18:00 Monday to Friday
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Support</h3>
<ul>
<li>
Terms of Service
</li>
<li>
Privacy policy
</li>
<li>
Warranty commitment
</li>
<li>
Site map
</li>
</ul>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<h3>Other</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing 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>
<!-- /.row -->
</footer>
<!-- /.container -->
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>

Resources