Create Bootstrap Wells. Still getting an error

1

Tell us what’s happening:

Your code so far

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    
      <div class="col-xs-6 well"></div>
     
   
    <div class="col-xs-6 well">
     
    </div>
  </div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/create-bootstrap-wells

2

You need to add another div within the .col-xs-6
It will look like
<div class="col-xs-6"> <div class="well"></div> </div>

1 Like
3

@mpsinghk has got it right. I want to elaborate further.

This is what you were supposed to do:

Nest one div element with the class well within each of your col-xs-6 div elements.

Nesting means to put one or more element(s) inside of another element. Like this

<div class="hello">
    <h1>Hello World!</h1>
    <p>Lorem ipsum dolor sit amet.</p>
</div>

In the above case, h1 and p are said to be nested inside of div with class hello.
h1 and p are also said to be children of the parent div.
This is a first-level nesting.

Nesting goes to many levels deep like this:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li { 
      display: inline-block; 

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
      }
    }
  }
}

The above is said to be a third-level nesting.
Below is the solution:

<div class="container-fluid">
  <h3 class="text-primary text-center">jQuery Playground</h3>
  <div class="row">
    <div class="col-xs-6">
      <div class="well"></div> <!-- First div with class="well"-->
    </div>
    <div class="col-xs-6">
      <div class="well"></div> <!-- Second div with class="well"-->
    </div>
  </div>
</div>
3 Likes