'Set bootstrap spacing for all nested items

Say I have this snipped of HTML code:

    <div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
        </div>

        <button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
        <button type="button" class="btn btn-warning">Clear</button>
    </div>

I would like any item inside the outer div have an horizontal margin of 3. The only way I know is to add me-3 to the class of each item (the button group and the two other buttons). But I have to remember to add this for any other item I'm going to add.

I tried to add this to the outer div, but of course it refers to the next sibling div (if any).

Is there a way to set this margin in the outer div, but to be applied to the nested elements?

htmlcsstwitter-bootstrap


Solution 1:[1]

JS Solution

Iterate over all of the outer div children, and setAttribute class `me-3` to each one: 

let outerDiv = document.querySelector(".btn-group")

for (let i = 0; i < outerDiv.childNodes.length; i++) {
      console.log(outerDiv.childNodes[i])
      if (i % 2 == 1) {
            outerDiv.childNodes[i].setAttribute("class", "me-3");
      } 
}
<div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
        </div>

        <button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
        <button type="button" class="btn btn-warning">Clear</button>
    </div>

CSS Solution

Similar to the JS solution, use `>` to iterate over all the children of `.btn-group`: 

.btn-group > button {
    margin-left: 3px;
    margin-right: 3px;
}
    <div>
        <div class="btn-group" role="group">
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-step-backward" title="Rewind" aria-hidden="true"></span></button>
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-play" title="Play" aria-hidden="true"></span></button>
            <button type="button" class="btn btn-secondary"><span class="oi oi-media-pause" title="Pause" aria-hidden="true"></span></button>
        </div>

        <button type="button" class="btn btn-danger"><span class="oi oi-media-record" title="Pause" aria-hidden="true"></span></button>
        <button type="button" class="btn btn-warning">Clear</button>
    </div>

I personally recommend the CSS solution as you can change the margin left and right to your liking.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rani Giterman

Related Questions