First image is for desktop view.it is alright , but when i watch the mobile view in browser . the h1 is going up and not showing in screen.
//second image is for mobile view. i hope have explained the problem here.
html code
<div class="container" id="slide">
<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="img/bg3.jpg" alt="Los Angeles" style="width:100%; max-height: 900px;">
<div class="carousel-caption">
<img src="img/logo1.png" width="50px;" height="50px;">
<h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom: auto; ">Bluebay Systems Ltd</h1>
<h3 style="color:white; font-weight: bold;padding-bottom: 50px;">Complete IT Solution For Your Every Need</h3>
<br>
<br>
Find Out More
</div>
</div>
<div class="item" style=" max-height: 900px;">
<img src="img/bg1.jpg" alt="Chicago" style="width:100%; max-height: 900px;">
<div class="carousel-caption">
<img src="img/logo1.png" width="50px;" height="50px;">
<h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom:auto; ">Bluebay Systems Ltd</h1>
<h3 style="color: white; font-weight: bold;padding-bottom: 50px;" >Complete IT Solution For Your Every Need</h3>
<br>
Find Out More
</div>
</div>
<div class="item">
<img src="img/bg.jpg" alt="New york" style="width:100%; max-height: 900px;">
<div class="carousel-caption">
<img src="img/logo1.png" width="50px;" height="50px;">
<h1 style="font-size: 75px; font-weight: bold; color: #fc4128; text-shadow: 2px 2px #00a0c6; padding-bottom: auto; ">Bluebay Systems Ltd</h1>
<h3 style="color: white; font-weight: bold; padding-bottom: 50px;padding-top: 10px;" >Complete IT Solution For Your Every Need</h3>
<br>
Find Out More
</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>
css code
#slide{
width: 100%;
padding-left: 0px;
padding-right: 0px;
}
Please check Bootstrap css and find the following.
#media screen and (max-width: 767px) {
/* Hide captions class */
.carousel-caption {
display: none
}
}
Add on bottom of last CSS file, or in media.css for CSS queries:
#media screen and (min-width: 300px) and (max-width: 767px){
/* Hide captions class */
.carousel-caption {
display: block !important;
}
}
Related
Everything is going great, but I don't see this right and left arrors in my slide show. What should I do to fix it? I did the exactly what is in bootstrap documentation. I tried to look at on google, but couldn't find anything related to this issue. I need your help with this issue, please.
(it still doesnt upload my post, so filling the blanks)
body .container-fluid {
padding: 0; /* the left and right side of body was a bit empty. When i did margin:0 padding:0 for the body it didn't work, but on google developer tools I saw that container-fluid had padding right, and left. So making them 0.*/
}
body {
text-align: center;
}
.title-image {
width:100%;
}
.download-button {
margin: 15px 13px;
}
.big-heading {
font-family: "Montserrat", "sans-serif";
font-weight: bold;
font-size: 2.2rem;
line-height:1.5;
margin-top: 70px;
}
.first_part {
color: white;
background-color: #F27E48;
text-align: left;
}
.container-fluid {
padding: 3% 3% 6% 5% !important;
}
.navbar-brand {
font-family: 'Ubuntu', sans-serif;
}
#courses {
padding:50px 100px 50px;
background-color: azure;
}
#courses>p{ /*only for child p of courses id, not grandchild etc */
width:60%;
margin: 18px auto 24px;
}
.card-body p{
text-align: left;
}
#how {
padding:50px 70px 50px;
background-color: rgb(243, 243, 178);
}
#how img {
height:280px;
width:330px;
}
.row div {
margin-top:10px;
}
.outcome {
width:70%;
margin:20px auto;
background-color: rgb(236, 223, 223) ;
border-radius: 8px;
}
.big {
font-weight: bold;
font-size: 2rem;
font-family: 'Noto Serif', serif;
}
#outcomes {
padding:50px 70px 50px;
}
#outcomes a{
border:1px solid black;
border-radius: 10px;
}
#outcomes a:hover {
color: white;
background-color: gray;
}
.student-image {
height: 350px;
width: 450px;
}
#comments {
padding: 50px 70px 50px;
background-color: azure;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data Science Course Web Page</title>
<link rel="stylesheet" href="styles.css">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Montserrat&family=Noto+Serif&family=Ubuntu&display=swap" rel="stylesheet">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</head>
<body>
<section class="first_part" >
<div class="container-fluid">
<!--all of element appeared when i wrote navbar-expand-lg-->
<nav class="navbar navbar-expand-lg navbar-light">
<a class="navbar-brand" href="#">
<i class="fab fa-python"> Python Bootcamp</i>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#courses">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#how">How We Work</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#outcomes">Outcomes</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#comments">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
</ul>
</div>
</nav>
<!-- Title -->
<div class="row">
<div class="col-lg-6"> <!-- so it will fill 50% of width on screen of laptops, and bigger screens-->
<h1 class="big-heading">Download the best Python bootcamp on your device, and start to study now.</h1>
<button type="button" class="btn btn-lg btn-outline-danger download-button"><i class="fab fa-apple"></i> Download</button>
<button type="button" class="btn btn-lg btn-light btn-outline-primary download-button"><i class="fab fa-google-play"></i> Download</button>
</div>
<div class="col-lg-6">
<img class="title-image" src="image.jpg" alt="classroom-image">
</div>
</div>
</div>
</section>
<!-- Courses -->
<section id="courses">
<h2>Our Course Options</h2>
<p>All of our programs provide job guarantee. No matter where you live, and what nationality you are. Our proven system works all around the world.</p>
<div class="row">
<!-- for laptops and bigger screens one row takes 33.3% of total width, for small screens it takes 50% -->
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Online Program</h3>
</div>
<div class="card-body">
<h4>400$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>5 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>6 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4 col-sm-6">
<div class="card">
<div class="card-header">
<h3>Full Time Program</h3>
</div>
<div class="card-body">
<h4>1300$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>20 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>2 months</p>
<button class="btn btn-lg btn-outline-secondary col-12">Sign Up</button>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="card">
<div class="card-header">
<h3>Part Time Program</h3>
</div>
<div class="card-body">
<h4>700$ / mo</h4>
<p>Unlimited watch time for the saved videos</p>
<p>10 mins talking to the instructor per day on skype</p>
<p>Unlimited limit of asking questions on the app</p>
<p>4 months</p>
<button class="btn btn-lg btn-outline-dark col-12">Sign Up</button>
</div>
</div>
</div>
</div>
</section>
<!-- How we work -->
<section id="how">
<h2>How We Work</h2>
<div class="row">
<div class="col-lg-4 col-sm-6">
<p>One-on-one mentorship and guidance.</p>
<img src="coding.jpg" alt="coding-image">
</div>
<div class="col-lg-4 col-sm-6">
<p>Study schedules that fit with your life.</p>
<img src="clock.jpg" alt="coding-image">
</div>
<div class="col-lg-4">
<p>In-person meetups, workshops.</p>
<img src="meetup.jpg" alt="meetup-image">
</div>
</div>
</section>
<!-- Outcomes -->
<section id="outcomes">
<div class="outcome">
<!-- Tabs navs -->
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="fulltime-tab" data-bs-toggle="tab" href="#fulltime" role="tab" aria-controls="fulltime" aria-selected="true">Full Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="parttime-tab" data-bs-toggle="tab" href="#parttime" role="tab" aria-controls="parttime" aria-selected="false">Part Time Program</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="online-tab" data-bs-toggle="tab" href="#online" role="tab" aria-controls="online" aria-selected="false">Online Program</a>
</li>
</ul>
<!-- Tabs Content-->
<div class="tab-content" id="myTab-content">
<div
class="tab-pane fade show active"
id="fulltime"
role="tabpanel"
aria-labelledby="fulltime-tab"
>
<p class="big">$70,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">80%</p>
<p class="small">Employed in-field within 90 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="parttime"
role="tabpanel"
aria-labelledby="parttime-tab"
>
<p class="big">$60,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">75%</p>
<p class="small">Employed in-field within 110 days of graduation.</p>
</div>
<div
class="tab-pane fade"
id="online"
role="tabpanel"
aria-labelledby="online-tab"
>
<p class="big">$40,000</p>
<p class="small">Median pay rate graduates reported earning.</p>
<p class="big">65%</p>
<p class="small">Employed in-field within 150 days of graduation.</p>
</div>
</div>
</div>
</section>
<!-- Comments -->
<section id="comments">
<div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<p>I took the fulltime program course. It was amazing. Up to date curriculum, and the best instructors in their field</p>
<img src="student1.jpg" class="student-image" alt="student-photo">
<em>Selena, Miami</em>
</div>
<div class="carousel-item">
<p>I took the part time program course, and I got full stack python developer job only in 20 days within graduation.</p>
<img src="student2.jpg" class="student-image" alt="student-photo">
<em>Anna, Moscow</em>
</div>
<div class="carousel-item">
<p>This course made me job ready. Don't waste time with other time wasting courses. This is what you have been looking for!</p>
<img src="student3.jpg" class="student-image" alt="student-photo">
<em>Taylor, Paris</em>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</a>
</div>
</section>
</body>
</html>
Background colour and button colour are white.
Either add a background color, like this:
#comments {
background-color: #ff0000;
}
Codepen: https://codepen.io/manaskhandelwal1/pen/yLaxyyV
or change the colour of the buttons, like this:
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E") !important;
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ff0000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E") !important;
}
For more info: https://stackoverflow.com/a/49017805/11171286
Codepen: https://codepen.io/manaskhandelwal1/pen/qBaMEdK
I have a carousel faq, there are some boxes with different questions and answers, so the boxes are not the same size as you can see above:
My code is this one:
<section id="faq" class="shadow-lg">
<div class="container text-center">
<h3 class="font-weight-light">Faq</h3>
<div class="row mx-auto my-auto">
<div id="recipeCarousel" class="col carousel slide w-100" data-ride="carousel">
<div class="row carousel-inner w-100" role="listbox">
<div class="carousel-item active">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">pergunta</h4>
<p class="card-text">resposta</p>
</div>
</div>
</div>
<div class="carousel-item">
<div class="col-md-4">
<div class="card card-body">
<h4 class="card-title">pergunta</h4>
<p class="card-text">resposta</p>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev w-auto" href="#recipeCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next w-auto" href="#recipeCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon bg-dark border border-dark rounded-circle"
aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</section>
css:
.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
display: flex;
}
#faq{
padding-bottom: 80px;
}
#faq h3{
padding-top: 50px;
padding-bottom: 50px;
}
#faq .card{
border-color: #216869;
min-height: 400px;
}
#infos, #contato, #faq, #planos{
font-family: Montserrat-Regular;
font-size: 14px;
line-height: 1.7;
color: #666666;
margin: 0px;
}
I want the boxes to be at the same height, regardless of the size of the questions. Basically, I want all the boxes to be the same height as the largest.
Whenever user decreases the window size the text changes according to the window size. But when I decrease the window size it goes over to the image. I tried media queries but It always shows the same. I used the VW and vh to resize according to the window size.
I am getting like this. How to solve that error. The media query I used is
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
How to solve that .
My code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>deyaPay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href='https://fonts.googleapis.com/css?family=Passion One' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Palanquin Dark' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link href='https://fonts.googleapis.com/css?family=Fira Sans Extra Condensed' rel='stylesheet'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body {
font: 400 15px Lato, sans-serif;
line-height: 1.8;
}
.carousel-control.right, .carousel-control.left {
background-image:none;
color: #32CD32;
}
.carousel-indicators li {
border-color: #000000;
}
.carousel-indicators li.active {
background-color: #32CD32;
}
.button {
background-color:#000000;
border:black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
/*.text {
font-size: 160%;
position: absolute;
display: inline-block;
left: 50%;
top: 180%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}*/
.button1 {
border: 1px solid black;
text-align:center;
text-decoration:none;
display:inline-block;
font-size:20px;
margin:10px 2px;
width:160px;
height:20px;
}
#media screen and (max-width: 803px) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
}
img {
width:100%,
height:auto;
}
.col-sm-8 {
padding: 60px 50px;
}
#media screen and (max-width: 760em) and (max-height: 780em){
.text {
font-size:10em;
}
/*#media screen and (max-width: 500px) {
.text {
font-size: 70px;
}*/
/*#media screen and (max-width:760em) {
.img {
font-size: 150px;
}*/
#media screen and (max-width: 803em) {
.col-sm-4 {
text-align: center;
margin: 25px 0;
}
.btn-lg {
width: 100%;
margin-bottom: 35px;
}
</style>
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" style = "background:#FFFFFF">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- <img src="Assets/img/deyapayiconandroid#3x.png" alt="logo" style="width:60px;"><br> -->
<h1 style = "font-family:Passion One;color:#3393E7;">deyaPay</h1>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li>Signup</li>
<li> Login</li>
</ul>
</div>
</div>
</nav>
<div class = "container-fluid" style = "background:#FFFFFF ">
<div class = "row">
<div class="col-sm-8">
<h2 style="margin-top: 100px; margin-left:50px;font-family:Palanquin Dark; font-size:55px" >
Pay for it anyway you want</br>
with deyaPay </h2>
<button type = "button" style = "background-color:#4CAF50; font-size:20px;width:200px;height:40px;margin-left:50px;margin-top:20px;text-align=center;color:white;border:none;display:inline-block"> Get Started </button>
</div>
<div class="col-sm-4">
<img src="Assets/img/deywalletbg.png" class="img-responsive" width="300" height="250" style=" margin-top: 150px">
</div>
</div>
</div>
<div id="myCarousel" class="carousel slide text-center" 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>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active" style="background-color: #F2F2F2">
<div class = "container-fluid">
<div class = "row">
<div class = "col-sm-4">
<img src="Assets/img/first.png" class="img-responsive" width="300" height="250" style=" margin-left:180px;margin-top: 40px;">
</div>
<div class="col-sm-8">
<h2 class = "text" style = " font-family: 'Fira Sans Extra Condensed';font-size:3vw;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<div class="item" style="background-color: #F2F2F2">
<div class="row">
<div class="col-sm-4">
<img src="Assets/img/slide2.png" class="img-responsive" width="450" height="250" style=" margin-left:100px;margin-top: 40px;">
</div>
<div class = "col-sm-8">
<h2 style = " font-family: 'Fira Sans Extra Condensed';font-size:35px;text-align: left;margin-left: 60px;margin-top: 100px;">
New Generation </br>
Currency Wallet<br>
To save and Secure Payment Application</br>
We delighted o Support users for faster</br>
payments and their valuable time
</h2>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container-fluid" style="background-color:#F0F8FF ">
<div class="row text-center slideanim">
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" class = "img-circle" alt="Paris" width="180">
<p><strong>Paris</strong></p>
<p>Yes, we built Paris</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="New York" width="180">
<p><strong>New York</strong></p>
<p>We built New York</p>
</div>
</div>
<div class="col-sm-4">
<div class="thumbnail">
<img src="Assets/img/bitcoin.png" alt="San Francisco" width="180">
<p><strong>San Francisco</strong></p>
<p>Yes, San Fran is ours</p>
</div>
</div>
</div>
</div>
The image is overlapped because it has a margin to the left as inline style. You could remove that inline style and use a media query to overwrite that. Take care that your text also has inline style which might cause problems, as you wont be able to overwrite it with media query.
Additionally, your second slide doesn't has the .text class on it, if you wonder that only one slides text changes.
I trying make a carousel using bootstrap 4, but I have a problem with arrows and cycles. Using bootstrap 3 it's work perfectly, including the CSS. I have already changed the item class to carousel-item as it sends the documentation, but still I am not having success. I think the problem is very simple, but I can not find it. Could someone help me with this? I would appreciate it and apologize if you infiltrate some stackoverflow rule
My code is:
.carousel-control {
left: -12px;
height: 40px;
width: 40px;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
margin-top: 90px;
}
.carousel-control.right {
right: -12px;
}
/* The indicators */
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
.carousel-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
margin: 0 auto;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<div id="Carousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#Carousel" data-slide-to="0" class="active"></li>
<li data-target="#Carousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.carousel-item-->
<div class="carousel-item">
<div class="row">
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
<div class="col-md-3">
<img src="http://placehold.it/250x250" alt="Image" style="max-width:100%;">
</div>
</div>
<!--.row-->
</div>
<!--.carousel-item-->
</div>
<!--.carousel-inner-->
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
<!--.Carousel-->
What can be this error?
The icons are not showed because you need to add a inside the tags and you can use predefined classes of bs carousel for controlling it:
<a id="previous" class="carousel-control-prev" href="#carrousel" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a id="after" class="carousel-control-next" href="#carrousel" data-slide="next">
<span class="carouse`enter code here`l-control-next-icon"></span>
</a>
In order for bootstrap 4 Carousel to work you have to add jquery, popper and bootstrap js files to your project.
You can see in the link a section named Show components requiring JavaScript, in it your can see Carousel for all slide behaviors, controls, and indicators,
In the code you've added there is no sign for theme and this could be your problem.
You can see in this DEMO that your buttons are working. Take a look at index.html file where I've added this js file scripts (removing theme will reproduce your problem where the buttons are not working).
I want to show the glyphs as in example A for desktop monitors and as in example B for mobile when the menu is extended. (The code is the same in both examples, except for the css).
Example A: http://jsfiddle.net/bs773m84/4/
<div class="container">
<nav class="header-nav-wrapper container-nav-menu navbar navbar-default white-back">
<div class="container-fluid">
<div class="navbar-header">
<a alt="" rel="home" href="google.com">
<img class="logo" src="http://icons.iconarchive.com/icons/cornmanthe3rd/plex-android/48/app-drawer-icon.png"/>
</a>
<button data-target="#social-menu" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only"><?php _e('Toggle navigation menu','justmakeit');?></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="col-sm-11 content">
<div class="container-fluid">
<div class="hidden-xs col-sm-6 blue-light-back"><span>Brand</span>
</div>
<div class="col-xs-12 col-sm-4 col-sm-push-4 col-md-push-4 red-dark-back">
<div id="social-menu" class="collapse navbar-collapse">
<ul class="menu nav navbar-nav navbar-default white-back">
<li class="facebook">
<a href="http://facebook.com" target="_blank">
<span class="glyphicon glyphicon-play-circle"></span><span class="social-name">facebook</span>
</a>
</li>
<li class="twitter">
<a href="http://twitter.com" target="_blank">
<span class="glyphicon glyphicon-download"></span><span class="social-name">twitter</span>
</a>
</li>
<li class="google-plus">
<a href="http://plus.google.com" target="_blank">
<span class="glyphicon glyphicon-download"></span><span class="social-name">google+</span>
</a>
</li>
<li class="pinterest">
<a href="http://pinterest.com" target="_blank">
<span class="glyphicon glyphicon-download"></span><span class="social-name">pinterest</span>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
Example A css:
#social-menu li{
display: inline-block;
padding: 0px;
}
#social-menu li a{
padding: 0px;
}
#social-menu .social-name{
display: block;
height: 1.4375em;
overflow: hidden;
text-indent: 100%;
transition: all 0.3s ease 0s;
white-space: nowrap;
width: 1.4375em;
}
Example B: http://jsfiddle.net/77m94xf4/4/
Html is the same as in Example A.
Example B css: No.
To do this you can use #media Query and set your css attribute for each size.
for Example :
#media screen and (max-width: 300px)
{
add your css for mobile
}
#media screen and (min-width: 800px)
{
add your css for desctop
}
by #media Query you can set css for each devices. eg:mobile,tablet,desktop.
Learn more about #media query
I added #media Query to revert CSS of the menu items for mobile.
#media screen and (min-width: 1px) and (max-width: 767px){
#social-menu li{
display:block
}
#social-menu .social-name{
display: inline;
height: none;
overflow: none;
text-indent: none;
white-space: none;
width: none;
}
}