1

My current page looks like this: https://i.stack.imgur.com/J5s7W.png

I want a div container between top navbar and the footer. So that all the green content is a div.

Because I want a centered box in the middle of the green content (It will be a login form). The thing is, that I don't know how to do that.

If im creating a <div> under my <nav>, the div behind the navbar (its not visible).

This is my Code and css:

<!doctype html>
<html lang="de">
<head>
    <title>Login</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<div class="container">
    <div class="row">
        <div class="col-sm">
        Test
        </div>
    </div>
</div>



<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>


<!-- Javascript always on bottom -->
...
</body>

And this is my CSS

body 
{
    background-color: #417239
}

I don't see the container. And in Developer mode of my Browser, the div is here: https://i.stack.imgur.com/hkG38.png

Why isn't it under the navbar? It should fill all the green content (resizable). And How I can create a block which is in the middle of the green content? (That's why I need a "main" div).

Luranis
  • 151
  • 1
  • 3
  • 10

3 Answers3

1

Because .fixed-top and .fixed-bottom class, your content hide behind nav. You should set margin from top, to move your content to visible area:

#content {
  margin: 100px auto;
  text-align:center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>

<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

<div class="container" id="content">
    <div class="row">
        <div class="col-sm">
        Login Form
        </div>
    </div>
</div>

<!-- Footer -->
<nav class="navbar fixed-bottom navbar-expand navbar-dark bg-dark">
  <a class="navbar-brand mx-auto" href="#">Footer</a>
</nav>

https://jsfiddle.net/wuzbj1w6/1/

kastriotcunaku
  • 1,179
  • 7
  • 11
  • Thank you for you answer. But how can I center the div completely ? It should be centered to height and weight not only to weight. Because now it's more Upper and not complete centered. – Luranis Nov 29 '17 at 14:06
  • https://i.imgur.com/G3E6mTj.png this is what it looks like now with your code: `

    test

    `     – Luranis Nov 29 '17 at 14:09
  • 1
    @Luranis you can do that only if you have fixed width and height of login form, in that case you can use this css: https://jsfiddle.net/wuzbj1w6/2/ – kastriotcunaku Nov 29 '17 at 14:31
  • Thank you very much. This works fine. Hope to net get in touch with this shit css again.. css is so stupid in my mind. – Luranis Nov 29 '17 at 14:35
  • what if i want to resize the `login-form` ? Not `200px`, for example `300px` or `400px`. Then it's not centered anymore. Or if I just want to change the width. – Luranis Nov 29 '17 at 14:40
  • 1
    The margins from left and top should be half of width and height – kastriotcunaku Nov 29 '17 at 14:42
  • Ah nice. Thank you again. – Luranis Nov 29 '17 at 14:44
0

Check out https://v4-alpha.getbootstrap.com/examples/signin/ . This should get you going in the right direction.

The div is sitting beneath you navbar because you need to add some padding for the top of your page with css.

Taslack
  • 56
  • 6
  • Yea but why won't it just get under it ? (the container div). And the div has to fill all the available content so it can completely being centered. In the example it's only full width. But it also should be full height (the container div). As you can see. The Example Loginform is not completely centered (height and width). It's more upper. – Luranis Nov 29 '17 at 13:48
  • Because navbar is floating and fixed to the top of the page or elsewhere. So your page isn't going to know to adjust it's top margin down. Checkout https://v4-alpha.getbootstrap.com/examples/navbar-top-fixed/ and read https://getbootstrap.com/docs/4.0/components/navbar/ – Taslack Nov 29 '17 at 14:04
  • As for the vertical alignment check out this answer. https://stackoverflow.com/questions/42388989/bootstrap-4-center-vertical-and-horizontal-alignment – Taslack Nov 29 '17 at 14:18
  • hmm that doesn't work for me. Because I have the navbars. Man I hate CSS so hard -.-. It is still on top. – Luranis Nov 29 '17 at 14:30
  • It takes getting used too, which means a lot of playing around with the code to figure out how it works. Plus your messing around with bootstrap which has a library of built in case that you are trying to figure out. So read the documention to become very familiar with what is going on when you use bootstrap 4. – Taslack Nov 29 '17 at 14:41
0

@Luranis This would help you.Center align the div using bootstrap 4 helper classes.

<div className="container-fluid bg-dark">
      <div className="row h-100 justify-content-center align-items-center bgColor">
        <div className=" col-sm-6 col-md-6 col-lg-4 text-center">

          <form role="form">
              //form fields
          </form>
        </div>
     </div>
       </div>
CodeZombie
  • 2,027
  • 3
  • 16
  • 30