Help with lesson 60- Use the Bootstrap Grid to Put Elements Side By Side

1

help please.

I’ve looked at these 4 lines code, for 2 days and cannot find anything different from mine below and the “Get a Hint” example page.
I keep getting the last error message: X “Make sure each of your div elements has a closing tag.”

<div class="row">
  
<div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
  
<div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div> 
  
<div class="col-xs-4"><button class="btn btn-block btn-Danger">Delete</button></div>

My example code is not showing when I Save Edit this new topic?

2

Actually it’s not so complicated, just think about it. You have 3 buttons right? And you need to add them into one row. So make a div with class row. It will be your “line” and then make separate divs with col-xs-4 inside your row div. Because bootstrap has 12 col system, 4*3=12 so your button will be in one row on very small device screen, cause its “xs” extra small. If you have any more doubts tell me.

3

Thanks Zygis, this is what I have here, and I had to copy it from the “Get a Hint” screen. But I am still getting the last error “Make sure each of your div elements has a closing tag.”

03 AM
03 AM1276×384 46.1 KB

I really do not know whats missing here.

4

Hello, Can you create a codepen with your issue, tag me. I will help!

5

Hello @freedm55, I’m glad you figured out how to post to our help section on the forum and get your code on here!

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. The “preformatted text” tool in the editor (</>) will also add backticks around text. If you just paste code without backticks, the forum will attempt to change the way the forum post looks.

markdown_Forums

Also, when looking at your code that you provided, it appears that you are missing the bottom row closing tag. Here is what you have:

<div class="row">
  
<div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
  
<div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div> 
  
<div class="col-xs-4"><button class="btn btn-block btn-Danger">Delete</button></div>

It should be like this:

<div class="row">
  
<div class="col-xs-4"><button class="btn btn-block btn-primary">Like</button></div>
  
<div class="col-xs-4"><button class="btn btn-block btn-info">Info</button></div> 
  
<div class="col-xs-4"><button class="btn btn-block btn-Danger">Delete</button></div>

</div> <!-- the closing tag for .row -->

If you struggle with this, it is probably because you are not indenting your code.Here is an article that can clarify this, but you will want your code to look somewhat like this:

<div class="row">  

  <div class="col-xs-4">
    <button class="btn btn-block btn-primary">Like</button>
  </div>  

  <div class="col-xs-4">
    <button class="btn btn-block btn-info">Info</button>
  </div> 

  <div class="col-xs-4">
    <button class="btn btn-block btn-Danger">Delete</button>
  </div>

</div><!-- .row -->

Indenting and formatting code properly like this will help you spot issue like failing to nest these tags.

6

Thank you for responding. I’m sorry, I do not know what a codepen is, or how to tag you?
I’ve been on this site for only 5 days and that is the extent of my coding knowledge.:sweat_smile:

7

Thank you Issac, but if you look at my other reply, I added a screenshot that apparently passed the lesson 60 but the code is completely different than what you provided? I’m a little confused why the lesson accepted the code with a passing grade but the buttons are not in a column.

44 AM
44 AM2880×1800 904 KB

8

image
image1366×768 299 KB
I appreciate your help, it work.