¿Cómo alinear el encabezado con el envoltorio en Bootstrap?

Un contenedor HTML le permite centrar el encabezado, el contenido y el pie de página dentro de una página web. Los encabezados pueden ser muy elegantes. El uso de CSS o bootstrap de una manera creativa puede brindarle una barra lateral o una apariencia de dos columnas en las páginas de su sitio web activo.

Sintaxis:

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

Ejemplo:

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>

Producción:

Cómo funciona esto: Cree un envoltorio y asígnele un cierto ancho. Aplíquele un margen horizontal automático usando la propiedad margin: auto o margin-left: auto o margin-right: auto . Asegúrate de que tu contenido esté centrado.

Hay tres métodos para alinear el encabezado con el contenedor que se analizan a continuación:

Método 1: alinear el encabezado con el contenedor en 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>

Producción:

Método 2: alinear el encabezado con el contenedor en 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>

Producción:

Nota: un «envoltorio» encapsula todos los demás componentes visuales de la página. La forma más sencilla es tener una parte div «envoltura» con un ancho junto con bordes automáticos izquierdo y derecho. Los bordes negativos también se pueden utilizar para el centrado horizontal y vertical. Pero viene con sus propios inconvenientes, como que si se cambia el tamaño de la ventana del navegador, el contenido ya no se puede ver.

Método 3: Alinee el encabezado con flexbox en Bootstrap 4. En el siguiente ejemplo, se usa CSS «Flexbox» dentro de la navegación para centrar el contenido.

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>

Producción:

Diferencia entre wrapper y container: En los lenguajes de programación, la palabra container se usa para estructuras que pueden contener más de una parte. Un contenedor es algo que envuelve un solo objeto para brindar una mejor interfaz flexible.

Publicación traducida automáticamente

Artículo escrito por swapnitanerkar28 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *