Bootstrap doesn’t do what I want

Asked

Viewed 322 times

0

Good morning guys.

I’m new to the community, and here’s my first question. I’m trying to centralize my form with bootstrap on the screen but I don’t want to work at all, I’ve tried the form, I’ve tried creating a new div, I’ve put div inside div, I’ve used every kind of grid cols I could imagine but the class. Justify-content-center is not working. My last code was this one.

Note: Do not call for 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>

twitter-bootstrap grid

3 answers

0

Leaves your form with only a parent div, and uses 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 the align-items: center; aligns the form vertically.

0

For this you must delete the classes from div form parent and insert the following class: text-center.

One way to do this without relying on Bootstrap classes would be to apply this style to div father of form:

margin-left: 50%;
transform: translateX(-50%);

  • It worked, thank you Felipe Augusto.

  • @Unova was nothing, not to mark for sure! :D

0


Dude you are using Bootstrap 3, but trying to align with the classes of Bootstrap 4... There is no way to work.

Official documentation of BS3 https://getbootstrap.com/docs/3.3/css/#grid-Offsetting

Note that I didn’t change anything in your code, I just took the classes from BS4 and put the offset BS3 and it worked!

OBS: Like you’re wearing it col-md to see the alignment you need to expand to whole screen to see it aligned (display in "whole page"), because when the screen is smaller than col-md the column gets 100% of the width ai does not align pq vc did not treat its field to stay 100% in small screens.

OBS2: Never use <input> within the tag <p> 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 check if it’s the version documentation you need!

  • Pow, what a shame xD. I still have a lot to learn, good that now I have the community to give a strength. Thanks hugocsl. I just didn’t quite understand this point of 100% on small screens, it’s really getting aligned to the left.How do I tidy up?

  • @The first thing to do is to remove the inputs from inside the P tag. After that you can put a class of width:100% in these inputs when the screen is less than 765px wide. This way the input occupies 100% of the screen width and will be "aligned". Notice that I edited my answer and already made this adjustment in the first input form so you can see and understand better. Tell me if you understand well blz

  • @Just one more thing. If any answer solved your problem consider marking any of them as Answer Accepted , so the question is not pending on the site as Question without Answer Accepted, and has already been solved. Good luck with the project.

  • I’m new here, I can’t mark answers. xD

  • I got it, it was very good, I’ll add a padding just to be more organized. Thanks, I’ve already marked your reply.

  • @Unova valeu young. Always remember to check the version ok rss. Tmj

Show 1 more comment

Browser other questions tagged twitter-bootstrap grid

You are not signed in. Login or sign up in order to post.