css - How to bottom align a button in bootstrap 4? -


my question more complex title, couldn't come better one.

initial setup:

i use bootstrap v4.0.0-alpha.2 , ripped out this simple sidebar. i'm not sure why , if it's relevant set flex: true in _library-variable-overrides.scss (i use css-burrito) since set try out, i'm okay turning off. ;-)

what want do:

i have button in sidebar bottom aligned. ideally it's centered horizontally in sidebar , has 1em margin bottom.

what code looks like:

_shell.scss & _sidenav.scss:

#shell-wrapper {     padding-left: 0;     transition: 0.5s ease; }  #shell-wrapper.toggled {     padding-left: 250px;      #shell-content-wrapper {         position: absolute;         margin-right: -250px;     } }  @media(min-width:768px) {     #shell-wrapper {         padding-left: 250px;     }      #shell-wrapper.toggled {         padding-left: 0;          #shell-content-wrapper {             position: relative;             margin-right: 0;         }     }      #shell-content-wrapper {         padding: 20px;         position: relative;     } }   #sidenav-wrapper {     z-index: 1000;     position: fixed;     left: 250px;     width: 0;     height: 100%;     margin-left: -250px;     overflow-y: auto;     background: #000;     transition: 0.5s ease; }  #shell-wrapper.toggled {      #sidenav-wrapper {         width: 250px;     } }  #shell-content-wrapper {     width: 100%;     position: absolute;     padding: 15px; }  /* sidenav styles */  .sidenav-nav {     position: absolute;     top: 0;     width: 250px;     margin: 0;     padding: 0;     list-style: none;      li {         text-indent: 20px;         line-height: 40px;          {             display: block;             text-decoration: none;             color: #999999;         }          a:hover {             text-decoration: none;             color: #fff;             background: rgba(255, 255, 255, 0.2);         }          a:active, a:focus {             text-decoration: none;         }     }      >.sidenav-brand {         height: 65px;         font-size: 18px;         line-height: 60px;          {             color: #999999;         }          a:hover {             color: #fff;             background: none;         }     } }  @media(min-width:768px) {     #sidenav-wrapper {         width: 250px;     }      #shell-wrapper.toggled #sidenav-wrapper {         width: 0;     }  }

and index.html:

<div id="shell-wrapper" class="toggled">   <div id="sidenav-wrapper">     <ul class="sidenav-nav">       <li class="sidenav-brand">         <a href="#">brand</a>       </li>       <li>         <a href="#">item 1</a>       </li>       <li>         <a href="#">item 2</a>       </li>       <li id="logout">         <button class="btn btn-danger-outline">logout</button>       </li>     </ul>   </div>   <button class="navbar-toggler" type="button">     &#9776;   </button>   <div id="shell-content-wrapper">     <div class="container-fluid">       <div class="row">         <div class="col-lg-12">           <!--main content here-->         </div>       </div>     </div>   </div> </div>

the logout button 1 in question. tried doing <li> of sidenav-nav i'm not tied setup.

what have tried far:

a lot!

what came closest want adding this:

.sidenav-nav {     height: 100%; }  #logout {     position: absolute;     bottom: 1em; }

it's pretty close goal on desktop browser, hitting show me on phone button in chrome, logout button gone.

i haven't worked css-buritto, giving button class or id , passing position:relative argument can set bottom: 1em , should position button @ bottom. alternativly can other position elements fixed trick

like mentioned end 

#logout {     position: relative;     bottom: 1em; }

Comments

Post a Comment

Popular posts from this blog

jOOQ update returning clause with Oracle -

according http://www.jooq.org/doc/3.8/manual/sql-building/sql-statements/update-statement/ jooq doesn't support returning clause in update statements databases except firebird , postgres. does know, still correct oracle jooq? according oracle's documentation, oracle db supports returning clase delete, insert, or update statements. incorrect manual you're right - manual wrong , should fixed: https://github.com/jooq/jooq/issues/5470 single row update returning jooq 3.8 added support single row update .. returning statements. internally, uses callablestatement , pl/sql block of form: begin update "my_table" set "my_table"."column" = 'xyz' "my_table"."id" = 1 returning "my_table"."id", "my_table"."column" ?, ?; ? := sql%rowcount; end; the relevant issue is: https://github.com/jooq/jooq/issues/5190 multi row update returning a...
Read more

java - Warning equals/hashCode on @Data annotation lombok with inheritance -

i have entity inherits other. on other hand, i'm using lombok project reduce boilerplate code, put @data annotation. annotation @data inheritance produces next warning: generating equals/hashcode implementation without call superclass, though class not extend java.lang.object. if intentional, add '@equalsandhashcode(callsuper=false)' type. is advisable add annotation @equalsandhashcode (callsuper = true) or @equalsandhashcode (callsuper = false) ? if not added, 1 callsuper=false or callsuper=true ? the default value false . 1 if don't specify , ignore warning. yes, recommended add @equalsandhashcode annotation on @data annotated classes extend else object. cannot tell if need true or false , depends on class hierarchy, , need examined on case-by-case basis. however, project or package, can configure in lombok.config call super methods if not direct subclass of object. lombok.equalsandhashcode.callsuper = call for configuration system ...
Read more

java - BasicPathUsageException: Cannot join to attribute of basic type -

i using java 8 jpa (hibernate 5.2.1). have clause works perfectly, until introduce clause make use foreign key table values too. i getting following error: basicpathusageexception: cannot join attribute of basic type i think problem related fact have join table, , not sure how create join using join table. employee - employee_category - category model (employee.java): @manytomany(cascade = cascadetype.all, fetch=fetchtype.eager) @jointable ( name="employee_category", joincolumns={ @joincolumn(name="emp_id", referencedcolumnname="id") }, inversejoincolumns={ @joincolumn(name="cat_id", referencedcolumnname="id") } ) private set<category> categories; model (category.java): @id private string id; jpa when introduce following code, fails error above (i think problem new piece of code): join<t, category> category = from.join("id"); predicates.add(criteriabuilder.like(category....
Read more