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 <code>div</code> element.
Nest your first image and your <code>h2</code> element within a single <code><div class="row"></code> element. Nest your <code>h2</code> element within a <code><div class="col-xs-8"></code> and your image in a <code><div class="col-xs-4"></code> so that they are on the same line.
Notice how the image is now just the right size to fit along the text?
- text: Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.
testString: assert($("div.row:has(h2)").length > 0 && $("div.row:has(img)").length > 0, 'Your <code>h2</code> element and topmost <code>img</code> element should both be nested together within a <code>div</code> element with the class <code>row</code>.');
testString: assert($("div.col-xs-4:has(img)").length > 0 && $("div.col-xs-4:has(div)").length === 0, 'Nest your topmost <code>img</code> element within a <code>div</code> with the class <code>col-xs-4</code>.');
testString: assert($("div.col-xs-8:has(h2)").length > 0 && $("div.col-xs-8:has(div)").length === 0, 'Nest your <code>h2</code> element within a <code>div</code> with the class <code>col-xs-8</code>.');
testString: assert(code.match(/<\/div>/g) && code.match(/<div/g)&&code.match(/<\/div>/g).length === code.match(/<div/g).length,'Makesureeachofyour<code>div</code> elements has a closing tag.');