How to align header with wrapper in Bootstrap ?

An HTML wrapper permits you to center header, content, and footer inside a webpage. Headers could be very fancy. Using CSS or bootstrap in a creative way can give you with a sidebar, or two-column look to your active website pages.

Syntax:

<div class="wrapper">
    content...
</div>

Example:

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        How to align header with 
        wrapper in Bootstrap?
    </title>
  
    <style type="text/css">
        .wrapper {
            width: 500px;
            margin: 0 auto;
        }
    </style>
</head>
  
<body>
    <div class="wrapper">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        Piece of text inside a 500px 
        width div centered on the page
    </div>
</body>
  
</html>

chevron_right


Output:



How this works: Create a wrapper and assign it a certain width. Apply an automatic horizontal margin to it by using margin: auto or margin-left: auto or margin-right: auto property. Make sure your content will be centered.

There are three methods to align header with wrapper that are discussed below:

Method 1: Align header with the wrapper in CSS.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title>
        Bootstrap 4 Align Header
        with Wrapper
    </title>
  
<style type="text/css">
  
        /* Fit the body to the 
        edges of the screen */
        body {
            margin: 0;
            padding: 0;
        }
  
        nav {
            width: 100%;
            background: lightgreen;
            font-size: 1.1rem !important;
            font-weight: bold;
            text-transform: uppercase !important;
            color: black !important;
            font-family: tahoma;
            padding: 0;
            margin: 0;
        }
  
        /* The centered wrapper, all other 
          content divs will go interior 
          and this will never surpass the 
          width of 960px. */
        .wrapper {
            width: 960px;
            max-width: 100%;
            margin: 0 auto;
        }
  
        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
  
        li {
            float: right;
        }
  
        li a {
            display: block;
            color: black;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
        }
    </style>
</head>
  
<body>
    <header>
        <nav>
            <div class="wrapper">
                <ul>
                    <li><a href="#contact">
                        Contact
                    </a></li>
  
                    <li><a href="#about">
                        About
                    </a></li>
  
                    <li><a class="active" 
                        href="#home">Home
                    </a></li>
                </ul>
            </div>
        </nav>
    </header>
  
    <center>
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
    </center>
</body>
  
</html>

chevron_right



Output:

Method 2: Align header with wrapper in Bootstrap 4.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
  <meta charset="utf-8">
  <meta name="viewport" content=
      "width=device-width, initial-scale=1
      shrink-to-fit=no">
  
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href=
    integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous">
  
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, 
      then Bootstrap JS -->
    integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous">
  </script>
    
  <script src=
    integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous">
  </script>
    
  <script src=
    integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous">
  </script>
    
  <title>
    Bootstrap 4 Align Header 
    with Wrapper
  </title>
  
  <style type="text/css">
    html,
    body {
      height: 100%;
      margin: 0;
    }
  
    .wrapper {
      min-height: 100%;
      width: 300px;
      margin: 0 auto;
      margin-bottom: -50px;
    }
  
    .push {
      height: 50px;
    }
  
    .navbar a {
      font-size: 1.1rem !important;
      font-weight: bold;
      text-transform: uppercase !important;
      color: black !important;
    }
  </style>
</head>
  
<body>
  <header>
    <nav class="navbar navbar-expand-lg 
        navbar-light bg-light border-top 
        border-bottom border-dark">
      <div class="wrapper">
        <button class="navbar-toggler 
            collapsed" type="button" 
            data-toggle="collapse"
            data-target="#navbarSupportedContent" 
            aria-controls="navbarSupportedContent" 
            aria-expanded="false"
            aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
  
        <div class="navbar-collapse collapse" 
          id="navbarSupportedContent" style="">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">
                Home <span class="sr-only">
                  (current)
                </span>
              </a>
            </li>
  
            <li class="nav-item">
              <a class="nav-link" href="#">
                About
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Contact
              </a>
            </li>
          </ul>
        </div>
        <div class="push"></div>
      </div>
    </nav>
  </header>
  
  <center>
    <h1 style="color: green">
      GeeksforGeeks
    </h1>
  </center>
</body>
  
</html>

chevron_right



Output:

Note: A “wrapper” encapsulates all other visual components on the page. The most straightforward way is to have a “wrapper” div part with a width along with left and right auto-edges. Negative edges can also be used for horizontal and vertical centering. But it comes with its own drawbacks like, if the window browser will be resized, the content cannot be seen any longer.

Method 3: Align header with flexbox in Bootstrap 4. In the following example, CSS “Flexbox” within the nav is used to center the content.

HTML

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html lang="en">
  
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content=
      "width=device-width, 
      initial-scale=1
      shrink-to-fit=no">
  
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href=
    integrity=
"sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
    crossorigin="anonymous">
  
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, 
      then Bootstrap JS -->
    integrity=
"sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
    crossorigin="anonymous">
  </script>
    
  <script src=
    integrity=
"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
    crossorigin="anonymous">
  </script>
    
  <script src=
    integrity=
"sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
    crossorigin="anonymous">
  </script>
    
  <title>
    Bootstrap 4 Align header 
    with wrapper
  </title>
  
  <style type="text/css">
    .navbar {
      display: flex;
      justify-content: space-between;
    }
  
    .navbar-collapse {
      flex-grow: 0;
    }
  
    .navbar-expand-lg .navbar-collapse {
      justify-content: flex-end;
    }
  
    .flex-mobile-nav {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
  
    .nav-container-nav {
      max-width: 1024px;
      margin: 0 auto;
      width: 100%;
      display: flex;
    }
  
    .navbar a {
      font-size: 1.1rem !important;
      font-weight: bold;
      text-transform: uppercase !important;
      color: black !important;
    }
  </style>
</head>
  
<body>
  <header>
    <nav class="navbar navbar-expand-lg 
        navbar-light bg-light border-top 
        border-bottom border-dark">
  
      <div class="nav-container-nav">
        <div class="flex-mobile-nav">
          <button class="navbar-toggler 
              collapsed" type="button" 
              data-toggle="collapse"
              data-target="#navbarSupportedContent" 
              aria-controls="navbarSupportedContent" 
              aria-expanded="false"
              aria-label="Toggle navigation">
  
            <span class="navbar-toggler-icon"></span>
          </button>
        </div>
        <div class="navbar-collapse collapse" 
          id="navbarSupportedContent" style="">
            
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">
                Home <span class="sr-only">
                  (current)
                </span>
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                About
              </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">
                Contact
              </a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
  </header>
  <center>
    <h1 style="color: green"><br>
      GeeksforGeeks
    </h1>
  </center>
</body>
  
</html>

chevron_right



Output:

Difference between wrapper and container: In programming languages, the word container is used for structures that can contain more than one part. A wrapper is something that wraps around a single object to give a better flexible interface.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.