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 style02

toggle switch style02

Vers le haut

Vers le haut

Profile page with b4

Profile page with b4

Loading style water animation

Loading style water animation

Image hover 04

Image hover 04

Créer une input search animée

Créer une input search animée

Carousel Bootstrap4

Carousel Bootstrap4

Card Panel Bootstrap4 with header and footer

Card Panel Bootstrap4 with header and footer

Bootstrap4 datepicker

Bootstrap4 datepicker

Asidebar Menu Style01

Asidebar Menu Style01

Alert Bootstrap4 style01

Alert Bootstrap4 style01

Ajouter une pagination1

Ajouter une pagination1