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