Carousel Bootstrap4

<!DOCTYPE html>
<html>
<head>
	<title>CAROUSEL BOOTSTRAP4 | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="CAROUSEL BOOTSTRAP4">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container mt-5">
		<form class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-xs-12 col-12 mt-2 mb-2">
                <div id="menuCarousel" class="carousel slide" data-ride="carousel" data-interval="6000">
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 1" title="name 1">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 1
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>
                        <div class="carousel-item">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 2" title="name 2">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 2
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>      
                        <div class="carousel-item">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 3" title="name 3">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 3
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>     
                        <div class="carousel-item">
                            <img src="https://source.unsplash.com/random/" class="img-fluid" 
                            alt="name 4" title="name 4">
                            <div class="carousel-caption">
                                <h4 class="bold txt-shadow">
                                   <a href="#">
                                      <i class="fa fa-globe"></i> name 4
                                    </a>
                                </h4>
                                <p ></p>
                            </div>   
                        </div>             
                    </div>
                    <a class="carousel-control-prev" href="#menuCarousel" data-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </a>
                    <a class="carousel-control-next" href="#menuCarousel" data-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </a>
                </div>
            </div>
		</form>
	  </div>      
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</body>
</html>
.txt-shadow{
    text-shadow: 1px 1px 1px #000;
}
.txt-shadow a{
    text-decoration: none;
    color: #fff;
}
#menuCarousel{
    border: 2px solid #000;
    width: 100%;
}
#menuCarousel img{
    width: 100%;
    height: 400px;
}
#menuCarousel p{
    opacity: 0;
}
#menuCarousel h4{
    position: absolute;
    bottom: 0px;
    background: rgba(0,0,0,0.5);
    padding: 5px;
    width: 100%;
    text-align: center;
    font-size: 1rem;
}
.carousel-caption{
    position: absolute;
    right: 4%;
    bottom: 0px;
    left: 4%;
    z-index: 100;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #fff;
    text-align: center;
}

                                    
toggle switch style03

toggle switch style03

Timeline style04

Timeline style04

Profile page with b4

Profile page with b4

Planète animée style01

Planète animée style01

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Input range slider HTML style05

Input range slider HTML style05

Double Scrollbar with Plugin Jquery in table

Double Scrollbar with Plugin Jquery in table

Compteur avec b4

Compteur avec b4

Blog post card 01

Blog post card 01

Alert Bootstrap4 style02

Alert Bootstrap4 style02

Ajouter supprimer une tr dans une table

Ajouter supprimer une tr dans une table

Affichage des images aléatoire avec js

Affichage des images aléatoire avec js