Bootstrap 4 Flexbox Grid пример

Интересный пример реализации Flexbox в Bootstrap 4. Собственно все на самом деле просто и практически ни чем не отличается от чистой реализации. Ниже привожу сам пример в полном виде.
Ширину в демо немного уменьшил, что бы видно было, но думаю понятен весь ход.

HTML

<header role="banner">
	<h1>Bootstrap 4 - Flexbox Grid</h1>
</header>

<div class="container-fluid">
	
	<h2>extra small</h2>
	<div class="row">
		<div class="col-xs-6">left</div>
		<div class="col-xs-6">right</div>
	</div>
		
	<h2>small</h2>
	<div class="row">
		<div class="col-sm-6">left</div>
		<div class="col-sm-6">right</div>
	</div>
	
	<h2>medium</h2>
	<div class="row">
		<div class="col-md-4">left</div>
		<div class="col-md-4">mid</div>
		<div class="col-md-4">right</div>
	</div>
	
	<h2>large</h2>
	<div class="row">
		<div class="col-lg-4">left</div>
		<div class="col-lg-4">mid</div>
		<div class="col-lg-4">right</div>
	</div>
	
	<h2>extra large</h2>
	<div class="row">
		<div class="col-xl-4">left</div>
		<div class="col-xl-4">mid</div>
		<div class="col-xl-4">right</div>
	</div>

</div>

CSS
// demo styles

header {
	background: #563d7c;
	padding: 2em 1em;
	color: #fff;
	margin-bottom: 2em;
	h1 {
		font-weight: 200;
	}
}

[class*="row"] {
	margin-bottom: 1em;
}

[class*="col-"] {
	padding-top: .75rem;
	padding-bottom: .75rem;
	background-color: rgba(86, 61, 124, 0.15);
	border: 1px solid rgba(86, 61, 124, 0.2);
	width: 100%;
}

Демонстрация

Игорь

Весь спектр SEO услуг, реклама, продвижение в социальных сетях. Изготовление сайтов.