So I'm having a hard time aligning a button at the bottom of my Bulma's column.
I want the button "Buy" to be at the bottom of the right column (side by side with the button "Hello"). I'm in this situation because my other column content is longer.
So far I tried thoses CSS styles on my button (and none of them helped me):
vertical-align: bottom;
margin-bottom: auto;
position: absolute;
bottom: 0;
Here is my HTML:
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my column will be bigger, lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
Could you guys help me?
Thanks.
Alright, foud the answer : The Bulma column needs to have a few properties (suggested by #ahsan-ullah). Then the button needs to have an auto margin to top.
<section class="section">
<div class="columns is-centered">
<div class="column is-one-fifth item">
<h4 class="title is-4">I'm a big column</h4>
I'm taller than the column next to me so my button will be higher,lorem ipsum lorem ipsum lorem ipsum lorem ipsum
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">Hello</button>
</div>
<div class="column is-one-fifth item">
<h4 class="title is-4" style="align-self: flex-start;">I'm a small column</h4>
I'm a small column, and my button is well placed
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
</div>
</section>
.item{
display:flex;
flex-direction:column;
justify-content:space-between
}
.columns button{
margin-top: auto;
}
Result :
hope it is the answer for you work.
.maindiv{
width:200px;
height:180px;
border:1px solid red;
display:flex;
flex-direction:column;
align-items:center;
justify-content:space-between
}
.innerdiv{
display:flex;
flex-direction:column;
}
button{
width:150px;
height:30px;
color:white;
background-color:blue;
border-radius:4px
}
<div class='maindiv'>
<h3>Mana Foutan</h3>
<span>lorem ipsum lorem ispum</span>
<div class='innerdiv'>
<i>Make it rain!</i>
<button>Buy</button>
</div>
</div>
You can use inline style margin-top:auto on the column div like this:
<div class="column is-one-fifth" style="margin-top: auto;">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
Alternately, probably preferably, add it as a custom style to your .css and use it as a class inline.
.css:
.valignbottom{
margin-top: auto;
}
html:
<div class="column is-one-fifth valignbottom">
<h4 class="title is-4">I'm a small column</h4>
I'm a small column, and my button missplaced
<h6 class="sub">"lorem ipsum"</h6>
<button class="button is-fullwidth">BUY</button>
</div>
Related
Is it possible to have a grid like the first one on desktop moving to the second one on mobile with bootstrap4 or, else, with pure css flex classes ?
Desktop view:
Mobile view :
For the moment my solution is the following one, but I do not like to repeat green content in two places. Can I avoid that please ?
<div class="container">
<main class="row">
<section class="col-lg-8 ecran">
<div class="row mes-contrats justify-content-around">
<div class="col-12">
lot's of content in red container
</div>
</div>
<div class="row infos justify-content-around d-none d-lg-block">
<div class="col-12">
lot's of content in green container
</div>
</div>
</section>
<div class="col-lg-4 asides">
<div class="row">
<div class="col-12">
lot's of content in blue container
</div>
<div class="col-12 d-block d-lg-none">
lot's of content in green container
</div>
</div>
</div>
</main>
This solution is not pure bootstrap because to achieve the solution I used the position absolute and bootstrap does not have the mobile breakpoints on the position-absolute utility.
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<style>
.cnt-red { border: 5px solid red; }
.cnt-blue { border: 5px solid blue; }
.cnt-green { border: 5px solid green; }
#media (min-width: 576px) {
.cnt-left { width: 75%; }
.cnt-right { width: 25%; right: 0; top:0; position: absolute; }
}
</style>
</head>
<body>
<div class="d-flex flex-column ">
<div class="p-2 cnt-left flex-grow-1 cnt-red flex-fill">Flex item 1</div>
<div class="p-2 cnt-right cnt-blue flex-fill">Flex item 2: Lorem ipsum dolor sit amet consectetur adipisicing elit... </div>
<div class="p-2 cnt-left cnt-green flex-fill">Flex item 3</div>
</div>
</body>
</html>
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 a Bootstrap grid of two columns, one col has a responsive image, the second one has a heading, and some other elements. I'd like the content of the second column to always align vertically to the image. Here's the test case:
.align-this {
//?..
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-5 col-md-6 col-lg-7">
<img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
</div>
<div class="col-sm-7 col-md-6 col-lg-5">
<div class="align-this">
<h1 class="main-title">Title</h1>
<p>
Description text here. Lorem ipsum or whatever.
</p>
<div>
main cta
</div>
</div>
</div>
</div>
Try this code
.row{
display: flex;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-sm-5 col-md-6 col-lg-7">
<img class="img-responsive" src="https://dummyimage.com/200x600/000/fff">
</div>
<div class="col-sm-7 col-md-6 col-lg-5">
<div class="align-this">
<h1 class="main-title">Title</h1>
<p>
Description text here. Lorem ipsum or whatever.
</p>
<div>
main cta
</div>
</div>
</div>
</div>
have a link http://codepen.io/santoshkhalse/pen/oBjZyG
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
I want to select the second div in my markup with css using :nth-child but I cannot make it work.
I have this markup generated by a plugin:
<div class="single-container">
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">FIRST</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">SECOND </div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
<div class="toggle-default">
<div class="toggle">
<div class="toggle_title toggle_active">THIRD </div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div></div>
</div>
</div>
I've tried this : .toggle-deafult .toggle:nth-child(2) { background:red; } and this .toggle div:nth-child(2) but it's not working.
Can someone help me with this ?
Thank you !
LATER EDIT: I've modified the markup, this is what I need to modify : <div class="toggle_title toggle_active">SECOND </div>
.toggle-default:nth-child(2) .toggle_title{ background:#f00;}
It is the second one which you want to modify.
You need .toggle-default:nth-of-type(2n) { color: red; } (note the 2n).
.toggle-default:nth-child(2) {
background-color: red;
}