diff options
| author | ysds <[email protected]> | 2018-07-25 09:40:55 +0900 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2018-07-24 17:40:55 -0700 |
| commit | ab53ccc2ccf18b324a3ebaccef20c1bb11ce089a (patch) | |
| tree | f46a8e6710e04e2c415ab733486f92667e485334 /site | |
| parent | d80635c1cd503f0f017c014f3728ee4e3bc05264 (diff) | |
| download | bootstrap-ab53ccc2ccf18b324a3ebaccef20c1bb11ce089a.tar.xz bootstrap-ab53ccc2ccf18b324a3ebaccef20c1bb11ce089a.zip | |
Flexbox based sticky footer example (#26674)
* Flexbox based sticky footer
* Update guide message
* Use utility classes instead of custom CSS
Diffstat (limited to 'site')
4 files changed, 27 insertions, 55 deletions
diff --git a/site/docs/4.1/examples/sticky-footer-navbar/index.html b/site/docs/4.1/examples/sticky-footer-navbar/index.html index 9f8e174e3..ffd2f1184 100644 --- a/site/docs/4.1/examples/sticky-footer-navbar/index.html +++ b/site/docs/4.1/examples/sticky-footer-navbar/index.html @@ -1,5 +1,5 @@ <!doctype html> -<html lang="en"> +<html lang="en" class="h-100"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> @@ -16,7 +16,7 @@ <link href="sticky-footer-navbar.css" rel="stylesheet"> </head> - <body> + <body class="d-flex flex-column h-100"> <header> <!-- Fixed navbar --> @@ -46,13 +46,15 @@ </header> <!-- Begin page content --> - <main role="main" class="container"> - <h1 class="mt-5">Sticky footer with fixed navbar</h1> - <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p> - <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> + <main role="main" class="flex-shrink-0"> + <div class="container"> + <h1 class="mt-5">Sticky footer with fixed navbar</h1> + <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with <code>padding-top: 60px;</code> on the <code>main > .container</code>.</p> + <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p> + </div> </main> - <footer class="footer"> + <footer class="footer mt-auto py-3"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> diff --git a/site/docs/4.1/examples/sticky-footer-navbar/sticky-footer-navbar.css b/site/docs/4.1/examples/sticky-footer-navbar/sticky-footer-navbar.css index 07fd56a64..b4696dab6 100644 --- a/site/docs/4.1/examples/sticky-footer-navbar/sticky-footer-navbar.css +++ b/site/docs/4.1/examples/sticky-footer-navbar/sticky-footer-navbar.css @@ -1,32 +1,15 @@ -/* Sticky footer styles --------------------------------------------------- */ -html { - position: relative; - min-height: 100%; -} -body { - /* Margin bottom by footer height */ - margin-bottom: 60px; -} -.footer { - position: absolute; - bottom: 0; - width: 100%; - /* Set the fixed height of the footer here */ - height: 60px; - line-height: 60px; /* Vertically center the text there */ - background-color: #f5f5f5; -} - - /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ -body > .container { +main > .container { padding: 60px 15px 0; } +.footer { + background-color: #f5f5f5; +} + .footer > .container { padding-right: 15px; padding-left: 15px; diff --git a/site/docs/4.1/examples/sticky-footer/index.html b/site/docs/4.1/examples/sticky-footer/index.html index 839d9883e..6b56e7952 100644 --- a/site/docs/4.1/examples/sticky-footer/index.html +++ b/site/docs/4.1/examples/sticky-footer/index.html @@ -1,5 +1,5 @@ <!doctype html> -<html lang="en"> +<html lang="en" class="h-100"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> @@ -16,16 +16,18 @@ <link href="sticky-footer.css" rel="stylesheet"> </head> - <body> + <body class="d-flex flex-column h-100"> <!-- Begin page content --> - <main role="main" class="container"> - <h1 class="mt-5">Sticky footer</h1> - <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> - <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> + <main role="main" class="flex-shrink-0"> + <div class="container"> + <h1 class="mt-5">Sticky footer</h1> + <p class="lead">Pin a footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> + <p>Use <a href="../sticky-footer-navbar">the sticky footer with a fixed navbar</a> if need be, too.</p> + </div> </main> - <footer class="footer"> + <footer class="footer mt-auto py-3"> <div class="container"> <span class="text-muted">Place sticky footer content here.</span> </div> diff --git a/site/docs/4.1/examples/sticky-footer/sticky-footer.css b/site/docs/4.1/examples/sticky-footer/sticky-footer.css index ebe29104f..7e85cdd2a 100644 --- a/site/docs/4.1/examples/sticky-footer/sticky-footer.css +++ b/site/docs/4.1/examples/sticky-footer/sticky-footer.css @@ -1,22 +1,3 @@ -/* Sticky footer styles --------------------------------------------------- */ -html { - position: relative; - min-height: 100%; -} -body { - margin-bottom: 60px; /* Margin bottom by footer height */ -} -.footer { - position: absolute; - bottom: 0; - width: 100%; - height: 60px; /* Set the fixed height of the footer here */ - line-height: 60px; /* Vertically center the text there */ - background-color: #f5f5f5; -} - - /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ @@ -26,3 +7,7 @@ body { max-width: 680px; padding: 0 15px; } + +.footer { + background-color: #f5f5f5; +} |