Bootstrap Page Layout pattern

Task
BootstrapLayout

Оптимальная сетка шаблона веб-страницы


<html class="[global]">
<head>
	bootstrap.css
	bootstrap-fix.css
	fix-ie.css
</head>
<body class="[global] [body]">
    <section class="[global] [pagewrap]">
        
        <nav role="navigation" class="navbar"></nav>

        <main role="main" class="[global] [main]">

            <section class="container"></section>

        </main>

        <footer class="footer"></footer>
    </section>
  bootstrap.js
</body>
</html>

bootstrap-fix.css
глобальные стили, 
global [
h-100
h-auto h-md-100
]

Коробка для выравнивания элементов страницы,
pagewrap [
default: "d-flex flex-column justify-content-between",
widthContent: "mx-auto container"
]

header | nav
main [
default: "heightCover-widthFull",
heightMinTop: "mb-auto",
heightMinBottom: "mt-auto",
heightFull: "h-auto h-md-100",
heightFullWidthBetween: "h-auto h-md-100 d-flex flex-column justify-content-between",
heightFullWidthEvenly: "h-auto h-md-100 d-flex flex-column justify-content-evenly",
fullCover: "d-flex justify-content-center"
]

footer
	        	
CSS justify-content crossbrowsers
Solution
v.09.2019

Card Title

test

btn_linktext