¿Cómo crear un panel Bootstrap con un encabezado?

Un panel es un componente rectangular de Bootstrap , que normalmente se usa para agregar contenido al sitio web. También puede tener un encabezado o pie de página, o ambos. Bootstrap también proporciona varias clases para agregar relleno al contenido o múltiples colores para hacerlo más atractivo.

Enlace CDN: Primero, incluya la hoja de estilo en el código para usar Bootstrap para crear el panel.

<enlace rel=”hoja de estilo” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css”>

Agregue la siguiente sintaxis para tener un panel con el encabezado. La clase panel-heading nos permite tener un encabezado para nuestro panel.

Sintaxis:

<div class="panel panel-default">
   <div class="panel-heading">
           Heading content
   </div>
   <div class="panel-body">
       Body content
   </div>
</div>

El siguiente ejemplo demuestra este enfoque.

Ejemplo:

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
  
<body>
    <div class="container">
        <h2 style="color: green;">
            GeeksforGeeks
        </h2>
          
        <div class="panel panel-default">
            <div class="panel-heading">
                Courses
            </div>
            <div class="panel-body">
                C++ for beginners
            </div>
            <div class="panel-body">
                Python for beginners
            </div>
            <div class="panel-body">
                Java for beginners
            </div>
        </div>
    </div>
</body>
  
</html>

 Salida: En la siguiente salida, se ha creado un panel con «Cursos» como encabezado usando Bootstrap.

Publicación traducida automáticamente

Artículo escrito por bhawnaatrish 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 *