Please Help Me: Create a Bootstrap Headline

Please Help Me: Create a Bootstrap Headline
0

#1

Continuing the discussion from freeCodeCamp Challenge Guide: Create a Bootstrap Headline:

I’m having trouble ensuring that my blue, primary text is called correctly as a class. Although I’ve attempted nesting the classes together after defining them in the style portion, either my "text-primary or my “text-center” seems to override the other. Even though I passed the earlier challenge, the solution to this one eludes me. A couple of things:

Do we need to include the link for bootstrap at the beginning or is it built-in behind?
Should we wrap the entirety in a container-fluid division?
Perhaps my problem is simply forgetting the appropriate nomenclature for CSS style definitions.

My code below (typed from Notepad since copying from the page didn’t work). It seems to be working in Safari to display some of what I mean…Not sure how to copy/paste such that it will display the actual code.

<link rel=“stylesheet”
href=“//maxcdn.bootstrapcdn.com/bootstrap/3/3/1/css/bootstrap.min.css”/>
<div class=“fluid-container”>
<style>
	.text-primary {
		color:blue;
	}
</style>
<h3 class=“text primary text-center”>jQuery Playground</h3>
</div>


#2

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard.

Now let me see if I can answer your questions:

Do we need to include the link for bootstrap at the beginning or is it built-in behind?

No, for this particular challenge, bootstrap is included “behind-the-scenes”

Should we wrap the entirety in a container-fluid division?

No this is not necessary.

As you have already figured out, something like what I have below will pass the challenge.

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

If I were to add the following code before the <h3…, the text-primary class in bootstrap would be overwritten and the color of the text would be blue.

<style>
  .text-primary {
    color:blue;
  }
</style>

#3

Thanks very much! It may sound like a cop-out, but this was stumping me for more than 3 hours. Incidentally, I typed exactly what you provided as an example, prior to your assistance (from the main help page), and it didn’t work.

At any rate, thank you for your assistance. I also very much appreciate the repeating, animated example of the back-tick marks and the link. Saved!

:slight_smile: Thanks rmdawson71


#4

In your earlier post you had the above in your code. This would not have worked because of the space between text and primary. There should have been a “-” between them. I am not sure if this is what you meant by you typed it in earlier or if this was just a typo when you were typing up your post.

Either way, I am glad you figured it all out!