1. Cree un nuevo proyecto Bootstrap.
Puede hacerlo descargando la última versión de Bootstrap desde el sitio web oficial o utilizando un administrador de paquetes como npm o Yarn.
2. Agregue el marcado HTML necesario.
Para crear una cita en bloque, deberá agregar el siguiente formato HTML a su página:
```html
Este es un texto que estará dentro de la cita en bloque.
```
3. Agregue los estilos CSS necesarios.
Para diseñar su cita en bloque, puede agregar los siguientes estilos CSS a su página:
```css
.comilla-bloque-personalizada {
borde izquierdo:5px sólido #eee;
relleno:15px;
margen:0 0 20px;
}
.blockquote-pie de página {
tamaño de fuente:80%;
color:#999;
altura de línea:1,5;
}
```
4. Añade tu propio contenido.
Reemplace el texto dentro de los elementos blockquote y pie de página con su propio contenido.
5. Guarde sus cambios y obtenga una vista previa de su página.
Una vez que haya agregado el marcado HTML y los estilos CSS necesarios, puede guardar los cambios y obtener una vista previa de su página para ver los resultados.
A continuación se muestra un ejemplo de un widget de cita en bloque Bootstrap personalizado:
```html
Lo más hermoso que podemos experimentar es lo misterioso. Es la fuente de todo verdadero arte y ciencia.
```
```css
.comilla-bloque-personalizada {
borde izquierdo:5px sólido #5C6BC0;
relleno:15px;
margen:0 0 20px;
color de fondo:#F0F2FA;
}
.blockquote-pie de página {
tamaño de fuente:80%;
color:#999;
altura de línea:1,5;
}
```
Esto producirá la siguiente cita en bloque:
[Imagen de una cita en bloque con borde azul, fondo azul claro y texto de pie de página gris]
Puede personalizar la apariencia de su cita en bloque cambiando el color del borde, el color de fondo y la fuente del texto.