How to align header with wrapper in Bootstrap ?

30 Jun, 2020
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
<!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>
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
<!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>
Method 2: Align header with wrapper in Bootstrap 4.
HTML
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"    crossorigin="anonymous">    <!-- Optional JavaScript -->  <!-- jQuery first, then Popper.js,       then Bootstrap JS -->  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"    crossorigin="anonymous">  </script>      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"    crossorigin="anonymous">  </script>      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"    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>
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
<!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="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"    integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"    crossorigin="anonymous">    <!-- Optional JavaScript -->  <!-- jQuery first, then Popper.js,       then Bootstrap JS -->  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"    crossorigin="anonymous">  </script>      <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"    integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"    crossorigin="anonymous">  </script>      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"    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>
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.
Bootstrap-Misc
CSS-Misc
HTML-Misc
Picked
Bootstrap
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to set vertical alignment in Bootstrap ?
Tailwind CSS vs Bootstrap
How to toggle password visibility in forms using Bootstrap-icons ?
How to update Node.js and NPM to next version ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form