I have carousel slider that have 4 images in a row , In desktop and tablet screen size its okay, but in mobile i don't wanna resize my images i want to show only one item in each slide.
bootstrap automatically resizes images and shows smaller items! how can i detect mobile screen size and show only one image in each slide.
My Code:
<style>
.media-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
/* Previous button */
.media-carousel .carousel-control.left
{
left: -12px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Next button */
.media-carousel .carousel-control.right
{
right: -12px !important;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
background: #333333;
}
.media-carousel img
{
width: 250px;
height: 100px
}
</style>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
</div>
<a data-slide="next" href="#media" class="right carousel-control">‹</a>
<a data-slide="prev" href="#media" class="left carousel-control">›</a>
</div>
preview in desktop :
preview in mobile :
It is not possible to adjust slides as per screen resolutions using bootstrap carousel you need to use external sources to make this type of difficult sliders.
this are the reference link which helps you to make this type of slider.
Slick Slider: https://kenwheeler.github.io/slick/
Related
On my landing page, we have a "Media Resource" section with links to videos, support materials and social media. Currently, the content in the section shrinks when the window is resized rather than the wanted outcome of stacking.
To be clear, the Videos, Support, and Social are what should be stacking. The heading of the section is perfectly fine.
I've looked through the HTML and CSS for the section but can't seem to pinpoint what's causing them not to stack like desired. Below is the HTML and CSS for what's being worked on.
HTML
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 col-lg-4 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-3 col-lg-2">
<img src="~/Images/Video.png" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-6 col-lg-4">
<img src="~/Images/Materials.png" alt="support materials" class="img-fluid" />
</div>
<div class="col-3 col-lg-2">
<img src="~/Images/Social.png" alt="social" class="img-fluid media-icon social" />
</div>
</div>
</div>
CSS
.media-resource-wrapper {
background-color: #00b9f2;
padding: 60px 0;
}
.media-resource-wrapper > .row {
margin: 0 10px;
}
.media-resource-wrapper h2 {
margin-bottom: 30px;
color: #fff;
font-weight: bold;
n-bottom: 30px;
color: #fff;
font-weight: bold;
}
/* Media resourse icon positioning */
.media-resource-wrapper .media-icon {
position: relative;
top: 20px;
}
#media (min-width: 992px) {
.health-professionals-block .boxheader-landing {
left: 30px;
margin-top: 250px;
width: 20%;
}
.boxheader-landing h1, .boxheader-landing h2 {
font-size: 1.75em;
}
.boxheader-landing-copy {
font-size: .9em;
}
.media-resource-wrapper h2 {
margin-top: 40px;
border-right: 1px solid #fff;
padding-right: 30px;
}
.media-resource-wrapper .media-icon {
top: 30px;
}
.media-resource-wrapper {
padding: 60px 0 60px 0;
}
}
UPDATE
I made a change that was recommended but the images below shows how it looks by default and then when I shrink.
Standard Size:
Smaller window:
Use standard bootstrap class col-sm-3 and col-sm-6.
Replace the URL with your image and it will stack.
.media-resource-wrapper {
background-color: #00b9f2;
padding: 60px 0;
}
.media-resource-wrapper>.row {
margin: 0 10px;
}
.media-resource-wrapper h2 {
margin-bottom: 30px;
color: #fff;
font-weight: bold;
n-bottom: 30px;
color: #fff;
font-weight: bold;
}
/* Media resourse icon positioning */
.media-resource-wrapper .media-icon {
position: relative;
top: 20px;
}
#media (min-width: 992px) {
.health-professionals-block .boxheader-landing {
left: 30px;
margin-top: 250px;
width: 20%;
}
.boxheader-landing h1,
.boxheader-landing h2 {
font-size: 1.75em;
}
.boxheader-landing-copy {
font-size: .9em;
}
.media-resource-wrapper h2 {
margin-top: 40px;
border-right: 1px solid #fff;
padding-right: 30px;
}
.media-resource-wrapper .media-icon {
top: 30px;
}
.media-resource-wrapper {
padding: 60px 0 60px 0;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-sm-12 col-lg-4 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-sm-3 col-lg-2">
<img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-sm-6 col-lg-4">
<img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="support materials" class="img-fluid" />
</div>
<div class="col-sm-3 col-lg-2">
<img src="https://lh3.googleusercontent.com/gN6iBKP1b2GTXZZoCxhyXiYIAh8QJ_8xzlhEK6csyDadA4GdkEdIEy9Bc8s5jozt1g=w300" alt="social" class="img-fluid media-icon social" />
</div>
</div>
</div>
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource
Center</h2>
</div>
</div>
<div class="row">
<div class="col-3 ">
<img src="~/Images/Video.png" alt="videos" class="img-fluid media-
icon video" />
</div>
<div class="col-6 ">
<img src="~/Images/Materials.png" alt="support materials"
class="img-fluid" />
</div>
<div class="col-3 ">
<img src="~/Images/Social.png" alt="social" class="img-fluid
media-icon social" />
</div>
</div>
If you want the columns to stack use col-sm- instead...
https://www.codeply.com/go/kQHOYSTEnL
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 col-lg-4 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-sm-3 col-lg-2">
<img src="//placehold.it/200" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-sm-6 col-lg-4 text-center">
<img src="//placehold.it/200" alt="support materials" class="img-fluid" />
</div>
<div class="col-sm-3 col-lg-2">
<img src="//placehold.it/200" alt="social" class="img-fluid media-icon social" />
</div>
</div>
</div>
As you can see here, the .col- is the smallest breakpoint, so they will continue to shrink horizontally in width. sm is the next size up so they will become full-width, and stack vertically at 576px. If you want the cols to stack at wider widths use col-md-,col-lg- or col-xl-, etc..
<div class="container-fluid no-gutters media-resource-wrapper">
<div class="row">
<div class="col-12 text-center">
<h2 class="boxheader-lead">Media & Public Relations Resource Center</h2>
</div>
<div class="col-3 ">
<img src="~/Images/Video.png" alt="videos" class="img-fluid media-icon video" />
</div>
<div class="col-6 ">
<img src="~/Images/Materials.png" alt="support materials" class="img-fluid" />
</div>
<div class="col-3 ">
<img src="~/Images/Social.png" alt="social" class="img-fluid media-icon social" />
</div>
</div>
My page has 3 div(s) within a div. In tablet and desktop screens they look good (center-aligned), but on a very small device such as cellphone the inner div(s) are left aligned (I want them to be horizontally center aligned). I applied text-center, and center-block to the outer div but it does not work. Any suggestion? Here are the html, and css codes.
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
portfolio-caption {
max-width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
}
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div style="max-width: 281px">
<a href="#" ">
<img src="./x/pilotproject1.jpg " class="img-responsive " style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# ">
<img src="./x/pilotproject2.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 ">
<div style="max-width: 281px ">
<a href="# " class="pilot-link ">
<img src="./x/pilotproject3.jpg " class="img-responsive "
style="margin: 0 auto; " alt=" ">
</a>
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>
The reason that I have is that the width of the pictures is 281 px, if I do not set the width, the width of the div that comes after the img will be bigger than 281 px which is not something that I want.
as you can see in this picture, the images are all left-aligned
I added a class centered as a container to center elements (please remove the border border: 1px solid red; it is used to show you the container block ):
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
border: 1px solid red;
}
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
wrap each element you want to be centered.
Also in your css portfolio-caption should be .portfolio-caption to select a class.
I moved your in-line style to css class img-responsive so you can update your style in one place.
.img-responsive {
display: block;
max-width: 281px !important;
height: auto;
margin: 0 auto;
}
.portfolio-caption {
width: 281px;
background-color: #994ACC;
text-align: center;
padding: 10px;
border-top: 3px solid #ffffff;
margin-bottom: 10px;
float: right;
}
.centered {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
/* border: 1px solid red; */
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="#">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="centered">
<a href="# " class="pilot-link ">
<img src="http://placehold.it/350x150" class="img-responsive" alt=" ">
</a>
</div>
<div class="centered">
<div class="portfolio-caption text-center ">
<strong><h4>Project Name</h4></strong>
</div>
</div>
</div>
</div>
You should not apply classes to outer divs, apply them exactly to what you want to be centered : class="img-responsive center-block", and
also check the bootstrap version center-block is new in Bootstrap version 3.0.1 i believe.
Use
Text align : center ;
text-align:center
<div style="max-width: 281px; text-align : center">
Plunker link :
https://plnkr.co/edit/UaW436KiylzfqOCU1cg1?p=preview
I am trying to make the bottom right greyish box (the one without image) same height and width as other boxes with images. It is supposed to be responsive but if I manage to make it fit this resolution it doesn't work in other resolutions. I tried with flexbox but couldn't make it work. I am using Bootstrap as you can see. I also tried using vh and vw but no luck...
I would really appreciate if someone with more experience could tell me the proper way to do this? Thanks all for reading and trying to help!
Here is the screenshot of what I am trying to achieve:
Here is my code so far:
<!-- T E A M S E C T I O N -->
<section id="team" class="no-padding">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h1><span class="orange">[ </span>Meet Our Team<span class="orange"> ]</span></h1>
<p>A perfect blend of creativity and technical wizardry.</br>The best people formula for great websites!</p>
</div>
</div>
<div class="row no-gutter">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/1.jpg" title="">
<img src="img/team/1.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/2.jpg" title="">
<img src="img/team/2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/3.jpg" title="">
<img src="img/team/3.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/4.jpg" title="">
<img src="img/team/4.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/5.jpg" title="">
<img src="img/team/5.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/6.jpg" title="">
<img src="img/team/6.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/7.jpg" title="">
<img src="img/team/7.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/8.jpg" title="">
<img src="img/team/8.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<div class="team-box">
<div class="team-box-last">
<h3>Want to join our team?</h3>
<p>We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
</p>
<ul>
<li>Check our jobs page</li>
<li>Send us your CV</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</section>
/* -------- TEAM SECTION -------- */
#team{
background-color: #fff;
text-align: center;
width: 100%;
}
#team h1{
color: #345;
font-weight: 700;
margin-top: 50px;
margin-bottom: 50px;
}
#team p{
color: #345;
font-size: 21px;
margin-top: 0px;
margin-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
.no-padding {
padding: 0;
}
.no-gutter > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
.team-box {
display: block;
position: relative;
margin: 0 auto;
max-width: 650px;
overflow: hidden;
}
.team-box img{
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.team-box:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team-box .team-box-caption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
opacity: 1;
background: transparent;
/* background: rgba(67,208,243,0.9);
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s; */
}
.team-box .team-box-caption .team-box-caption-content {
position: absolute;
bottom: 12px;
width: 100%;
text-align: left;
}
.team-box .team-box-caption .team-box-caption-content .name,
.team-box .team-box-caption .team-box-caption-content .position {
padding: 0 15px;
text-shadow: 0px 0px 5px #000;
}
.team-box .team-box-caption .team-box-caption-content .name {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 12px;
text-transform: uppercase;
}
.team-box:hover .team-box-caption {
opacity: 1;
}
#media(min-width:768px) {
.team-box .team-box-caption .team-box-caption-content .name {
font-size: 15px;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 15px;
text-transform: uppercase;
}
}
.team-box-last{
text-align: left;
padding: 30px 30px;
}
.team-box:last-child{
background-color: #f3f3f3;
}
#team .team-box-last h3{
color: #345;
padding-top: 15px;
padding-left: 15px;
}
#team .team-box-last p{
font-size: 18px;
line-height: 23px;
padding-top: 15px;
margin-bottom: 30px;
}
#team .team-box-last ul{
padding-left: 15px;
}
#team .team-box-last ul li{
font-size: 18px;
font-weight: 500;
}
#team .team-box-last ul li{
list-style: none;
}
Well, you cannot really achieve this with CSS, you may add some Javascript code using jQuery to make it easier for you.
I am giving you an example just have a look to get an idea. The idea is to get the height of each image box which I have assigned id="getheight" and then add that height to the last box. Remember you need to use overflow:hidden if you want to see same height. I have altered your code and add some class and javascript to give you what you can do.
The problem in responsiveness in the last box is you need to also handle font-size or other stuff to make sure it always appears and perfect which I haven't touched that yet. However, you can still have scrollbar for longer text if you want.
All in all, this is one approach to solve your problem, there maybe more ways if spend more time.
** Please copy and see in bigger screen for responsiveness as well we watch console to see dynamic height. ***
var picHeight = $('#getheight').height();
$('.sameHeight').css('height',picHeight + 'px');
$('.team-box-last').css('height',picHeight + 'px')
$(window).on('resize',function(){
var picHeight = $('#getheight').height();
$('.sameHeight').css('max-height',picHeight + 'px');
})
/* -------- TEAM SECTION -------- */
#team{
background-color: #fff;
text-align: center;
width: 100%;
}
#team h1{
color: #345;
font-weight: 700;
margin-top: 50px;
margin-bottom: 50px;
}
#team p{
color: #345;
font-size: 21px;
margin-top: 0px;
margin-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
.no-padding {
padding: 0;
}
.no-gutter > [class*=col-] {
padding-right: 0;
padding-left: 0;
}
.team-box {
display: block;
position: relative;
margin: 0 auto;
max-width: 650px;
overflow: hidden;
}
.team-box img{
-moz-transition: all 1s;
-webkit-transition: all 1s;
transition: all 1s;
}
.team-box:hover img {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team-box .team-box-caption {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
text-align: center;
color: #fff;
opacity: 1;
background: transparent;
/* background: rgba(67,208,243,0.9);
-webkit-transition: all .35s;
-moz-transition: all .35s;
transition: all .35s; */
}
.team-box .team-box-caption .team-box-caption-content {
position: absolute;
bottom: 12px;
width: 100%;
text-align: left;
}
.team-box .team-box-caption .team-box-caption-content .name,
.team-box .team-box-caption .team-box-caption-content .position {
padding: 0 15px;
text-shadow: 0px 0px 5px #000;
}
.team-box .team-box-caption .team-box-caption-content .name {
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 12px;
text-transform: uppercase;
}
.team-box:hover .team-box-caption {
opacity: 1;
}
#media(min-width:768px) {
.team-box .team-box-caption .team-box-caption-content .name {
font-size: 15px;
}
.team-box .team-box-caption .team-box-caption-content .position {
font-size: 15px;
text-transform: uppercase;
}
}
.sameHeight{
overflow:hidden;
}
.team-box-last{
text-align: left;
overflow:auto;
padding:30px 30px;
}
.team-box:last-child{
background-color: #f3f3f3;
}
#team .team-box-last h3{
color: #345;
padding-left: 15px;
}
#team .team-box-last p{
font-size: 18px;
line-height: 23px;
padding-top: 15px;
margin-bottom: 30px;
}
#team .team-box-last ul{
padding-left: 15px;
}
#team .team-box-last ul li{
font-size: 18px;
font-weight: 500;
}
#team .team-box-last ul li{
list-style: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- T E A M S E C T I O N -->
<section id="team" class="no-padding">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
<h1><span class="orange">[ </span>Meet Our Team<span class="orange"> ]</span></h1>
<p>A perfect blend of creativity and technical wizardry.</br>The best people formula for great websites!</p>
</div>
</div>
<div class="row no-gutter">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4" id="getheight" >
<a class="team-box" rel="" href="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/2.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/3.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/4.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/5.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/6.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/7.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
<a class="team-box" rel="" href="img/team/8.jpg" title="">
<img src="https://free4kwallpapers.com/uploads/originals/2015/07/13/natur-hintergrundbilder-09-2012-269-2.jpg" class="img-responsive" alt="">
<div class="team-box-caption">
<div class="team-box-caption-content">
<div class="name">
Full Name
</div>
<div class="position">
Position
</div>
</div>
</div>
</a>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-4 sameHeight">
<div class="team-box">
<div class="team-box-last">
<div class="t">
<h3>Want to join our team?</h3>
<p>We’re always looking for talented designers, developers, project managers and anyone who’s driven and has a passion for the digital industries.
</p>
<ul>
<li>Check our jobs page</li>
<li>Send us your CV</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<br/>
<br/>
<br/>
<br/><br/>
<br/>
<br/>
<br/>
<br/>
I also included resize option to tell how you can handle automatic height size.
Please feel free to change my code and make that nice and compatible with your requirement.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I have three main div for movie poster. I want that three div to auto slide and also want left and right navigation button. How can it be done?
HTML Code
<div class="movie-review">
<div class="single-movie">
<img src="style.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>
<div class="single-movie">
<img src="rasputin.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>
<div class="single-movie">
<img src="spirit.jpg" width="250" >
<div class="description">
<span class="movie_title">Movie Title</span><hr>
<span class="rating">Rating:</span>
</div>
</div>
</div>
CSS Code
.single-movie {width:250px; height:370px; float:left;}
.single-movie img {position:absolute; -webkit-transition: 0.4s ease; transition: 0.4s ease;}
.single-movie img:hover {-webkit-transform: scale(1.08); transform: scale(1.08);}
.description {background:rgba(0,0,0,0.9); color:#fff; padding:5px 9px; position:relative; top:290px;}
.movie_title {font-size:22px;}
.rating {color:#ff6000; font-size:18px;}
You can do that with slick slider. Here is my codepen link
$('.movie-review').slick();
You can do this with Bootstrap carousel
$(document).ready(function() {
$('#media').carousel({
pause: true,
interval: false,
});
});
/* carousel */
.media-carousel
{
margin-bottom: 0;
padding: 0 40px 30px 40px;
margin-top: 30px;
}
/* Previous button */
.media-carousel .carousel-control.left
{
left: -12px;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Next button */
.media-carousel .carousel-control.right
{
right: -12px !important;
background-image: none;
background: none repeat scroll 0 0 #222222;
border: 4px solid #FFFFFF;
border-radius: 23px 23px 23px 23px;
height: 40px;
width : 40px;
margin-top: 30px
}
/* Changes the position of the indicators */
.media-carousel .carousel-indicators
{
right: 50%;
top: auto;
bottom: 0px;
margin-right: -19px;
}
/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li
{
background: #c0c0c0;
}
.media-carousel .carousel-indicators .active
{
background: #333333;
}
.media-carousel img
{
width: 250px;
height: 100px
}
/* End carousel */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<h2>Media Slider Carousel BS3</h2>
</div>
<div class='row'>
<div class='col-md-8'>
<div class="carousel slide media-carousel" id="media">
<div class="carousel-inner">
<div class="item active">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
<div class="item">
<div class="row">
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
<div class="col-md-4">
<a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
</div>
</div>
</div>
</div>
<a data-slide="prev" href="#media" class="left carousel-control">‹</a>
<a data-slide="next" href="#media" class="right carousel-control">›</a>
</div>
</div>
</div>
</div>
See Full Page Demo
I have a basic thumbnail display using bootstrap. I want to have 3 images in a row and go down to 2 images when making the page smaller. I had this worked out until I added a margin-right to add some space in between thumbnails. Once I did this it pushed that third image down to the next line. I tried playing around with the padding and margin and I just cant get that third thumbnail to stay on the same line. I also tried changing it to col-sm-3 and that did not seem to work either.
HTML:
<div class="work">
<ul>
<li class="thumbnail col-sm-4 col-xs-6"><img src="thumbnails.png"/></li>
<li class="thumbnail col-sm-4 col-xs-6"><img src="thumbnails.png"/></li>
<li class="thumbnail col-sm-4 col-xs-6"><img src="thumbnails.png"/></li>
</ul>
</div>
CSS:
.work {
padding: 0px 40px 0px 0px;
max-width: 100%;
}
.thumbnail {
margin-right: 10px;
}
I'm not 100% if this what you mean, but here it goes:
HTML
<div class="work">
<ul>
<li class="thumbnail col-sm-4 col-xs-6"><img src="thumbnails.png"/></li>
<li class="thumbnail col-sm-4 col-xs-6"><img src="thumbnails.png"/></li>
<li class="thumbnail col-sm-4 col-xs-6"><img src="thumbnails.png"/></li>
</ul>
</div>
CSS
.thumbnail {
border:0;
}
.thumbnail a{
display:block;
padding:10px;
background:red;
}
.thumbnail img{
width:100%;
}
https://jsfiddle.net/ax7wcLo4/2
If you really want to separate the li elements, you should do that without bootstrap's default grid system.
<ul class="list-unstyled list-inline">
Use class .list-inline on th eul element and set the below css for them;
ul {
margin: 0;
padding: 0;
width: 100%
}
li {
width: calc(100% - 10px);
margin: 0 5px;
}
Be Aware: calc has some compatibility issues based on your browser support range.
Can I Use Link for CALC
You should put the thumbnail inside of a column, not combined. If you need this inside a list it can be change to that as well > See Default Bootstrap Example.
See working Snippet at Full Page.
body,
html {
padding-top: 50px;
}
.row.no-list-style {
list-style: none;
margin-left: -55px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h3>Default</h3>
<div class="row">
<div class="col-sm-4 col-xs-6">
<div class="thumbnail">
<a href="#honey">
<img src="http://placehold.it/350x350/f00" />
</a>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="thumbnail">
<a href="#honey">
<img src="http://placehold.it/350x350/000" />
</a>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="thumbnail">
<a href="#honey">
<img src="http://placehold.it/350x350/f00" />
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<h3>Inside a List</h3>
<ul class="row no-list-style">
<li class="col-sm-4 col-xs-6">
<div class="thumbnail">
<a href="#honey">
<img src="http://placehold.it/350x350/ff0" />
</a>
</div>
</li>
<li class="col-sm-4 col-xs-6">
<div class="thumbnail">
<a href="#honey">
<img src="http://placehold.it/350x350/000" />
</a>
</div>
</li>
<li class="col-sm-4 col-xs-6">
<div class="thumbnail">
<a href="#honey">
<img src="http://placehold.it/350x350/ff0" />
</a>
</div>
</li>
</ul>
</div>