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

1.7 KiB

id title challengeType forumTopicId
bad87fee1348bd9aec908846 Create a Bootstrap Headline 0 16812

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: You should add an <code>h3</code> element to your page.
    testString: assert($("h3") && $("h3").length > 0);
  - text: Your <code>h3</code> element should have a closing tag.
    testString: assert(code.match(/<\/h3>/g) && code.match(/<h3/g) && code.match(/<\/h3>/g).length === code.match(/<h3/g).length);
  - text: Your <code>h3</code> element should be colored by applying the class <code>text-primary</code>
    testString: assert($("h3").hasClass("text-primary"));
  - text: Your <code>h3</code> element should be centered by applying the class <code>text-center</code>
    testString: assert($("h3").hasClass("text-center"));
  - text: Your <code>h3</code> element should have the text <code>jQuery Playground</code>.
    testString: assert.isTrue((/jquery(\s)+playground/gi).test($("h3").text()));

Challenge Seed


Solution

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