I have a huge problem when it comes to bootsrap and nesting div elements

1

jQuery Playground

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

  </div>
</div>
This is the Correct code for the challenge "create bootstrap wells" I finally got it correct but by brute force. I don' understand the concept very well please someone explain!
2

jQuery Playground

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

(Sorry for some reason it cut off half the code)

  </div>
</div>
3

So, yes that is the correct code for the challenge, well done :slight_smile:

Think of the divs as picture frames, so they can be used to frame and format what you see on the page.

Bootstrap works on a 12 box grid system.

So the <div class="col-xs-6"> will take up half of the available space and the next div down <div class="well"> adds pre-formatted bootstrap styles to this space.

I hope that helps.

4

Much of Bootstrap is just predefined CSS classes. The well class is just a css class that has rounded corners, a certain color background and a certain amount of padding.

The col-xs-6 class is a little more complicated, but is still basically CSS with some media queries and a little js behind the scenes.

Bootstrap has a grid system that is 12 columns wide.

The col-xs-6 class says:“if the screen size is extra-small (less than 768 px), then this div should take 6 of the 12 columns in the grid” .

Because col-xs-6 is the only class given to the div, then the div will be 6 columns wide regardless of the screen size.

The bootstrap website has details: http://getbootstrap.com/css/#grid

If you google “bootstrap grid explained”, you will also find links such as this http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works/.

Searching for Videos on Bootstrap 3 grids may also provide useful resources.

5

Thanks you. I will study this until I understand it.