Help with Image

I am working on the first project assignment, “tribute”, I am very new to coding. I have an image and text below the image, I would like to put a “frame” around it apply a different background color then the main background color. This question may not be clear enough, please be gentle.



Hi there,

This sounds straightforward enough. Do you have your work on CodePen so you could share? It’s easier to talk about what to do when I can see what you’ve done.

Yes, my ID is jdkirk. Will that help you find my pin?

You will see the image and the text under it, I am trying to simulate the example project where the background is gray and the image is white and the text under it is in the white area, with the gray back ground showing on the left and right of the image.

You can just copy and paste the URL from your address bar into a forum post. No special formatting needed.

Do you know how to copy and paste (into your reply) your pen’s URL from the address bar?
Ex: " "

I think you want a border for the image. (You can put all that’s within your <style> tags into the CSS section, BTW.)
.larger-image { width: 750px; border: 4px solid red; }
More about borders:

Edit: Looked at example project. You’re referring to a Bootstrap jumbotron component.

P.S. I’m from WV, too.

Thanks for the help!!! I will give the suggestions a try. I am located in Charleston.

Checking to make sure you can access it.

Question about the . the tutorial has us place this at the top of the file, is it a limitation of the editor in the tutorial? With CodePen and with the editor that I use on my Mac, I should place this code in the CSS page, correct?

Adding Bootstrap, you mean?
Go to Settings, CSS, Quick-add, Bootstrap.
Good idea to know more about Bootstrap in general.

You can either place CSS in CSS section on CodePen or in style tags in HTML. If creating on your local machine, you can create a separate file for CSS in the same directory as your HTML document or put CSS between style tags in your HTML document.

As someone completely new to coding, I would personally recommend starting with YouTube fCC project tutorials, such as this one (not that it’s particularly good, but what matters is seeing someone else do what you want to do). Until you watch someone else use CodePen to build a project, it may be difficult to understand what it is and its features.
(CodePen is a comfortable, welcoming environment for many new developers, but when you have gained more skills in the future, you will not need to rely on it to build projects.)

1 Like

I used the jumbotron bootstrap and it works great. My next issue is the list i have, i can not get the list centered in the page. I don’t won’t the text centered, stay left with the bullet, but the entire list center in the page. Tried numerous solutions, no luck.

I think you want to put your list inside a div like this:
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

Worked perfect, I am going to post back with what i believe the line does if you don’t mind checking it. This way I understand, if you don’t mind confirming.