Html Question posted in
Some basic documentation can be found here.

Html – Vertically Center div Using Bootstrap

I’m currently working with a template, and I’m trying to position the elements with the following requirements:

  • The header must stick to the top, be horizontally centered, with spacing between the H3 and the set of <nav> links.
  • The <main> must be horizontally and vertically centered, with text-alignment being to the right.

I’ve been at this for 3 hours and I still haven’t managed to get it to work. Here is the template:

  <div>
    <header className='fixed-top d-flex justify-content-around'>
      <div className="">
        <h3 className="float-md-start mb-0">Ethan Leyden</h3>
        <nav className="nav nav-masthead justify-content-center float-md-end">
          <a className="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
          <a className="nav-link fw-bold py-1 px-0" href="#">Features</a>
          <a className="nav-link fw-bold py-1 px-0" href="#">Contact</a>
        </nav>
      </div>
    </header>

    <div className="mx-auto my-auto">
      <main className="">
        <h1>Welcome to the site</h1>
        <p className="lead">It's definitely still under construction. Do you know how to vertically center content with Bootstrap? I sure don't</p>
        <p className="lead">
          <a href="#" className="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
        </p>
      </main>
    </div>
  </div>

I’ve tried various combinations of mx-auto, my-auto, align-items-center, d-flex but to no avail. I’m sure this is a trivial question but I can’t find the answer anywhere to my specific question (or find one that works, at least).

Tags:

2

Answers


  1. 0

    You have to use d-flex for first point and flex-grow-1 to make the horizontally and vertically centered.

    <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="flex flex-column vh-100">
    <header class='fixed-top d-flex justify-content-around'>
        <div class="d-flex align-items-center gap-5 justify-content-center">
            <h3 class="float-md-start mb-0">Ethan Leyden</h3>
            <nav class="nav nav-masthead justify-content-center float-md-end">
                <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
                <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
                <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
            </nav>
        </div>
    </header>
<div class="mx-auto flex-grow-1 d-flex justify-content-center align-items-center h-100 mt-5">
    <main class="">
        <h1>Welcome to the site</h1>
        <p class="lead">It's definitely still under construction. Do you know how to vertically center
            content with Bootstrap? I sure don't</p>
        <p class="lead">
            <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
        </p>
    </main>
</div>
    <div class="mx-auto my-auto">
     
    </div></div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
  2. 0 
    <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body>
    <div class="flex flex-column vh-100">
    <header class='fixed-top d-flex justify-content-around'>
        <div class="d-flex align-items-center gap-5 justify-content-center">
            <h3 class="float-md-start mb-0">Ethan Leyden</h3>
            <nav class="nav nav-masthead justify-content-center float-md-end">
                <a class="nav-link fw-bold py-1 px-0 active" aria-current="page" href="#">Home</a>
                <a class="nav-link fw-bold py-1 px-0" href="#">Features</a>
                <a class="nav-link fw-bold py-1 px-0" href="#">Contact</a>
            </nav>
        </div>
    </header>
<div class="mx-auto flex-grow-1 d-flex justify-content-center align-items-center h-100 mt-5">
    <main class="">
        <h1>Welcome to the site</h1>
        <p class="lead">It's definitely still under construction. Do you know how to vertically center
            content with Bootstrap? I sure don't</p>
        <p class="lead">
            <a href="#" class="btn btn-lg btn-light fw-bold border-white bg-white">Learn more</a>
        </p>
    </main>
</div>
    <div class="mx-auto my-auto">
     
    </div></div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search