---
id: bad87fee1348bd9aede08845
title: Create a Custom Heading
challengeType: 0
forumTopicId: 16816
dashedName: create-a-custom-heading
---
# --description--
We will make a simple heading for our Cat Photo App by putting the title and relaxing cat image in the same row.
Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a `div` element.
Nest your first image and your `h2` element within a single `
` element. Nest your `h2` element within a `
` and your image in a `
` so that they are on the same line.
Notice how the image is now just the right size to fit along the text?
# --hints--
Your `h2` element and topmost `img` element should both be nested together within a `div` element with the class `row`.
```js
assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
```
Your topmost `img` element should be nested within a `div` with the class `col-xs-4`.
```js
assert(
$('div.col-xs-4:has(img)').length > 0 &&
$('div.col-xs-4:has(div)').length === 0
);
```
Your `h2` element should be nested within a `div` with the class `col-xs-8`.
```js
assert(
$('div.col-xs-8:has(h2)').length > 0 &&
$('div.col-xs-8:has(div)').length === 0
);
```
All of your `div` elements should have closing tags.
```js
assert(
code.match(/<\/div>/g) &&
code.match(/