--description--

Now we'll create a Bootstrap row for our inline elements.

Create a div element below the h3 tag, with a class of row.

--hints--

You should add a div element below your h3 element.

assert.lengthOf(document.querySelectorAll('div'),2);
assert.lengthOf(document.querySelectorAll('div.row h3.text-primary'),0);
assert.lengthOf(document.querySelectorAll('div.row + h3.text-primary'),0)
assert.lengthOf(document.querySelectorAll('h3.text-primary + div.row'),1);

Your div element should have the class row

const newDiv = document.querySelectorAll('div')?.[1]; 
assert.isTrue(newDiv?.classList?.contains('row'));

Your row div should be nested inside the container-fluid div

assert.lengthOf(document.querySelectorAll('div.container-fluid div.row'),1);

Your div element should have a closing tag.

assert.match(code,/<\/div>/g);
assert.match(code,/<div/g);
assert.equal(code.match(/<\/div>/g).length ,code.match(/<div/g).length);

--seed--

--seed-contents--

html

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>

</div>

--solutions--