1

I'm trying to centralize a panel using bootstrap 4, I'm using the align-items-center but I'm not having success. I already added the h-100 and still continue with the header at the top of the page. Does anyone know what could be wrong? I'm using angular 4 with bootstrap

<div class='container h-100'>
  <div class='row h-100 justify-content-center align-items-center'>
    <div class='mx-auto col-sm-6' style="border: 2px solid red"  >
      <h3 class="text-center">Título da Aplicação</h3>
      <h4 class="text-center">Subtítulo da Aplicação</h4>
    </div>
  </div>
</div>

`

EduMarques29
  • 93
  • 1
  • 11

1 Answers1

3

You have the right idea! The problem is that the h-100 class adds a rule of height: 100%, and there's no fixed with on the <body> parent for the container to inherit the height from.

To resolve this, I'd recommend removing the h-100 class from your .container, and instead manually specifying a height of 100vh, which denotes 100% of the viewport height.

.container {
  height: 100vh;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class='container'>
  <div class='row h-100 justify-content-center align-items-center'>
    <div class='mx-auto col-sm-6' style="border: 2px solid red">
      <h3 class="text-center">Título da Aplicação</h3>
      <h4 class="text-center">Subtítulo da Aplicação</h4>
    </div>
  </div>
</div>
Obsidian Age
  • 39,491
  • 10
  • 44
  • 66
  • Tks, Obsidian. Worked perfectly. – EduMarques29 Mar 22 '18 at 23:53
  • Awesome; glad to help! Once you've confirmed that this solves your problem, please don't forget to [**mark it as accepted**](https://stackoverflow.com/help/someone-answers) by clicking on the grey check below the vote buttons -- this removes it from the 'Unanswered Questions' queue, and awards reputation to both the question asker and question answerer. You'll be able to do that 15 minutes after asking any question. Of course, in saying that, you are under no obligation to mark my answer (or anyone else's) as correct, though marking a question as resolved helps keep things flowing smoothly :) – Obsidian Age Mar 22 '18 at 23:59