Menu

Carousel et navbar qui ne fonctionnent pas BOOTSTRAP 4 [Résolu]

Messages postés
14
Date d'inscription
dimanche 19 juillet 2015
Dernière intervention
26 décembre 2018
- - Dernière réponse :  anas - 7 févr. 2019 à 12:50
Bonjour,
Je développe un site à l'aide de Bootstrap 4. Cependant, j'ai quelques soucis au niveau de mon carousel et de ma navbar.
Voilà ce que cela donne sur mon site :



J'ai bien intégré mon bloc javascript avant celui de stylesheet dans mon fichier de template (en twig car je fais du symfony)


{% block javascripts %}
<script src="{{asset('/js/bootstrap.min.js')}}"></script>
{% endblock %}
{% block stylesheets %}
<link rel="stylesheet" href="{{asset('/css/style.css')}}">
<link rel="stylesheet" href="{{asset('/css/bootstrap.min.css')}}">
{% endblock %}



Merci d'avance
Afficher la suite 

Votre réponse

2 réponses

Messages postés
24520
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840
0
Merci
Bonjour,
- As tu chargé jquery avant bootstrap ?
- As tu vidé le cache de ton navigateur ?
- As tu vérifié (en utilisant la console du navigateur et en faisant "examiner l'élément") que le JS appliqué à ta navbar est le bon ? (et donc que le chemin vers tes fichiers css / js sont bien pris en compte) ?

par ce que.. bon.. la... comme ça... ça va nous être difficile de te répondre....

aqwxszedcvfrtgbnhyuj
Messages postés
14
Date d'inscription
dimanche 19 juillet 2015
Dernière intervention
26 décembre 2018
-
si je rajoute malgré tout jquery:
 <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>


j'obtiens ça :

jordane45
Messages postés
24520
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
Le premier message.. le favicon.. on s'en fou.
Le second, par contre, semble indiquer un souci.

As tu bien placé tout ton JS à la fin de ta page ? (avant le </body> )
aqwxszedcvfrtgbnhyuj
Messages postés
14
Date d'inscription
dimanche 19 juillet 2015
Dernière intervention
26 décembre 2018
-
oui, voilà on code :

jordane45
Messages postés
24520
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
Il faudrait nous donner le code complet de ta page généré (c'est à dire en faisant afficher la source depuis ton navigateur internet).
Il faudrait également une capture écran de ta console complète.
aqwxszedcvfrtgbnhyuj
Messages postés
14
Date d'inscription
dimanche 19 juillet 2015
Dernière intervention
26 décembre 2018
-
voilà le code source :

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title> ACCUEIL - PROSTAGE </title>

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="/css/bootstrap.min.css">
</head>

<body>
<div class="container-fluid">

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/img/slider1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/img/slider2.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="">ProStage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/formations">Formations <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/entreprises">Entreprises</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/formations">Formations <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/entreprises">Entreprises</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="align-right">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<H1>Bienvenue sur ProStage </H1>

--- le footer --- </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="/js/bootstrap.min.js"></script>

<div id="sfwdt373850" class="sf-toolbar sf-display-none"></div><script nonce="3ebf0cb1cad73c6af627e8b38c83efa9">


et la capture d'écran :

Commenter la réponse de jordane45
Messages postés
14
Date d'inscription
dimanche 19 juillet 2015
Dernière intervention
26 décembre 2018
0
Merci
J'ai résolu le souci du carousel grâce à ce site

https://stackoverflow.com/questions/29027830/getting-cannot-read-property-offsetwidth-of-undefined-with-bootstrap-carousel

Mais toujours pas la navbar...
jordane45
Messages postés
24520
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 février 2019
1840 -
Pour moi tout y est

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title> ACCUEIL - PROSTAGE </title>

<link rel="stylesheet" href="/css/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
</head>

<body>
<div class="container-fluid">

<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block w-100" src="/img/slider1.jpg" alt="First slide">
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/img/slider2.jpg" alt="Second slide">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="">ProStage</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/formations">Formations <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/entreprises">Entreprises</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="/formations">Formations <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="/entreprises">Entreprises</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
</div>
<div class="align-right">
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>

<H1>Bienvenue sur ProStage </H1>

--- le footer --- 
</div>
<div id="sfwdt373850" class="sf-toolbar sf-display-none"></div>
<script nonce="3ebf0cb1cad73c6af627e8b38c83efa9"> </script>

<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.2.1/js/bootstrap.min.js"></script>


</body>
</html>

par contre, j'ai inclus Bootstrap depuis le CDN... donc si ça se trouve le chemin vers tes fichiers n'est pas bon...
J'ai également placé TOUT les SCRIPTS à la fin... avant le </body> .... chose que tu n'avais visiblement pas fait...

Ah.. et comme je n'ai pas ton CSS... il se peut aussi que ça soit lui qui te pose problème...
aqwxszedcvfrtgbnhyuj
Messages postés
14
Date d'inscription
dimanche 19 juillet 2015
Dernière intervention
26 décembre 2018
-
YES PARFAIT

j'ai rajouté
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

et du coup tout marche, merci beaucoupppp
ohh merci ca marche pour moi aussi
Commenter la réponse de aqwxszedcvfrtgbnhyuj