Nesting 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!

Well there are a number of reasons you could nest <div>s. Seeing the CSS and JavaScript for this specific code would probably be helpful to say for sure, but I can give you a couple examples.

Since <div> is not a semantic element it is usually used to group together several elements for styling or interactivity.

Take the <header> of the forums (community theme) for example, there are about three layers of <div> within it to get down to the basic elements such as the <img> that holds you profile picture. The purpose of these is to style each related “box” of elements differently, moving them into the exact right area that is desired. Such as the search Home and Catalog button.

Or take the boxes used to hold our posts. Using developer tools take a look at how many nested <div>s there are:

Each being used to either add interactivity, or to place each individual item in the exact right spot.

Ok thanks for clearing that up!

I am still confused how you would know how many divs to nest when you are starting to write out a website. It seems like something that is guess and check and changed over the course of making the website.

Also I got the code from this website: https://www.davidelee.net/#intro

I asked a similar question somewhere else and someone said it was a bootstrap site. Does boostrap write out the divs for you?

Thanks!

It really depends on your style of designing, some are able to plan their entire website out and know everything they will need in the beginning.

Some (I’m in this group) will get a basic idea about what they want and know about what they need. They can then start with the basic layout and slowly work everything (such as extra <div>s) into the code.

While others get an idea and just start writing code.

All of these can end up with a beautiful finished project, and these certainly don’t cover EVERYONE’S individual styles. Some say coding is an art, and as such styles vary with personality.


This would make sense. To my knowledge bootstrap as a set of pre-written CSS and JavaScript. So when you are writing out your HTML each class you give an element can link it to a portion of the bootstrap styling. Personally I don’t often use bootstrap, but that is only because I like making everything myself from scratch. If you need to get a website done in a hurry, it can work miracles.

No, but since it styles each element based on its class, you may need several <div>s to act as each object you want.

1 Like

Ok thanks for the information, I can tell you are very knowledgeable.

1 Like

Thank you for the compliment, though I am still a learner like you.

The best way to think about Bootstrap is as a collection of components, as well as pre-determined typeface styles.

Say you want a carousel to cycle through customer testimonials - there’s a component for that.

Want to incorporate a toast on your website - there’s a component for that.

Want a spinny loading indicator? Yup, there’s a component for that too.

Bootstrap have worked out the necessary CSS/JavaScript to make these things work, you just plug them in to your page.

There’s a lot more info on the components in the Bootstrap docs.

2 Likes