Bootstrap responsive class management

Question

I'm relatively new to Bootstrap, and really new to the grid system. I've recently started making a page responsive. While it seems pretty straightforward to make main/general sections responsive (adding few classes is sufficient), it seems troublesome to modify small sections that are affected by other sections.

For example, I have a div which contains some buttons. (This is in a page where an entity's info is edited.) Depending on the window width, sections shift, and these buttons are affected. So I need to give this "buttons" section the correct look. These are the classes that I apply:

<div class="col-12 mt-3 align-items-center col-sm mt-sm-0 pl-sm-3 align-items-sm-start col-md-12 mt-md-3 pl-md-0 align-items-md-center d-flex flex-column justify-content-center upload-buttons">
    
    <!-- buttons -->

</div>

This gives me just the right look, but isn't it complicated? Tracking what's happening in what break-points is hard. Doing this a couple times would give me headaches.

I've checked a few pages and videos, but didn't come across a (more?) practical way to manage these classes. Not knowing even if there's one, I decided to implement one using JavaScript, and ended up with the following html:

<div data-bs-responsive='{
        "xs" : {
            "col" : 12,
            "mt" : 3,
            "align-items" : "center"
        },
        "sm" : {
            "col" : "",
            "mt" : 0,
            "pl" : 3,
            "align-items" : "start"
        },
        "md" : {
            "col" : 12,
            "mt" : 3,
            "pl" : 0,
            "align-items" : "center"
        }
    }' class="d-flex flex-column justify-content-center upload-buttons">
    
    <!-- buttons -->

</div>

I scan the page on DOMContentLoaded and turn the data-bs-responsive into the appropriate classes. This gives me the same output/html. At least, now, I can easily track what's going on.

Is there a better way to deal with this? Or am I just making this more complicated than it needs to be? Even if that's the case, I don't think I'll leave this JS solution (at least for the time being). The current/manual way is way too painful.

---

Update related to my comment:

I've moved the solution I applied from JS to server-side (PHP). Instead of modifying the element via JS (using attribute data-bs-responsive and turning it into appropriate classes on DOMContentLoaded ), now I output the classes directly into the class attribute.

While this doesn't contribute anything to the initial problem, it solves the delayed visual changes.

<div class="<?= Bootstrap::classes([
        "xs" => [
            "col" => 12,
            "mt" => 3,
            "align-items" => "center",
        ],
        "sm" => [
            "col" => "",
            "mt" => 0,
            "pl" => 3,
            "align-items" => "start",
        ],
        "md" => [
            "col" => 12,
            "mt" => 3,
            "pl" => 0,
            "align-items" => "center",
        ],
    ]) ?> d-flex flex-column justify-content-center upload-buttons">

    <!-- buttons -->

</div>

Answer 1

The myriad of Bootstrap classes are great and can be helpful in a lot of situations, but using a dozen plus classes like this to style your elements is no better than using old fashioned inline styles IMO. Plus, doing things like this will often result in repeated code and won't follow the DRY principle (Don't Repeat Yourself).

I suggest applying as many styles as you can in a separate stylesheet, preferably a SCSS stylesheet that also allows you to use Bootstrap's variables and all the other great features built into Bootstrap's SCSS files. You can then leverage Bootstrap's media queries in your stylesheets as you go.

Now, that advice is specifically for classes concerning margin, padding, flex alignment, etc. Using the col classes for example that help you manage the grid should definitely be applied directly to the HTML. Ditch the JS/server-side approach.