css - Vertically align elements between bootstrap rows -

-

this jsfiddle shows attempt @ positioning 3 buttons @ bottom of 3 columns. have used flexbox make sure 3 columns have same height, in order make buttons positioned @ bottom of each column, had make them absolutely positioned. result, size of buttons, not taken in account column's size. there proper way avoid (without using placeholder elements/margins/etc)?

html:

<div class="container">   <div class="row row-same-height">     <div class="col-md-4">       <h2>responsive</h2>       <!--<h4> εξαρτημένη από το ένα άκρο </h4>-->       <p style="text-align: justify">lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse id varius leo. aliquam erat volutpat. proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. nullam consectetur rutrum pretium. vivamus imperdiet elementum neque,         vel volutpat leo mattis in. nam luctus pellentesque dui sed vulputate. curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>       <p class="stick-to-bottom"><a class="btn btn-primary" href="per1.html" role="button">view                 details &raquo;</a></p>     </div>     <div class="col-md-4">       <h2>but</h2>       <p style="text-align: justify">aliquam id congue libero. interdum et malesuada fames ac ante ipsum primis in faucibus. sed ullamcorper sapien nulla, eget fermentum est mattis non. morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. aenean consequat felis         urna, ut eleifend sapien tempus a. phasellus porta mi non venenatis condimentum. aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. praesent metus est, lobortis eget urna a, luctus condimentum eros. curabitur gravida maximus augue         molestie ultricies. mauris ac urna ac lorem sagittis auctor. etiam facilisis rhoncus sapien, @ aliquam ligula euismod ac. vestibulum quis condimentum neque. morbi ornare aliquam consectetur. mauris ipsum ligula, vulputate sed tristique hendrerit,         pellentesque fringilla nisl.</p>       <p class="stick-to-bottom"><a class="btn btn-primary" href="per2.html" role="button">view                 details &raquo;</a></p>     </div>     <div class="col-md-4">       <h2>wrong</h2>       <p style="text-align: justify">duis eu nibh viverra, pretium risus id, egestas odio. suspendisse potenti. praesent aliquet massa sit amet nunc bibendum pellentesque. mauris consectetur auctor magna vel consequat. aliquam sit amet nunc quam. vivamus eu nisi ac est viverra vehicula         lobortis sit amet lorem. cras ut pellentesque nisi. curabitur ornare imperdiet quam sit amet efficitur. vivamus viverra felis @ bibendum aliquam. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. donec         vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>       <p class="stick-to-bottom"><a class="btn btn-primary" href="per3.html" role="button">view                 details &raquo;</a></p>     </div>   </div> </div> <hr> <div class="container">   <div class="row row-same-height">     <div class="col-md-4">       <h2>looks intended</h2>       <!--<h4> εξαρτημένη από το ένα άκρο </h4>-->       <p style="text-align: justify">lorem ipsum dolor sit amet, consectetur adipiscing elit. suspendisse id varius leo. aliquam erat volutpat. proin tempor lorem et dolor sollicitudin, in dignissim arcu blandit. nullam consectetur rutrum pretium. vivamus imperdiet elementum neque,         vel volutpat leo mattis in. nam luctus pellentesque dui sed vulputate. curabitur faucibus fringilla lectus, ut aliquet mauris dictum facilisis.</p>     </div>     <div class="col-md-4">       <h2>but</h2>       <p style="text-align: justify">aliquam id congue libero. interdum et malesuada fames ac ante ipsum primis in faucibus. sed ullamcorper sapien nulla, eget fermentum est mattis non. morbi tortor tellus, sollicitudin quis nisi at, hendrerit faucibus nisl. aenean consequat felis         urna, ut eleifend sapien tempus a. phasellus porta mi non venenatis condimentum. aliquam ut dolor eleifend, maximus quam vitae, scelerisque leo. praesent metus est, lobortis eget urna a, luctus condimentum eros. curabitur gravida maximus augue         molestie ultricies. mauris ac urna ac lorem sagittis auctor. etiam facilisis rhoncus sapien, @ aliquam ligula euismod ac. vestibulum quis condimentum neque. morbi ornare aliquam consectetur. mauris ipsum ligula, vulputate sed tristique hendrerit,         pellentesque fringilla nisl.</p>     </div>     <div class="col-md-4">       <h2>not responsive</h2>       <p style="text-align: justify">duis eu nibh viverra, pretium risus id, egestas odio. suspendisse potenti. praesent aliquet massa sit amet nunc bibendum pellentesque. mauris consectetur auctor magna vel consequat. aliquam sit amet nunc quam. vivamus eu nisi ac est viverra vehicula         lobortis sit amet lorem. cras ut pellentesque nisi. curabitur ornare imperdiet quam sit amet efficitur. vivamus viverra felis @ bibendum aliquam. class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. donec         vestibulum, quam id efficitur consequat, ipsum dolor sollicitudin augue, id mollis erat risus quis urna. integer aliquet suscipit orci, vehicula cursus lectus malesuada in. </p>     </div>   </div>   <div class="row">     <p class="col-md-4"><a class="btn btn-primary" href="per1.html" role="button">viewdetails &raquo;</a></p>      <p class="col-md-4"><a class="btn btn-primary" href="per2.html" role="button">view details &raquo;</a></p>     <p class="col-md-4"><a class="btn btn-primary" href="per3.html" role="button">view details &raquo;</a></p>   </div> </div>

