Create Bootstrap Wells - div element

HTML-CSS
1

Hey guys,

I just started my freecodecamp curriculum and I just had a quick question that I can’t seem to find the answer to. On this task it states to nest a div element with the class well within the col-xs-6 div elements, I figured one route would be to plug in the class well into the existing col-xs-6 div elements rather than making brand new div elements and nesting the other ones within it. After clicking the hint button I saw the correct code but I was wondering why it would want me to nest new div elements with the class well when I feel like you can just plug in the class inside the div elements already laid out. I’m definitely missing something. Any help would be greatly appreciated!

Your code so far

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

    </div>
    <div class="well col-xs-6">

    </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/65.0.3325.181 Safari/537.36.

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

2

Div is short for division, meaning that the <div> tag is used to divide elements, sections, etc. from each other. So each <div> is its own separate entity and can’t be combined with something that would be in another div.

A Bootstrap layout is all about nesting elements, so you really have to work based on that simple premise. Working from the outside in, you have a container, and within that you have one or more rows and within the rows you have one or more columns and within the columns you have your design elements like wells and text and images, etc.

A column is a column and a well is a well and a well would be nested inside a column. A “well column” isn’t a thing, so Bootstrap has no idea what you’re talking about when you tell it to create a “well col-xs-6”.

The technical answer is more complex because it has to do with CSS classes, but the above should help you wrap your head around it.

1 Like