Bootstrap vertical alignment not working no matter what

Question

I've read tons of different topics and articles about that common issue but still no working solution. Now I'm kinda desperate so I'd very grateful for any help and here's code:

.auth-tab {
 background-color: red;
}

<body>
  <div class="container-fluid">
  <div class="row justify-content-center align-items-center">
   <div class="auth-tab col-xs-12 col-sm-8 col-md-5 col-lg-6 col-xl-6">
    sth
   </div>
  </div>
 </div>
</body>

What I want is to vertically and horizontally align .auth-tab

score -1 · Answer 1 · answered Oct 13 '18 at 13:48

-1

Break it down into small testable steps without referencing all the various classes at once. Start with just the container, row and single column. Then test to evaluate if it works. Then add one more class and test. Repeat until you see what fails. My guess is the syntax. What version of bootstrap is being used. Also, instead of calling a bootstrap class, call the css attribute; style=“text-align:center;”.

answered Oct 13 '18 at 13:48

Dwayne Gibbs

58
7

I might try and add text-align:center; to the auth-tab attribute to see if it works. – Dwayne Gibbs Oct 13 '18 at 13:50
i dont need the text to be aligned, the whole div is required. version - 4.1.3 – run4w4y Oct 13 '18 at 14:39
@run4w4y did you try my suggestion? – Dwayne Gibbs Oct 13 '18 at 14:54
yep, just pure `.container` and `.row align-items-center` but still nothing – run4w4y Oct 13 '18 at 17:20

Bootstrap vertical alignment not working no matter what

1 Answers1