La tarea es centrar el contenido usando bootstrap. El enfoque de este artículo es obtener un contenido centrado en Bootstrap mediante el uso de una clase integrada simple. Centro de texto para alinear todos los elementos en línea como texto, imágenes, enlaces, etc. bajo un elemento de bloque, es decir, elemento <div> o <p> .
Nota: Esta solución solo funciona en las versiones Bootstrap 3 o 4.
Ejemplo:
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">
<title>Text Centering in Bootstrap</title>
<link rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src=
"https://code.jquery.com/jquery-3.5.1.min.js">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js">
</script>
<style>
.bs-example {
margin: 20px;
}
</style>
</head>
<body>
<div class="bs-example">
<div class="container">
<div class="row">
<div class="col-lg-12 bg-light text-center">
<h1>GeeksforGeeks</h1>
<h2>How to Get Centered Content in Bootstrap? .
</h2>
<img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
alt="GeeksforGeeks logo"
height="200px">
</div>
</div>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA