Why to nest divs?

Why in this code that I am trying to model after:

<section id="about" class="section section-about section-about-1 pp-scrollable">
    <div class="full-screen">
        <div class="display-center">
            <div class="section-title-1">
                <div class="container about-me-text-container">

Is there so many nested divs? What is the point of nesting so many divs?

Thanks!

It’s hard to say without knowing more. IME, something like that is usually the result of a page-builder or design framework like Bootstrap. Having lots of nested divs facilitates control over their contents, usually for the purposes of aligning or centering them. Since page-builders are programs and not humans who have skill and judgment, the result is often endless nested divs.

1 Like

Ok this is the site I got the code from

Do you think a page builder is used?

Thanks!

Yep, that’s a Bootstrap site. You can tell by inspecting it in the console, looking in the head, and you’ll see the files being loaded.

I made my own site in Bootstrap because it just centers and aligns everything automatically. Check it out.

Mr. Lee’s site is 100X better though, so I really need to up my game. It is very nice!

By the way, here’s the Bootstrap docs. You can probably do it without any tutorials.

2 Likes

Ok I see, so did Mr. Lee write out the individual divs or does bootstrap do it for you? I need to look into it…

It’s a pretty cool system. You have to write out the divs just like if you’re doing it from scratch, but it comes with lots of pre-defined classes that control the appearance and behavior. Once you have an idea of how the classes are set up, it’s like using Legos or building blocks. Also, you can cut and paste from the samples to get started.

You can also customize and modify Bootstrap, but it’s more involved and I actually don’t know how to do that yet!

Oh ok, how do you know how many divs to write out? Does that happen overtime as you write the website or do you just know from the beginning?

From what I know about bootstrap its where you use “col-xs-3” I dont see that in the code I posted here

Ill try to use bootstrap in my website now.

Often it’s for organization and to apply styling to a group of things. I think it will make some more sense, the more you do it.

But there are times where it is gratuitous. For example, in React PR reviews, I often see things like:

<div>
  <div>
    <div>
      <thing />
    </div>
  </div>
</div>

In this case, almost always it is unnecessary. Sometimes it is obscured by nesting components. If possible, I usually advocate letting thing handle it.

But there are cases where that won’t work. And if there are multiple things being nested in each group, a good div structure can be crucial. It’s good to think about, but yes, it can be important.

1 Like

If you go to the docs, they give you some example pages. If you inspect them and look at the source, that will give you an idea of how they use those classes. You can cut and paste them for now and change/delete/add as you see fit, to get started.

I might be off base here but I’ve been told that a good way of thinking about it is that parent divs control the positioning of child elements while the child elements control how they themselves look. This many divs could be providing the author more granular control over the positioning of stuff.

1 Like

Thanks, thats a smart way to think of it!