How to align header with wrapper in Bootstrap ?

Last Updated : 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> 

Output:

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> 

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

<!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> 

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.

Suggest improvement

How to wrap the text around an image using HTML and CSS ?

How to use Typescript with native ES6 Promises ?

Share your thoughts in the comments

How to align header with wrapper in Bootstrap ?

HTML

HTML

HTML

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?