0

How the stuff works in answered question

How the stuff works for me

Ok, so I'm using Bootstrap4 and I'm trying to vertically center the main container. And for some reason that doesn't work :/

Page Screenshot

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <div class="container">
        <div class="row align-items-center">
            debug
        </div>
    </div>
TheQxiz
  • 21
  • 3
  • Thats not dublicate and not answered :|. The stuff in the answer doesnt work in my code. That's the problem. I tried every option in Vertical Align Center in Bootstrap 4 – TheQxiz Jul 18 '19 at 17:48
  • It *is* a duplicate. If you read the answer you'll see that it's not working because **the parent of the item you're trying to center doesn't have a defined height**. It just needs to have a defined height and then it works! https://www.codeply.com/go/kWTlZofg0Q – Carol Skelly Jul 19 '19 at 08:13

1 Answers1

1

I can provide you this documentation about vartical-align. You should understand, that you need some elements, like a picture, for to see some difference. Or you wanna get smthing another? Draw your expected output.

Also read this answer

My working example needs white page, because it was also not working as your page. The problem is in predefined project stuff. Find yours which doesn't allows you use this solution

<body>
<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 h-100">
    <div class="row align-items-center h-100">
        <div class="col-6 mx-auto">
            <div class="jumbotron text-center">
                <h1 class="display-4">Jumbotron</h1>
                <p class="lead">This is a simple centered hero unit.</p>
                <p class="lead">
                    <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
                </p>
            </div>
        </div>
    </div>
</div>

<style>
body,html {
  height: 100%;
}  
</style>
</body>
Aksen P
  • 4,564
  • 3
  • 14
  • 27
  • I want to make it with Bootstrap and not regular CSS. Like here: https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment – TheQxiz Jul 18 '19 at 17:24
  • @TheQxiz, there to much info about this question. In my case I misunderstood you and thought that you need just to center text. You've got the link, if you'll meet some unusual case you can ask again – Aksen P Jul 18 '19 at 17:30
  • @TheQxiz, I have the same issue) searching for solution. – Aksen P Jul 18 '19 at 17:44
  • I have the link, code and other stuff but thats still not working for me xD I edited the question so you can see how the stuff works for everyone and how for me. – TheQxiz Jul 18 '19 at 17:45
  • For me it works in the same way as yours) – Aksen P Jul 18 '19 at 17:46
  • I already tried to use that style thing. Thats the code for fine working jumbotron https://www.codeply.com/go/BumdFnmLuk – TheQxiz Jul 18 '19 at 17:50
  • I did it. It works for me. Just create a new page, without any stuff. I think you have some kind of `css` links defined before your page. You should find the one which destroy suggested stuff. – Aksen P Jul 18 '19 at 17:52
  • Ohhh.. finally, thanks. – TheQxiz Jul 18 '19 at 17:57
  • @TheQxiz, you're welcome) it was funny, because I've got the same issue in my project dir, after that I tried to do it on `white page` – Aksen P Jul 18 '19 at 17:58