freeCodeCamp/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-headline.english.md

id, title, challengeType

id	title	challengeType
bad87fee1348bd9aec908846	Create a Bootstrap Headline	0

Description

Now let's build something from scratch to practice our HTML, CSS and Bootstrap skills. We'll build a jQuery playground, which we'll soon put to use in our jQuery challenges. To start with, create an h3 element, with the text jQuery Playground. Color your h3 element with the text-primary Bootstrap class, and center it with the text-center Bootstrap class.

Instructions

Tests

tests:
  - text: Add a <code>h3</code> element to your page.
    testString: assert($("h3") && $("h3").length > 0, 'Add a <code>h3</code> element to your page.');
  - text: Make sure your <code>h3</code> element has a closing tag.
    testString: assert(code.match(/<\/h3>/g) && code.match(/<h3/g) && code.match(/<\/h3>/g).length === code.match(/<h3/g).length, 'Make sure your <code>h3</code> element has a closing tag.');
  - text: Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>
    testString: assert($("h3").hasClass("text-primary"), 'Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>');
  - text: Your <code>h3</code> element should be centered by applying the class <code>text-center</code>
    testString: assert($("h3").hasClass("text-center"), 'Your <code>h3</code> element should be centered by applying the class <code>text-center</code>');
  - text: Your <code>h3</code> element should have the text <code>jQuery Playground</code>.
    testString: assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()), 'Your <code>h3</code> element should have the text <code>jQuery Playground</code>.');

Challenge Seed

Solution

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