css:

.row-same-height {   display: -webkit-box;   display: -webkit-flex;   display: -ms-flexbox;   display: flex; }  .stick-to-bottom {   position: absolute;   bottom: 0; }

you're using flexbox, use flexbox. why on earth absolutely position?

all you'll need flex columns vertically (use flex-direction: column) , use justify-content: space-between. you'll want put: flex: 1 on <p> tags have text content in them (since content varies in length):

.row-same-height .col-md-4 {     display: flex;     flex-flow: column nowrap; /* shorthand `flex-direction` , `flex-wrap` */     justify-content: space-between; } .row-same-height p:first-of-type {     flex: 1; }

and add whatever vendor prefixes like. here's updated fiddle. cheers!


Comments

Post a Comment

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

-
can configure following sample code ? when run following code, error : no entity framework provider found ado.net provider invariant name 'devart.data.sqlite' setting in machine.config <system.data> <dbproviderfactories> <add name="dotconnect sqlite" invariant="devart.data.sqlite" description="devart dotconnect sqlite" type="devart.data.sqlite.sqliteproviderfactory, devart.data.sqlite, version=4.6.287.0, culture=neutral, publickeytoken=09af7300eec23701" /> </dbproviderfactories> </system.data> after add below block code in app.config <?xml version="1.0"?> <configuration>   <configsections> <!-- more information on entity framework configuration, visit http://go.microsoft.com/fwlink/?linkid=237468 --> <section name="entityframework" type="system.data.entity.internal.configfile.entityframeworksection, entit...
Read more

java - Copying object fields -

-
what best way of copying classes when need have 2 independent variables? have simple class: public class myclass { boolean = false; string b= "not empty"; } do need make method : assign(myclass data ) { a= data.a; b= data.b; } is there automatic method copy (duplicate) objects in java? do need make method : pretty close. instead of making method, should make constructor. such constructors called copy constructor , , create them this: myclass(myclass data) { = data.a; b = data.b; } and create copy of instance, use constructor this: myclass obj1 = new myclass(); myclass obj2 = new myclass(obj1); copy constructor can tedious : using copy constructor create deep-copy can tedious, when class has mutable fields. in case, assignment create copy of reference, , not object itself. have create copy of fields (if want deep copy). can go recursive. a better way create deep copy serialize , deserialize object. why not use clone()? ...
Read more

c++ - Clear the memory after returning a vector in a function -

-
i have function processes , stores lot of data in , returns results vector of class. amount of data stored in function tremendous , want clear storage memory of function after finished job. necessary (does function automatically clear memory) or should clear memory function? update: vector<customers> process(char* const *filename, vector<int> id) { vector<customers> list_of_customers; (perform actions) return list_of_customers; } variables defined locally within function automatically released @ end of function scope. destructors objects called, should free memory allocated objects (if objects coded correctly). example of such object std::vector . anything you've allocated new must have corresponding delete release storage. try avoid doing own allocation , use raii instead, i.e. containers or smart pointers.
Read more