I want to add text in my bootstrap slider in the left side of the image i try diffrent css but that css not working here is my code for that bootstrap slider and that text are for particular slide if you find something wrong in code then try to correct them because i am just start the my journey in designing field.
.slider {
z-index:1;
margin-top:200px;
position:relative;
}
.carousel-inner {
transform: skewy(-190deg);
height:500px;}
.carousel-inner img {
transform: skewy(13deg);
height: 1000px !important;
margin-top: -191px;}
.slider-2 {
position:absolute;
transform:rotate(-15deg);
z-index:-2;
width:970px;
top:115px;
height:650px !important;
background-color:#e2e2e2;
margin-left:30px;
transform: skewy(-190deg);}
.carousel-indicators {
bottom:-90px;
transform: rotate(-10deg );}
.carousel-indicators li {
border-color:#152b46;}
.carousel-indicators .active {
background-color:#152b46;}
<div class="container-fluid slider">
<div class="container">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<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>
<div class="carousel-inner">
<div class="item active">
<img src="img/4.jpg" alt="Los Angeles" style="width:100%;">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
<div class="item">
<img src="img/5.jpg" alt="Chicago" style="width:100%;">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
<div class="item">
<img src="img/6.jpg" alt="New york" style="width:100%;">
<div class="carousel-caption">
<h3>What we Do</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 slider-2"> </div>
<div class="clearfix"></div>
</div>
</div>
</div>
Add below CSS
.carousel-caption {
position: absolute;
right: 0%;
bottom: 20px;
left: 0%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: left;
}
Related
in below code i want to align button,logo and text in center of images slider in bootstrap4 but here in my code it's not showing same on all devices plus i need to change css on every screen and this is a bad way i think... is there a better way to do this ?
thanks in advance
.wrapper {
position: absolute;
bottom: 250px;
left: 18%;
}
#media (min-width:320px) {
.wrapper {
position: absolute;
bottom: 139px;
left: 18%;
}
}
#media (min-width:480px) {
.wrapper {
position: absolute;
bottom: 250px;
left: 18%;
}
}
#media (min-width:801px) {
.wrapper {
position: absolute;
bottom: 280px;
left: 18%;
}
}
<div class="container-fluid main">
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item">
<img class="d-block w-100 " src="assets/images/dgWebsiteImages-25.jpg" alt="First Image">
<div class="carousel-caption ">
<img class="" src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD" style="background-repeat: no-repeat;"
alt="First Image">
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
</div>
Here is the solution
<div
id="carouselExampleIndicators"
class="carousel slide"
data-ride="carousel"
>
<ol class="carousel-indicators">
<li
data-target="#carouselExampleIndicators"
data-slide-to="0"
class="active"
></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img
class="d-block w-100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_184273a4147%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_184273a4147%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9140625%22%20y%3D%22217.7%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="First slide"
/>
<div class="carousel-caption d-none d-md-block">
<img
class=""
src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD"
style="background-repeat: no-repeat"
alt="First Image"
/>
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_184273a4148%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_184273a4148%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3125%22%20y%3D%22217.7%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="Second slide"
/>
<div class="carousel-caption d-none d-md-block">
<img
class=""
src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD"
style="background-repeat: no-repeat"
alt="First Image"
/>
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
<div class="carousel-item">
<img
class="d-block w-100"
src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_184273a4148%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_184273a4148%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22276.9921875%22%20y%3D%22217.7%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E"
alt="Third slide"
/>
<div class="carousel-caption d-none d-md-block">
<img
class=""
src="https://www.google.com/url?sa=i&url=https%3A%2F%2Fpixabay.com%2Fimages%2Fsearch%2Fnature%2F&psig=AOvVaw2OejUw2y467GfAvPkIg7bK&ust=1667036104481000&source=images&cd=vfe&ved=0CA0QjRxqFwoTCMCZ9srPgvsCFQAAAAAdAAAAABAD"
style="background-repeat: no-repeat"
alt="First Image"
/>
<div class="textslider">
<h2>text text text text text text</h2>
</div>
<div class="wrapper">
<a class="ripple rbutton" href="https://">Visit Website</a>
</div>
</div>
</div>
</div>
</div>
Just use this css
div.carousel-caption {
top: 50%;
left: 50%;
bottom: auto;
transform: translate(-50%, -50%);
}
hi I am looking for a solution on how to fix my carousel for my images where I want to centralize and close the gap between the 2 images. I tried searching the internet for a solution but I found none. I thought of changing the CSS but I can't figure out what to change. Please help.
Html Code for Carousel
.img-container {
position: relative;
display: inline-block;
}
.img-container .overlay {
position: absolute;
top: 0;
left: 0;
width: 241px;
height: 143px;
background: rgba(0, 0, 0, 0.5);
margin: 0px 0px 0px 8px;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.img-container:hover .overlay {
opacity: 1;
}
.overlay span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.course {
width: 249px;
height: 145px;
}
<div class="carousel slide" data-ride="carousel" id="multi_item">
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course16.jpg" alt="1 slide">
<div class="overlay pointer">
<span>CCTV Technology and Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course8.jpg" alt="2 slide">
<div class="overlay pointer">
<span>Windows XP, 7, 8 & 10 Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course16.jpg" alt="3 slide">
<div class="overlay pointer">
<span>CCTV Course</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course29.jpg" alt="4 slide">
<div class="overlay pointer">
<span>Computer Server Installation & Configuration</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course24.jpg" alt="5 slide">
<div class="overlay pointer">
<span>Computer Network Configuration & Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product1/course10.jpg" alt="6 slide">
<div class="overlay pointer">
<span>Printer Troubleshoot & Maintenance</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course23.jpg" alt="7 slide">
<div class="overlay pointer">
<span>Windows 7 Support and Deployment</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="/Sbit/Main_Courses/Courses/Diploma/DIP/Image/Product 2/Course20.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#multi_item" 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="#multi_item" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
This space is caused by the padding-left and padding-right properties amounting to 15px by the col-sm class;
so, we just override it in our CSS with a value of 2px; I had to use !important here but if you write the <style> block after loading the bootstrap.css, you wouldn't need this !important - Complete working snippet below:
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 100%;
}
.img-container {
position: relative;
display: inline-block;
}
.img-container .overlay {
position: absolute;
top: 0;
left: 0;
width: 241px;
height: 143px;
background: rgba(0, 0, 0, 0.5);
margin: 0px 0px 0px 8px;
opacity: 0;
transition: opacity 500ms ease-in-out;
}
.img-container:hover .overlay {
opacity: 1;
}
.overlay span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
}
.course {
width: 249px;
height: 145px;
}
.col-sm {
padding-left: 2px !important;
padding-right: 2px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="carousel slide" data-ride="carousel" id="multi_item">
<ol class="carousel-indicators">
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-2" data-slide-to="1"></li>
<li data-target="#carousel-example-2" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="1 slide">
<div class="overlay pointer">
<span>CCTV Technology and Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="2 slide">
<div class="overlay pointer">
<span>Windows XP, 7, 8 & 10 Installation</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="3 slide">
<div class="overlay pointer">
<span>CCTV Course</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="4 slide">
<div class="overlay pointer">
<span>Computer Server Installation & Configuration</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="5 slide">
<div class="overlay pointer">
<span>Computer Network Configuration & Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="6 slide">
<div class="overlay pointer">
<span>Printer Troubleshoot & Maintenance</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="7 slide">
<div class="overlay pointer">
<span>Windows 7 Support and Deployment</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/la.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
<div class="col-sm">
<div class="img-container">
<img class="course d-block w-100" src="https://www.w3schools.com/bootstrap4/ny.jpg" alt="8 slide">
<div class="overlay pointer">
<span>Microsoft XP & 7 Support and Troubleshoot</span>
</div>
</div>
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#multi_item" 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="#multi_item" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
I have made a Bootstrap slider with a CSS grid. A demo can be [seen here][1].
When I resize my screen to < 991px the slider is turning vertical, and going out of the CSS grid in the class item5. I would like the slider is turning into 1 row like this:
But to be honest I do not know where to start if it is possible at all. Does anybody have an idea how to do this?
Best regards.
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
background-color: #fff;
border: 10px solid #fff;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item5 {
grid-row: 3 / 6;
grid-column: 1 / 13;
height: 290px;
}
#media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item5 {
grid-row: 3 / 6;
grid-column: 1 / 13
height: 250px;
}
}
/* Carousel */
body{padding-top:20px;}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* The controlsy */
.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-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>
<div class="wrapper">
<div class="item5">
<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>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-12 col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-12 col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-12 col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-12 col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-md-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
</div>
</div>
</body>
</html>
As you are using md-3 which below 991 px becomes 100% you can use sm or xs instead for that.Hope it helps.
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
background-color: #fff;
border: 10px solid #fff;
}
.wrapper > div {
background-color: #eee;
padding: 1em;
box-sizing: border-box;
}
.wrapper > div:nth-child(odd) {
background-color: #ddd;
}
.item5 {
grid-row: 3 / 6;
grid-column: 1 / 13;
height: 290px;
}
#media only screen and (max-width: 600px) {
.wrapper {
display:grid;
grid-template-columns:repeat(12,1fr);
grid-gap: 10px;
}
.item5 {
grid-row: 3 / 6;
grid-column: 1 / 13
height: 250px;
}
}
/* Carousel */
body{padding-top:20px;}
.carousel {
margin-bottom: 0;
padding: 0 40px 30px 40px;
}
/* The controlsy */
.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-indicators {
right: 50%;
top: auto;
bottom: -10px;
margin-right: -19px;
}
/* The colour of the indicators */
.carousel-indicators li {
background: #cecece;
}
.carousel-indicators .active {
background: #428bca;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<body>
<div class="wrapper">
<div class="item5">
<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>
<li data-target="#Carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
<div class="col-xs-3"><img src="https://placehold.it/250x250" alt="Image" style="max-width:100%;"></div>
</div>
</div>
</div>
<a data-slide="prev" href="#Carousel" class="left carousel-control">‹</a>
<a data-slide="next" href="#Carousel" class="right carousel-control">›</a>
</div>
</div>
</div>
</body>
</html>
I am trying to make two bootstrap columns the same height and responsive.
So far I have the two columns the same height but as the screen size gets smaller one columns becomes shorter than the other. Like this:
To make the two columns I used Bootstrap 3.
My HTML:
<div class="col-md-6">
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">BREAKFAST MENU</button>
</div>
</div>
<!--
-->
<div class="col-md-12 pb-20">
<div class="btn-container">
<img src="http://via.placeholder.com/1200x500" alt="Snow" style="max-height: 500px;">
<button class="btn">DRINKS MENU</button>
</div>
</div>
</div>
<!--
-->
<div class="col-md-6 hard--right">
<div id="carousel-example" class="carousel slide" data-ride="carousel" style="width:100%;">
<ol class="carousel-indicators">
<li data-target="#carousel-example" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example" data-slide-to="1"></li>
<li data-target="#carousel-example" data-slide-to="2"></li>
<li data-target="#carousel-example" data-slide-to="3"></li>
<li data-target="#carousel-example" data-slide-to="4"></li>
</ol>
<div class="carousel-inner">
<div class="item active">
<img src="http://via.placeholder.com/1200x1200" alt="" style="max-height: 1020px; width:100%">
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" style="width:100%" alt="Second slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Third slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fourth slide" />
</div>
<div class="item">
<img src="http://via.placeholder.com/1200x1200" style="max-height: 1020px; width:100%" alt="Fifth slide" />
</div>
</div>
<div class="main-text hidden-xs">
<div class="text-center">
<button class="btn">MAIN MENU</button>
</div>
</div>
</div>
</div>
The Codepen to my problem is https://codepen.io/mrsalami/pen/dKpdXO
Images have width: 100%, so when screen resizes they reduce their width based on parent's width (50% of screen width size).
This caused the height of the images to resize too, based on their original aspect ratio.
So this will work if:
right image's height = ( left images height * 2 ) + space between.
I want to center a bootstrap panel inside col class but the panel does not center horizontally and vertically.
Here is all the code
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
flex-grow: 1;
}
.vertical-align > div:first-child {
background-color: mediumaquamarine;
}
.vertical-align > div:last-child {
background-color: gold;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vertical-align">
<div class="col-xs-6 col-md-8">
<div id="bs-1" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner">
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
</div>
<a data-target="#bs-1" class="left carousel-control" role="button" data-slide="prev"></a>
<a data-target="#bs-1" class="right carousel-control" role="button" data-slide="next"></a>
</div>
</div>
<div class="col-xs-6 col-md-4" style="border:1px solid #555">
<div class="panel panel-default">
<div class="panel-body">
<form name="form" method="post" action="connecter" novalidate="" class="form" id="form">
<div class="row">
<div class="col-xs-12">
<div class="form-group m-b-20">
<label for="email">PIN</label> <input type="text" name="email_to" class="form-control" placeholder="PIN" />
<p class="error-block"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
<div class="row buttons">
<div class="col-xs-12 col-md-6">
<input type="submit" class="btn-login btn btn-warning btn-flat btn-block m-b-20" value="Login now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
How can i center horizentaly the panel with classes panel panel-default inside this DIV <div class="col-xs-6 col-md-4" style="border:1px solid #555"> ?
Tried with vertical-align: middle; but same, nothing changed !
I gave to panel panel-default, this id: id='change', and then added this css:
#center {
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
Which solves the problem.
.vertical-align {
display: flex;
flex-direction: row;
}
.vertical-align > [class^="col-"],
.vertical-align > [class*=" col-"] {
display: flex;
align-items: center;
justify-content: center; /* Optional, to align inner items
horizontally inside the column */
}
.vertical-align > [class^="col-"] > div,
.vertical-align > [class*=" col-"] > div {
flex-grow: 1;
}
.vertical-align > div:first-child {
background-color: mediumaquamarine;
}
.vertical-align > div:last-child {
background-color: gold;
}
#center {
position: relative;
top: 50%;
left:50%;
transform: translate(-50%,-50%);
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row vertical-align">
<div class="col-xs-6 col-md-8">
<div id="bs-1" class="carousel slide" data-ride="carousel" data-interval="5000">
<ol class="carousel-indicators"></ol>
<div class="carousel-inner">
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
<div class="carousel-item"><img alt="First slide" class="img-fluid" src="" /></div>
</div>
<a data-target="#bs-1" class="left carousel-control" role="button" data-slide="prev"></a>
<a data-target="#bs-1" class="right carousel-control" role="button" data-slide="next"></a>
</div>
</div>
<div class="col-xs-6 col-md-4" style="border:1px solid #555">
<div id='center' class="panel panel-default">
<div class="panel-body">
<form name="form" method="post" action="connecter" novalidate="" class="form" id="form">
<div class="row">
<div class="col-xs-12">
<div class="form-group m-b-20">
<label for="email">PIN</label> <input type="text" name="email_to" class="form-control" placeholder="PIN" />
<p class="error-block"></p>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12"></div>
</div>
<div class="row buttons">
<div class="col-xs-12 col-md-6">
<input type="submit" class="btn-login btn btn-warning btn-flat btn-block m-b-20" value="Login now" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>