Centralize DIV with Bootstrap or CSS

Asked

Viewed 556 times

0

Good morning,

Could you help me? I would like to center a Div(id="newServic") that is displayed by clicking on a Btn(id="newServicoBtn").

Follow the code below

<?php 
	session_start();
	if(isset($_SESSION['User'])){
		
 ?>


<!DOCTYPE html>

<html>

<link rel="stylesheet" type="text/css" href="../css/ERP.css">

<head>

	<title>ERP Nserv</title>
	<?php require_once "menu.php"; ?>

</head>

<body>

	<div class="container">

		 <div class="row">

		 	<div class="col-sm-12" align="center">
		 		<span class="btn btn-default" id="novoServicoBtn">Cadastrar Novo</span>
		 		<span class="btn btn-default" id="servicosFeitosBtn">Lista de Serviços</span>
		 	</div>

		 </div>

		 <div class="row">

		 	<div class="col-sm-12">
		 		<div class="centralizarERP" id="novoServico"></div>
		 		<div id="servicosFeitos"></div>
		 	</div>

		 </div>

		 <div class="row">
			<br>
			<h3 align="center">ENTRADA DE SERVIÇOS</h3>
			<br>
		 	<div class="col-sm-12" align="center">
		 		<div id="tabelaServicosEntrada"></div>
		 	</div>

		 </div>

	</div>

</body>

</html>
	
	<script type="text/javascript">
		$(document).ready(function(){

            $('#tabelaServicosEntrada').load('servicos/tabelaServicosEntrada.php');

			$('#novoServicoBtn').click(function(){
				esconderSessao();
				$('#novoServico').load('servicos/cadastrarServico.php');
				$('#novoServico').show();
			});
			$('#servicosFeitosBtn').click(function(){
				esconderSessao();
				$('#servicosFeitos').load('#');
				$('#servicosFeitos').show();
			});
		});

		function esconderSessao(){
			$('#novoServico').hide();
			$('#servicosFeitos').hide();
		}

	</script>

<?php 
	}else{
		header("location:../index.php");
	}
 ?>

This Div is inherited from another class, follows below the code:

<?php 

require_once "../../Classes/Conexao.php";

	$c= new conectar();
	$conexao=$c->conexao();
?>

<br>
<div class="row">
	<div class="col-md-6 offset-md-3" align="center">
		<form id="frmNovoServico">
			<label>Cliente</label>
			<select class="form-control input-sm" id="clienteSelect" name="clienteSelect">
				<option value="A">Selecionar</option>
				<option value="0">Sem Cliente</option>
				<?php

				$sql="SELECT ID_Cliente, Nome, Sobrenome FROM clientes";

				$result=mysqli_query($conexao,$sql);

				while ($cliente=mysqli_fetch_row($result)):
					?>
					<option value="<?php echo $cliente[0] ?>"><?php echo $cliente[1]." ".$cliente[2] ?></option>
				<?php endwhile; ?>
			</select>
			<br>
			<label>Equipamento</label>
			<input type="text" class="form-control input-sm" id="equipamento" name="equipamento">
			<br>
			<label>Informação</label>
			<textarea type="text" class="form-control input-sm" id="informacao" name="informacao" rows="5" />
			<br>
			<label>Número Serial</label>
			<input type="text" class="form-control input-sm" id="serialnumber" name="serialnumber">
			<p></p>
			<span class="btn btn-primary" id="btnAddServico">Cadastrar Serviço</span>
		</form>
	</div>
</div>


<script type="text/javascript">
		$(document).ready(function(){

			$('#btnAddServico').click(function(){

				vazios=validarFormVazio('frmNovoServico');

				if(vazios > 0){
					alertify.alert("ATENÇÃO","Preencha todos os Campos");
					return false;
				}

				dados=$('#frmNovoServico').serialize();

				$.ajax({
					type:"POST",
					data:dados,
					url:"../Procedimentos/servicos/cadastrarServico.php",
					success:function(r){

						if(r==1){
							$('#frmNovoServico')[0].reset();
							alertify.success("Cadastro com Sucesso");
							$('#tabelaServicosEntrada').load('servicos/tabelaServicosEntrada.php');
						}else{
							alertify.error("Não foi possível Cadastrar");
						}
					}
				});
			});
		});
	</script>

css3 twitter-bootstrap

  • Which version of bootstrap you are using ?

  • Version 4, but I removed the link from the Page. Code corrected above

2 answers

0

To align the DIV horizontally, apply the following CSS attributes to it

#novoServico{
    display: table;
    margin: 0 auto;
}

  • really centralized, but the inputs were small and inadequate. In case, would you have to adjust them individually or is there another way to fix? Thank you

  • puts width: 100% on Row and sees if something changes

  • It doesn’t change, and if I put it in the DIV itself it cancels the configuration of Centralization that Leandro mentioned.

  • As you are using bootstrap, it would be interesting to do this positioning using the "offset" classes of the grid model... Take a look at this link: https://getstrapboot.com/docs/4.0/layout/grid/#Offsetting-Columns

0


I don’t have an environment to exactly test your code, but here’s a simple example of how you align horizontally using Bootstrap 4, just use the class mx-auto in col.

mx-auto means that the element has automatic margin on the axis x, but to work you have to put the form or inputs inside a column, and follow the Bootstrap Grid pattern, as in the example below, in it I lined up a col-3 in the center of row. You don’t even need to do CSS for this kind of alignment!

<link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" />

<div class="container">
	<div class="row">
		<div class="col-3 mx-auto">
				<form>
					<div class="form-group">
						<label for="exampleInputEmail1">Email address</label>
						<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
						<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
					</div>
					<div class="form-group">
						<label for="exampleInputPassword1">Password</label>
						<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
					</div>
					<div class="form-check">
						<input type="checkbox" class="form-check-input" id="exampleCheck1">
						<label class="form-check-label" for="exampleCheck1">Check me out</label>
					</div>
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
		</div>
	</div>
</div>

  • I’ll test and tell you anyway Thank you

  • Very good, you solved!

  • @Batter!

Browser other questions tagged css3 twitter-bootstrap

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