Un jumbotron es un gran cuadro gris que se usa para indicar algún texto que requiere atención adicional. Cualquier texto que parezca importante se puede escribir dentro de un jumbotron para que parezca grande y notable.
Pasos para agregar jumbotron:
- Use una clase jumbotron dentro de un elemento div.
- Escriba cualquier texto dentro de la etiqueta div.
- Cierra el elemento div.
Sintaxis:
<div class="jumbtron"> Contents... <div>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Jumbotron</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body style="text-align:center;"> <div class="container"> <div class="jumbotron"> <h1 style="color:green;"> GeeksforGeeks </h1> <p>A computer science portal for geeks</p> </div> </div> </body> </html>
Producción:
Jumbotron de ancho completo: las clases .jumbotron-fluid y .container o .container-fluid se utilizan para crear un jumbotron de ancho completo sin bordes redondeados.
Sintaxis:
<div class="jumbotron jumbotron-fluid">
<div class="container"> Contents... <div>
<div>
Ejemplo:
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Jumbotron</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"> </script> <script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"> </script> </head> <body style="text-align:center;"> <div class="container"> <div class="jumbotron"> <h1 style="color:green;"> GeeksforGeeks </h1> <p>A computer science portal for geeks</p> </div> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome
- explorador de Internet
- Firefox
- Ópera
- Safari
Publicación traducida automáticamente
Artículo escrito por Dharmendra_Kumar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA