0
After application of Bootstrap the dropdown was blank , I do not know how to proceed.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- As 3 meta tags acima *devem* vir em primeiro lugar dentro do `head`; qualquer outro conteúdo deve vir *após* essas tags -->
<title>POP ART</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="../Home/css/CSS.css" rel="stylesheet">
<!-- HTML5 shim e Respond.js para suporte no IE8 de elementos HTML5 e media queries -->
<!-- ALERTA: Respond.js não funciona se você visualizar uma página file:// -->
<!-- ALERTA: Respond.js não funciona se você visualizar uma página file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class-"conteiner-fluid">
<div class="row">
<div class="col-md-12">
<form id="search-form" class="form-inline" role="form" method="post" action="//www.google.com/search" target="_blank">
<div class="input-group">
<input type="text" class="form-control search-form" placeholder="">
<!--DO NOT NEED TRAILING SLASH "/" As HTML5 FORMS SLASHES ARE NO LONGER REQUIRED--> <span class="input-group-btn"><button type="submit" class="btn btn-primary search-btn" data-target="#search-form" name="q"><i class="fa fa-search"><span class="glyphicon glyphicon-search"></span></i>
</button></span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div id="logo">
<a href="Home.html" title="Home"> <img src="imagem/logo1.png" alt= "erro" title="logo"> </a></div>
</div>
<div class="col-md-8">
<div class="menu1">
<nav1>
<ul>
<li><a href="#">Sobre</a></li>
<li><div class="dropdown">
<button class="dropbtn">Artistas</button>
<div class="dropdown-content">
<a href="#">Andy Warhol</a>
<a href="#">Yayoi Kusama</a>
<a href="#">Roy Lichtenstein</a>
<a href="#">Robert Rauschenberg</a>
<a href="#">Charles Fazzino</a>
<a href="#">Romero Britto</a>
</div> </div> </li>
<li><a href="#">Eventos</a></li>
<li><a href="#">Você Pop-Artista!</a></li>
<li><a href="#">Quem Somos</a></li>
</ul>
</nav1>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<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"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="imagem/header1.png" alt="1">
<div class="carousel-caption box1">
<div class="popart">O que é<p>Pop Art?</p></div>
<div class="mais"><a href="#">Saiba mais</a></div>
</div>
</div>
<div class="item">
<img src="imagem/header2.png" alt="1">
<div class="carousel-caption box1">
<div class="popart">O que é<p>Pop Art?</p></div>
<div class="mais"><a href="#">Saiba mais</a></div>
</div>
</div>
<div class="item">
<img src="imagem/header3.png" alt="3">
<div class="carousel-caption box1">
<div class="popart">O que é<p>Pop Art?</p></div>
<div class="mais"><a href="#">Saiba mais</a></div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<!--<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>-->
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<!--<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>-->
</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class= "artistasobras">OS ARTISTAS E SUAS OBRAS</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="container">
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="imagem/Andy_Cir-01.png"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="imagem/Roy_Cir-01.png"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="imagem/Kusama_Cir-01.png"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="imagem/Robert_Cir-01.png"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="imagem/Charles_Cir-01.png"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="imagem/Britto_Cir-01.png"></a>
</div>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="tz-gallery">
<div class="row">
<div class="col-sm-12 col-md-4">
<a class="lightbox" href="../images/bridge.jpg">
<img src="imagem/1.png" alt="Bridge">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/park.jpg">
<img src="imagem/2.png" alt="Park">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/tunnel.jpg">
<img src="imagem/3.png" alt="Tunnel">
</a>
</div>
<div class="col-sm-12 col-md-8">
<a class="lightbox" href="../images/traffic.jpg">
<img src="imagem/4.png" alt="Traffic">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/coast.jpg">
<img src="imagem/5.png" alt="Coast">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/rails.jpg">
<img src="imagem/6.png" alt="Rails">
</a>
</div>
<div class="col-sm-6 col-md-4">
<a class="lightbox" href="../images/rails.jpg">
<img src="imagem/7.png" alt="Rails">
</a>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
</div>
</div>
<div class="row">
<div class="col-md-12"></div>
</div>
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
<div class="rowfooter">
<div class="col-md-2">
<div class="mapfooter">
<ul>
<li><u>SOBRE</u></li>
<li><a href="#">O Pop Art</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="mapfooter">
<ul>
<li><u>ARTISTAS</u></li>
<li><a href="#">Andy Warhol</a></li>
<li><a href="#">Roy Lichtenstein</a></li>
<li><a href="#">Robert Rauschenberg</a></li>
<li><a href="#">Yayoi Kusama</a></li>
<li><a href="#">Charles Fazzino</a></li>
<li><a href="#">Romero Britto</a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="mapfooter">
<ul>
<li><a href="#"><u>EVENTOS</u></a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="mapfooter">
<ul>
<li><a href="#"><u>VOCÊ POP ARTISTA!</u></a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="mapfooter">
<ul>
<li><a href="#"><u>QUEM SOMOS</u></a></li>
</ul>
</div>
</div>
<div class="col-md-2">
<div class="links">
<form id="search-form" class="form-inline" role="form" method="post" action="//www.google.com/search" target="_blank">
<div class="input-group">
<input type="text" class="form-control search-form" placeholder="">
<!--DO NOT NEED TRAILING SLASH "/" As HTML5 FORMS SLASHES ARE NO LONGER REQUIRED--> <span class="input-group-btn"><button type="submit" class="btn btn-primary search-btn" data-target="#search-form" name="q"><i class="fa fa-search"><span class="glyphicon glyphicon-search"></span></i>
</button></span>
</div>
</div>
</div>
</div>
<div class="rowbot">
<div class="col-md-4"></div>
<div class="col-md-4">
<div class="credito">© Alunos, 2017</div>
</div>
<div class="col-md-4"></div>
</div>
</div>
<!-- jQuery (obrigatório para plugins JavaScript do Bootstrap) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Inclui todos os plugins compilados (abaixo), ou inclua arquivos separadados se necessário -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You have to put the bootstrap and jquery in the <head> of the page.
– Sam