Flexbox based sticky footer example #26674
Conversation
|
I was thinking about making a similar PR 😉 Using the Maybe we can take this one step further and add some classes which we can use in bootstrap? One class to put on the |
|
Of course. The following custom CSS can be replaced by bootstrap utility classes. body {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 100vh; /* Use height insted of min-height for IE 10/11. */
}
main {
/* Prevent shrinking the main area in IE 10/11. */
-ms-flex-negative: 0;
flex-shrink: 0;
}
.footer {
padding: 1rem 0;
margin-top: auto;
background-color: #f5f5f5;
}to <html class="h-100">
<body class="d-flex flex-column h-100">
<main class="flex-shrink-0">
<footer class="py-3 mt-auto bg-light">In many current examples, it seems inconsistent to use utility classes and custom CSS usage. For example, in the sign-in example, bootstrap/docs/4.1/examples/sign-in/signin.css Lines 2 to 14 in 9c3146d This can be rewritten as follows: <body class="d-flex align-items-center h-100 py-5 bg-light text-center">So should we reduce the custom CSS and replace it with a utility class? |
|
Interesting, I'm more in favour of the utility classes. It stimulates developers to use the build in stuff instead of writing own custom css. |
I've updated it :) |
There was a problem hiding this comment.
Hi @ysds thanks a lot for this PR, and thanks @MartijnCuppens for helping reviewing it
Closes #26656
The sticky footer examples are using specific the height of the footer (60px). I've rewritten it to flexbox based for remove the specific values. The benefitis that the CSS will be more general and more responsive design.
Demo: https://codepen.io/anon/pen/WyxRKp
..I'm worried about using
mainelement selector. Please review it too :)