Bootstrap does not do what I want

Navigation
1

Good morning people.

I'm new to the community and here's my first question. I am trying to centralize my form with bootstrap on the screen but it does not want to work nor the stick, already tried in the form, already tried to create new div, I already div div inside, I used all the types of grid cols that could imagine but the class. justify-content-center is not working. My last code was this one.

Note: Do not call the stylization of the site, then I will change the appearance. 

html{
	width: 100%;
	height: 100%;
}

body{
	width: 100%;
	height: 100%;
	margin: 0px;
}

header{
	margin: 0px;
	background-color: green;
	width: 100%;
	height: 50px;
	border-bottom: 4px solid;
}

footer{
	padding-top: 15px;
	width: 100%;
	height: 10%;
	background-color: #12E5CF;
	text-align: center;
}

#menu{
	width: 100%;
}

#menu .btnMenu{
	border-radius: 5px;
	color: black;
	padding: 2px;
	background-color: grey;
	border: 2px;
	border-right: 5px;
	border-style: solid;
	font-size: 24px;
	display: inline;
}

#menu .btnMenu:hover{
	background-color: green;
	border: 2px;
	border-right: 5px;
	border-style: solid;
    animation: btnAnimacao 0.1s;
    animation-fill-mode: forwards;
}

@keyframes btnAnimacao{
	100%{
		background-color: red;
			margin-top: 10px;
			bottom: 0px;
			border: 2px;
			border-left: 5px;
			border-style: solid;
			text-indent: 5px;
		}
}
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title></title>

	<!--jquery js -->
	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	
	<!--3 LINKS REL DE BOOTSTRAP: COMP AND MINI CSS, OPTIONAL THEME, COMP AND MIN JAVASCRIPT-->
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!--CSS-->
	<link rel="stylesheet" type="text/css" href="css/principal.css">
	<link rel="stylesheet" type="text/css" href="css/animacao.css">
</head>
<body>
	<header class="container-fluid">
		<div id="menu" class="col-md-12" align="center;">
			<bottom>
				<div class="btnMenu">Home</div>
				<div class="btnMenu">Stream</div>
				<div class="btnMenu">Vídeos</div>
			</bottom>
		</div>
	</header>
	<main>
		<div class="row justify-content-center justify-content-sm-center justify-content-md-center justify-content-xl-center justify-content-xs-center">
			<div class="col-5 offset-5 col-sm-5 offset-sm-5 col-md-5 offset-md-5 col-xl-5 offset-xl-5 col-xs-5 offset-xs-5">
				<form action="" method="post">
					<p>
						Título:<br>
						<input type="text" name="nTitulo" id="iTitulo" placeholder="Digite o título da notícia." size="30">
					</p>
					<p>
						Texto<br>
						<textarea cols="38" rows="5"></textarea>
					</p>
					<p>
						Dia da Postagem<br>
						<input type="date" name="nData" id="iData">
					</p>
					<p>
						Foto<br>
						<input type="file" name="nFoto" id="iFoto">
					</p>
					<center><input type="submit" name=""></center>
				</form>
			</div>
		</div>
	</main>
	<footer>
		
	</footer>
</body>
</html>
    
asked by anonymous 25.07.2018 / 18:43

3 answers

0

You're using Bootstrap 3, but trying to align with Bootstrap 4 classes ... There's no way for it to work.

Official BS3 documentation link

Notice that I did not change anything in your code, I just took the classes from BS4 and put offset from BS3 and it worked!

OBS: As you are using col-md to see the alignment you need to expand to the entire screen to see it aligned (display on "whole page"), because when the screen is less than% with% of column being 100% of width ai does not align because you did not treat your fields to 100% in small screens

OBS2: Do not use col-md inside tag <input> this is wrong in HTML structure 

<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<title></title>

	<!--jquery js -->
	<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
	<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
	
	<!--3 LINKS REL DE BOOTSTRAP: COMP AND MINI CSS, OPTIONAL THEME, COMP AND MIN JAVASCRIPT-->
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<!--CSS-->
	<link rel="stylesheet" type="text/css" href="css/principal.css">
  <link rel="stylesheet" type="text/css" href="css/animacao.css">
  <style>
  html{
	width: 100%;
	height: 100%;
}

body{
	width: 100%;
	height: 100%;
	margin: 0px;
}

header{
	margin: 0px;
	background-color: green;
	width: 100%;
	height: 50px;
	border-bottom: 4px solid;
}

footer{
	padding-top: 15px;
	width: 100%;
	height: 10%;
	background-color: #12E5CF;
	text-align: center;
}

#menu{
	width: 100%;
}

#menu .btnMenu{
	border-radius: 5px;
	color: black;
	padding: 2px;
	background-color: grey;
	border: 2px;
	border-right: 5px;
	border-style: solid;
	font-size: 24px;
	display: inline;
}

#menu .btnMenu:hover{
	background-color: green;
	border: 2px;
	border-right: 5px;
	border-style: solid;
    animation: btnAnimacao 0.1s;
    animation-fill-mode: forwards;
}

@keyframes btnAnimacao{
	100%{
		background-color: red;
			margin-top: 10px;
			bottom: 0px;
			border: 2px;
			border-left: 5px;
			border-style: solid;
			text-indent: 5px;
		}
}
  </style>
</head>
<body>
	<header class="container-fluid">
		<div id="menu" class="col-md-12" align="center;">
			<bottom>
				<div class="btnMenu">Home</div>
				<div class="btnMenu">Stream</div>
				<div class="btnMenu">Vídeos</div>
			</bottom>
		</div>
  </header>
	<main class="container-fluid">
		<div class="row ">
			<div class="col-md-4 col-md-offset-4 ">
				<form action="" method="post">
					<p>
						Título: Esse IMPUT tem 100% de largura
						
					</p>
<input style="width:100%" type="text" name="nTitulo" id="iTitulo" placeholder="Digite o título da notícia." size="30">
					<p>
						Texto<br>
						<textarea cols="38" rows="5"></textarea>
					</p>
					<p>
						Dia da Postagem<br>
						<input type="date" name="nData" id="iData">
					</p>
					<p>
						Foto<br>
						<input type="file" name="nFoto" id="iFoto">
					</p>
					<center><input type="submit" name=""></center>
				</form>
			</div>
		</div>
	</main>
	<footer>
		
	</footer>
</body>
</html>

TIP: Whenever you search for Bootstrap documentation in Goolge, make sure it is the documentation for the version you need!

    
25.07.2018 / 19:16
0

For this you have to delete the classes of the% of parent% of form and insert the following class: div .

One way to do this without relying on Bootstrap classes would be to apply this style to text-center parent div : 

margin-left: 50%;
transform: translateX(-50%);
    
25.07.2018 / 18:52
0

Leave your form with only a parent div, and use the flex display on it. For example: 

<style>

.divpai{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
</style>

<div class="divpai">

   <form></form>

</div>

Basically, the justify-content: center; will align the form horizontally and align-items: center; aligns the form vertically.     

25.07.2018 / 19:22
Doubt about adding a border on this line Authentication error when sending file to repository in Github