I've made a bootstrap carousel with items each containing three columns.
As the slide transition ends, the items snap into place and very briefly change the height of the parent div.
I've spent all day trying to find a solution but can't see anything! I'm assuming it is something to do with padding/margins as the slide happens. I've tried forcing the items to have no padding or margins but no luck.
Does anyone know anything about this issue? Is there something obvious I'm missing?
The link to the page with the issue is here
And the code itself:
.tourenEvents {
background: #2a2a2a;
}
.tourenEvents .tourenEventsInner {
padding-top: 30px;
padding-bottom: 50px;
color: #fff;
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock {
margin: 0 !important; /* This was one of the attempts to fix the issue */
}
.tourenEvents .tourenEventsInner .carousel .item .carouselBlock img {
width: 100%;
}
/* == Carousel Control styles - I don't think the issue comes from here but I'm posting it just incase == */
#tourenCarousel .carousel-indicators {
display: none;
}
#tourenCarousel .carousel-control {
background-image: none !important;
color: #fff;
font-size: 50px;
top: 15vh;
opacity: 1;
-webkit-text-stroke: 2px #2a2a2a;
text-shadow: none;
}
#media (max-width: 768px) {
#tourenCarousel .carousel-control {
padding-top: 10vh;
}
}
#tourenCarousel .carousel-control:hover {
color: #fff;
}
#tourenCarousel .carousel-control:focus {
color: #fff;
}
#tourenCarousel .left {
padding-right: 15px;
}
#tourenCarousel .right {
padding-left: 15px;
}
<div class="tourenEvents col-sm-12">
<div class="tourenEventsInner col-lg-12 col-md-offset-1 col-md-10 col-sm-10 col-sm-offset-1 col-xs-10 col-xs-offset-1 text-center">
<h3 class="text-center">Check out our events</h3>
<!-- div:tourenCarousel is the carousel of events -->
<div id="tourenCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#tourenCarousel" data-slide-to="0" class="active"></li>
<li data-target="#tourenCarousel" data-slide-to="1"></li>
<li data-target="#tourenCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
<div class="item">
<div class="col-xs-10 col-xs-offset-1">
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
<div class="carouselBlock col-lg-4 col-xs-10 col-xs-offset-1 text-center">
<p class="lightPara">Lorem ipsum dolor</p>
<h4>Lorem ipsum dolor</h4>
<p class="lightPara">Lorem ipsum dolor</p>
</div>
</div>
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#tourenCarousel" role="button" data-slide="prev">
<i class="fa fa-angle-left" aria-hidden="true"></i>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#tourenCarousel" role="button" data-slide="next">
<i class="fa fa-angle-right" aria-hidden="true"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
Remove width:100% on .tourenEvents .tourenEventsInner .carousel .item .carouselBlock img
you are resizing width on active class.
Related
I want to make an adaptive page with CSS grid like this for PC:
IMG | Text
Text | IMG
IMG | Text
And like this for mobile:
IMG
Text
IMG
Text
IMG
Text
The problem is I can not wrap each pair Text IMG to a div.
How can I make such layout with that chess order and without it for mobile?
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
#media screen (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>
You can adjust the placement using grid-column:
img {
max-width: 100%;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-auto-flow:dense; /* Don't forget this to fill all the tracks */
}
/* you pattern repeat each 4 elements */
.img:nth-child(4n + 2) {
grid-column:1;
}
.info:nth-child(4n + 1) {
grid-column:2;
}
/**/
#media screen and (max-width: 540px) {
.grid {
grid-template-columns: 1fr;
}
.info:nth-child(4n + 1) {
grid-column:1;
}
}
<div class="grid">
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
<div class="info">
<h2>Lorem, ipsum.</h2>
<p>Lorem ipsum dolor sit amet.</p>
<button>Lorem.</button>
</div>
<div class="img">
<img src="https://via.placeholder.com/350x150" alt="">
</div>
</div>
Im using bootstrap 4.0.0-beta.2 and I have a css problem.
I want following layout
This is the html:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div id="task" class="container">
<div class="row">
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12">
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint></app-paint>
</div>
</div>
</div>
</div>
</div>
And what im trying to create is a layout of cards.
I want the first card to stay within the col-12 width and adapt the hight after content. And then I want the second div to always end at bottom of page. No margin between. So I tried to add position:fixed, bottom:0 and height:100% but then the width get wierd and it cant handle resize of the page. So How can I force the second div to end at page bottom?
You may use height and margins.
Boostrap class: .h-100 sets height:100% , but parent need an height where % can be calculated from (css added for html & body)
margin-top:auto and bottom 0 will send the second element at the bottom. boostrp classes used : mt-auto mb-0
html,
body {
height: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container h-100"><!-- class added -->
<div class="row h-100"><!-- class added -->
<div class="col-12">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="col-12 mb-0 mt-auto"><!-- class added -->
<div class="card card-shadow" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
or do you need the second div to expand ?
html,
body {
height: 100%;
}
.custom-flex {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id="task" class="container flex-column h-100">
<!-- class added -->
<div class="d-flex flex-column h-100">
<div class="">
<div class="card card-shadow">
<div class="card-header accent-color">
FOOOOOOOO
</div>
<div class="card-body">
<h4 class="card-title">BAAAR</h4>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum id consectetur lorem, quis mattis orci.</p>
Go somewhere
</div>
</div>
</div>
<div class="d-flex flex-column custom-flex">
<div class="card card-shadow custom-flex" id="paint">
<div class="card-header accent-color">
paint
</div>
<div class="card-body">
<app-paint>app-paint</app-paint>
</div>
</div>
</div>
</div>
</div>
I think the answer of this question would be to change the css of the card. If you are looking for to increase or decrease the space between the cards from top or from bottom you should change the css like so:
In your case for card shadow it would be
.d-flex [class*='card-shadow'] {
margin-top: 2.5em;
margin-bottm: 2.5em;
}
Use your own unit for css calculation em, px or whatever suit you.
I am trying to create a layout using Flexbox where I have elements which consist of 3 other internal elements. The parent item element contains 3 divs: image, button, text. The issue is that my items will not always contain images or text that is the same height as the others. The button is the one thing that will have a consistent height. I am trying to figure out if it's possible to have each of my image divs be the same height as the tallest one and same for the text divs. I would also like the images to be vertically aligned to the bottom, so if one element has a shorter image, the white space to make the element the same height will go above the image like this:
And here is what I have so far:
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I know that I could do this using Javascript to loop through each item to get the tallest and change the CSS of all others, but I'd like to use only CSS if possible. I also know that I could just set the height of the image container to the height of the tallest image, but these images are going to be dynamic and there are going to be a lot of them, so I'd rather have a solution that doesn't require hardcoding values.
Flexing the .item class and adding justify-content: flex-end; would provide the majority of the affect, but as far as I know you'd have to set a specific height on at least one of the items if you want two elements to be aligned the same across flexbox. Happy to be proven wrong though.
You could alternatively use margin-top: auto on the first child to push any unused space to the top and everything else down.
.container {
display:flex;
flex-wrap:wrap;
flex-flow:row wrap;
justify-content:center;
}
.item {
max-width:200px;
margin:0 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
}
.text {
height: 36px; /* magic number */
}
<div class="container">
<div class="item">
<div class="image">
<img src="http://placehold.it/150x300" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x200" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x250" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
<div class="item">
<div class="image">
<img src="http://placehold.it/150x270" />
</div>
<div class="button">
<button>Click Me</button>
</div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
I have some div panels, and after each one there is a gap on the left, when the column on the right is bigger than the last.
How can I make it come under each one (like pinterest)
JSFiddle Example
<div class="row">
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>First Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Second Cell</h4>
<h4>Second Cell</h4>
<h4>Second Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
</div>
<div class="col-xs-6">
<div class=" panel">
<div class="panel-body">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
</div>
You can make it (like Pinterest) in another way like this:
JsFiddle DEMO
*, *:before, *:after {box-sizing: border-box !important;}
.row {
-moz-column-width: 18em;
-webkit-column-width: 18em;
-moz-column-gap: 1em;
-webkit-column-gap:1em;
}
.item {
display: inline-block;
padding: .25rem;
width: 100%;
}
.well {
position:relative;
display: block;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="item">
<div class="well">
<h4>First Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Second Cell</h4>
<h4>Second Cell</h4>
<h4>Second Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>Third Cell</h4>
<h4>Third Cell</h4>
<h4>Third Cell</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid laudantium veritatis expedita optio aperiam modi, odit eius
</h4>
</div>
</div>
<div class="item">
<div class="well">
<h4>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</h4>
</div>
</div>
</div>
</div>
I am using flexbox to align a group of items in a Bootstrap which allows each row to have equal heights. Currently utilizing display:flex to each row and each item, all of the item heights are equal except for individual content areas ie, divs, inside of these item containers. Is there a solution for this so that each contact div is equal height instead of each person div?
Adding flexbox to each row and person div adds extra padding under the contact div area:
I would like these areas to be of equal height:
=== HTML (Using Angular) ===
<div class="container" ng-controller="staff" >
<h1>Who We Are</h1>
<div class="col-sm-12" id="staff">
<div class="row" ng-repeat="peoples in chunkedData()">
<div class="col-sm-3 text-center person" ng-repeat="people in peoples">
<div class="person--border">
<img src="{{people.img}}">
<div class="content">
<h4>{{people.name}}</h4>
<h5>{{people.title}}</h5>
<p>{{people.bio}}</p>
</div>
<div class="contact">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="fa fa-linkedin"></span>
</div>
</div>
</div>
</div>
</div>
=== CSS ===
.row { display: flex; }
.person { display: flex; }
I've also tried the below without success:
.person { display: flex; }
.person .content { content-align: flex; display: flex; }
Flexbox won't make non-sibling elements the same height.
Although setting display:flex on the row will all the children the same height you still have to tell each 'person' to be a column and then assign flex-directions and flex properties to make the columns fill the respective parents.
Plus you are fighting against Bootstrap's normal layout so some of the classes need to be doubled up.
I have assumed that all the images are the same height and that the icon divs will also be the same height. So the "content" div can just be expanded to take up any remaining height.
.row {
display: flex; /* all the persons ar ethe same height */
}
.col-sm-3.person {
display: flex;
flex-direction: column; /* each person is now a column */
}
.col-sm-3.person .person--border {
display: flex;
flex-direction: column; /* inner div also a column */
flex:1; /* and 100% high */
border:1px solid grey;
}
.col-sm-3.person .content {
flex:1; /* make this element expand to fill all remaining space */
background: lightgreen;
}
.row {
display: flex;
}
.col-sm-3.person {
display: flex;
flex-direction: column;
}
.col-sm-3.person .person--border {
display: flex;
flex-direction: column;
flex: 1;
bordeR: 1px solid grey;
}
.col-sm-3.person .content {
flex: 1;
background: lightgreen;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-sm-12" id="staff">
<div class="row">
<div class="col-sm-3 text-center person">
<div class="person--border">
<img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">
<div class="content">
<h4>Name</h4>
<h5>Title</h5>
<p>Bio: Lorem ipsum dolor sit amet.</p>
</div>
<div class="contact">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="fa fa-linkedin"></span>
</div>
</div>
</div>
<div class="col-sm-3 text-center person">
<div class="person--border">
<img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">
<div class="content">
<h4>Name</h4>
<h5>Title</h5>
<p>Bio: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, sit.</p>
</div>
<div class="contact">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="fa fa-linkedin"></span>
</div>
</div>
</div>
<div class="col-sm-3 text-center person">
<div class="person--border">
<img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">
<div class="content">
<h4>Name</h4>
<h5>Title</h5>
<p>Bio: Lorem ipsum dolor sit amet.</p>
</div>
<div class="contact">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="fa fa-linkedin"></span>
</div>
</div>
</div>
<div class="col-sm-3 text-center person">
<div class="person--border">
<img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">
<div class="content">
<h4>Name</h4>
<h5>Title</h5>
<p>Bio: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, sit.</p>
</div>
<div class="contact">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="fa fa-linkedin"></span>
</div>
</div>
</div>
<div class="col-sm-3 text-center person">
<div class="person--border">
<img src="http://lorempixel.com/image_output/people-q-c-250-250-10.jpg">
<div class="content">
<h4>Name</h4>
<h5>Title</h5>
<p>Bio: Lorem ipsum dolor sit amet.</p>
</div>
<div class="contact">
<span class="glyphicon glyphicon-envelope"></span>
<span class="glyphicon glyphicon-earphone"></span>
<span class="fa fa-linkedin"></span>
</div>
</div>
</div>
</div>
</div>
Codepen Demo