4 - Columns horizontal alignment.html

<!DOCTYPE html>
<html lang="es">
	<head>
		<title>Bootstrap 4</title>
		<meta charset="utf-8">
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<style type="text/css">
			.container { margin-bottom: 80px}
			.row { margin: 10px 0; background: #ccc; padding: 10px}
			.row div[class*='col'] { padding: 10px; background: BurlyWood; text-align: center; border: 1px solid;}
		</style>
	</head>
	<body>

		<div class="container">

			<h1>Justify content start</h1>			

			<div class="row justify-content-start">

				<div class="col-3">
					Column
				</div>

				<div class="col-3">
					Column
				</div>

			</div>

		</div>

		<div class="container">

			<h1>Justify content center</h1>

			<div class="row justify-content-center">

				<div class="col-8">
					Column
				</div>

			</div>

		</div>

		<div class="container">

			<h1>Justify content end</h1>

			<div class="row justify-content-end">

				<div class="col-3">
					Column
				</div>

				<div class="col-1">
					Column
				</div>

			</div>

		</div>
		
	</body>
</html>