---
id: bad87fee1348bd9aede08845
title: Creare un'intestazione personalizzata
challengeType: 0
forumTopicId: 16816
dashedName: create-a-custom-heading
---
# --description--
Creeremo una semplice intestazione per la nostra Cat Photo App mettendo il titolo e l'immagine del gatto nella stessa riga.
Ricorda, Bootstrap utilizza un sistema di griglia responsivo, che rende facile mettere gli elementi in righe e specificare la larghezza relativa di ogni elemento. La maggior parte delle classi di Bootstrap può essere applicata a un elemento `div`.
Annida la prima immagine e l'elemento `h2` nello stesso elemento `
`. Annida l'elemento `h2` in un `
` e la tua immagine in un `
` in modo che stiano nella stessa linea.
Hai notato come l'immagine ha ora la giusta dimensione per adattarsi al testo?
# --hints--
Il tuo elemento `h2` e l'elemento `img` più in alto dovrebbero essere entrambi annidati all'interno di un elemento `div` di classe `row`.
```js
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
```
Il tuo elemento `img` più in alto dovrebbe essere annidato all'interno di un `div` di classe `col-xs-4`.
```js
assert(
$('div.col-xs-4:has(img)').length > 0 &&
$('div.col-xs-4:has(div)').length === 0
);
```
Il tuo elemento `h2` dovrebbe essere annidato all'interno di un `div` di classe `col-xs-8`.
```js
assert(
$('div.col-xs-8:has(h2)').length > 0 &&
$('div.col-xs-8:has(div)').length === 0
);
```
Tutti i tuoi elementi `div` dovrebbero avere dei tag di chiusura.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/