Bootstrap - wycentrowanie div-a na stronie (oś x i y)

pytanie zadane 10 września 2018 w HTML i CSS przez domi10052 Obywatel (1,180 p.)

Dobry wieczór!

Piszę stronę i nie potrafię sobie poradzić z wycentrowaniem wiersza a właściwie kolumny na środku ekranu. Da się to zrobić za pomocą bootstrap-a? Dziękuję za odp.

<!DOCTYPE HTML>
<html lang="pl">

<html>
	<head>
		<meta charset="utf-8"/>
		<title>Random Projects</title>
		<meta name="description" content="Poznaj projekty ekipy Random Team!" />
		<meta name="keywords"  content="CanSat, kopernik, random, team"/>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
		<link rel="stylesheet" href="style.css"/>
		<link href="https://fonts.googleapis.com/css?family=Comfortaa:400,700&amp;subset=latin-ext" rel="stylesheet">
		<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&amp;subset=latin-ext" rel="stylesheet">


	</head>
	<body>
		
		<header>
			
			<nav class="navbar bg-primary">
				Hej
			</nav>
			
			<div class = "container-fluid">
				<div class="flex-row">
					<div class = "col">
						<h1 style="font-size: 3vmax;"> <strong> Nazwa </strong> </h1>
					</div>
					<div class = "col">
						<h5 style="font-size: 2vmax;"> Pod Tytuł </h5>
					</div>
					<button type="button" class="btn btn-primary btn-lg">LEARN MORE</button>
				</div>
			</div>
		</header>

		<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
		
	</body>
	
</html>

body
{
	background-color: white;
	font-size: 20px;
	color: white;
}

.container-fluid 
{
	min-height: 100vh;
	background-color: black;
    height:100%;
	font-family: 'Comfortaa';
	color: #FFFFFF;
}

hr
{
	max-width: 60px;
	border: none;
    height: 4px;
	background-color: #28F1FF;
}

2 odpowiedzi

odpowiedź 10 września 2018 przez lapa19904 Stary wyjadacz (11,560 p.)
wybrane 10 września 2018 przez domi10052

odpowiedź 10 września 2018 przez Tomek Sochacki Ekspert (227,510 p.)

A musisz usilnie robić to w bootstrap? Ja bym to najszybciej zrobił po prostu we flexie, np: https://codepen.io/anon/pen/pOawqz Ustawiając odpowiednie właściwości dla contenera i jego dziecka. Według mnie to jest najszybsze rozwiązanie, a flex jest już dziś dobrze wspierany.

Pewnie w samym bootku też się da, ale na co dzień go nie używam więc nie wiem dokładnie jak to teraz jest (chyba teraz na topie jest wersja 4 jeśli się nie mylę).