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>
Related
.group {
background: #000;
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: inherit;
white-space: nowrap;
overflow-x: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.item {
margin: 3px;
background-color: #ddd;
float: left;
padding: 20px;
width: 200px;
height: 300px;
}
<div class="group">
<div class="item">
<img src="someimage1.png" alt="..." style="height:150px;">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage2.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage3.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
There are 2 items in the topline and the next item goes to the next line instead of the same line. I want all 3 lines to be in the same line with horizontal scrolling. I thought that the float:left was affecting the scrolling but removing will lead to all 3 divisions being in separate lines
If you want all of them in one line with the scroll bar, try this:
.group {
background: #000;
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: inherit;
white-space: nowrap;
display: flex;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow-x: scroll;
flex-wrap: nowrap;
}
.item {
margin: 3px;
background-color: #ddd;
float: left;
padding: 100px;
width: 100%;
height: 300px;
display: flex;
}
<div class="group">
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="https://robohash.org/200" alt="..." style="height: 150px;" />
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
You just need to remove the float: left and add display: inline-block to your .item CSS.
.group {
background: #000;
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: inherit;
white-space: nowrap;
overflow-x: auto;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.item {
margin: 3px;
background-color: #ddd;
/* float: left; */
display: inline-block; /* Change the display to inline-block for div */
padding: 20px;
width: 200px;
height: 300px;
}
<div class="group">
<div class="item">
<img src="someimage1.png" alt="..." style="height:150px;">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage2.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage3.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
Try this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
.container {
overflow-x: auto;
background: #000;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.group {
margin-left: 25px;
margin-right: 25px;
padding: 15px;
width: 600px;
display: flex
}
.item {
margin: 3px;
background-color: #ddd;
padding: 20px;
width: 200px;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="group">
<div class="item">
<img src="someimage1.png" alt="..." style="height:150px;">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage2.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
<div class="item">
<img src="someimage3.png" alt="..." style="height:150px">
<div>
<h5>Some Text</h5>
<p>Description</p>
</div>
</div>
</div>
</div>
</body>
</html>
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;
}
.col-xs-15,
.col-sm-15,
.col-md-15,
.col-lg-15 {
position: relative;
min-height: 1px;
padding-right: 10px;
padding-left: 10px;
}
.col-md-15 img {
height: 200px;
width: 200px;
}
.margin20
{
margin-top: 20px;
}
/*new set of column*/
.col-xs-15 {
width: 20%;
float: left;
}
#media (min-width: 768px) {
/*even if i remove this nothing happen*/
.col-sm-15 {
width: 20%;
float: left;
}
}
#media (min-width: 992px) {
.col-md-15 {
width: 20%;
float: left;
}
}
#media (min-width: 1200px) {
.col-lg-15 {
width: 20%;
float: left;
}
}
*overlay*/
.img-container {
position: relative;
width: 100%;
}
.red {
background-color: #B2B2B2;
}
.image {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}
.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%)
}
.img-container .image {
opacity: 0.3;
}
.img-container .middle {
opacity: 1;
}
.text {
background-color: transparent;
color: white;
font-size: 24px;
padding: 16px 32px;
font-family: 'Archivo Black', sans-serif;
text-align: center;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Custom.css" type="text/css"/>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Lato|Ubuntu" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black" rel="stylesheet">
<div class="container">
<div class="row">
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="img/sample.png" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
</div>
<div class="row margin20">
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
<div class="col-md-15 col-sm-15 col-xs-12">
<div class="img-container red">
<img src="https://introcs.cs.princeton.edu/java/stdlib/mandrill200x200.jpg" alt="Avatar" class="image" style="width:100%">
<div class="middle">
<div class="text">MEN'S APPAREL</div>
</div>
</div>
</div>
</div>
</div>
I want to divide my row in 5 equal parts that is why i used col-md-15 and col-sm-15, it is working well in tablet,mobile,and desktop (if you will remove the col-xs-12 in every tag), however in mobile mode i want the images to be 1 per row that is why i inserted col-xs-12, however when i did that, the rows in tablet and desktop mode became 1 per row and stretched which is i dont want. How to fix this problem?
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="Custom.css" type="text/css"/>
You load custom css before bootstrap css, switch that around.
Edited the example, sry, I meant the other way around. Custom css last, so it overrides the other code.
I have certain images and when I click on it then a green checked icon is appearing. but i can't make its position to be proper.
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
I want the green div to be right top and check mark to be centre of the green div and should be responsive , too.
Any help would be great.
Thank You.
See this code:
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
position: relative;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
border-radius: 50%;
right: 0px;
padding-left: 3px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
below is updated snippet
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
right: 5px;
top: 5px;
border-radius: 50%;
text-align: center;
color: #fff;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
Add right: 0; to .speakers_list .selected_div
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
right: 0;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
.p-t-md {
padding-top: 20px;
}
.p-l-md {
padding-left: 20px;
}
.speakers_list {
width: 605px;
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
position: relative;
text-align: center;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background: #27c24c;
border: thin white solid;
color: #ffffff;
border-radius: 50%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 3 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<div class="speaker_div">
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 4 </span>
</div>
</div>
</div>
I hope this will help you.
Look this
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
<div class="row speakers_list p-t-md p-l-md" >
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 1 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 m-b-lg">
<div class="speaker_div">
<div class="selected_div">
<i class="fa fa-check text-white"></i>
</div>
<img src="http://img.xcitefun.net/users/2011/02/231256,xcitefun-beautiful-small-nature-world-01.jpg" class=" img-responsive img-circle">
</div>
<div class="speaker_name text-center m-t-xs">
<span> 2 </span>
</div>
</div>
</div>
</div>
.p-t-md{
padding-top:20px;
}
.p-l-md{
padding-left:20px;
}
.speakers_list {
margin: 0 auto;
height: 245px;
overflow-x: hidden;
overflow-y: auto;
}
.speakers_list .speaker_div {
width: 75px;
height: 75px;
margin: 0 auto;
position: relative;
}
.speakers_list .speaker_div img {
height: 100%;
width: 100%;
}
.speakers_list .speaker_div .speaker_name {
color: #999999;
font-size: 10.61px;
}
.speakers_list .selected_div {
position: absolute;
width: 20px;
height: 20px;
right: 0;
background: #27c24c;
border-radius: 50%;
border: thin white solid;
text-align: center;
}
Live Demo - https://jsfiddle.net/grinmax_/qn3jyhbb/
there's some problems with responsive grid system to me.
http://imageshack.com/a/img537/9687/4H48G0.jpg
http://imageshack.com/a/img539/8265/ANvr0Y.jpg - problem is here
My source code:
CSS
<style type="text/css">
.wrapper {
height: 100%;
text-align: center;
margin: 0 auto;
}
img { max-width:100% !important;
height:auto;
display:block;
}
.text {
color: #fff;
text-shadow:0px 2px 10px #000;
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
font-size: 22px;
width: 100%;}
.box {
border: 1px dashed #000;
overflow: hidden;
position: relative;
}
.tb_floater {
font-size: 1.5em;
margin-top: 20%;
padding-top: 10%;
}
.box.tall {
height: 300px;
}
.box.tall > a > img {
height: auto;
}
</style>
HTML
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-6</div>
</div>
<div class="row">
<div class="pull-right col-xs-6 col-md-4 box tall">
<a href="#">
<img src="http://www.websailer.com/wp-content/uploads/2013/07/www_image.jpg">
</a>
<div class="text tall">
<div class="tb_floater">
<p>Loren ipsum shit amet<br/>Loren ipsum</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
<div class="col-xs-6 col-md-2 box" style="height:150px;">.col-xs-6 .col-md-6</div>
<div class="col-xs-6 col-md-6 box" style="height:150px;">.col-xs-6 .col-md-2</div>
</div>
That empty field is problem when i resize the browser, any solution ?