How do I change lots of Bootstrap column widths at once via a variable (or something better)?

user_19590965 0
Viewed 26

I want to be able to change all the 3's quickly into whatever number I need. (I have separate CSS I haven't included here, but please let me know if I need to add it.)

<div class="container">
    <div class="col-md-12 hero imgProperties"></div>
    <div class="col-md-3 rock imgProperties"></div>
    <div class="col-md-3 pumpkin imgProperties"></div>
    <div class="col-md-3 soup imgProperties"></div>
    <div class="col-md-3 building imgProperties"></div>
    <div class="col-md-3 island imgProperties"></div>
    <div class="col-md-3 banana imgProperties"></div>
    <div class="col-md-3 beetle imgProperties"></div>
    <div class="col-md-3 chain imgProperties"></div>
    <div class="col-md-3 twigs imgProperties"></div>
    <div class="col-md-3 petals imgProperties"></div>
</div>

I've tried setting up a variable two different ways, locally and globally. (I suspect I should be making this local, not global, but please correct me if I'm wrong)

Locally -

--elementColumns: 3;

And globally -

    :root {
  --elementColumns: 6;
}

And in both cases, calling for it like this:

    <div class="col-md-(var(--elementColumns)) rock imgProperties"></div>

But none of that is working. It just makes that one element not show up on the page.

How do I do this correctly? Is there a better way to change lots of Bootstrap column widths at once? (If I can do this via CSS alone, I would prefer it, but JS solutions would be appreciated too.)

twitter-bootstrap-3 css
1 Answers

1.) You are missing the a wrapper with the row class. In bootstrap, columns need to be wrapped inside rows.

2.) You are mixing CSS and HTML here.

--elementColumns: 3; is a CSS variable definition. Once defined, either locally or globally, you may use this variable in other CSS slectors, or even in inline style attributes.

:root {
  --elementColumns: 3;
}

/* you can then change the number of columns on a breakpoint */
@media screen and (min-width: 720px) {
  :root {
    --elementColumns: 6;
  }
}

/* selector is repeated here to be more specific then bootstrap's original .row > * selector */
.col-var.col-var {
  flex: 0 0 auto;
  width: calc(100% / var(--elementColumns, 1));
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> 


<div class="container">
  <div class="row">
    <div class="col-md-12 hero imgProperties">Hero</div>
    <div class="col-var rock imgProperties">1</div>
    <div class="col-var pumpkin imgProperties">2</div>
    <div class="col-var soup imgProperties">3</div>
    <div class="col-var building imgProperties">4</div>
    <div class="col-var island imgProperties">5</div>
    <div class="col-var banana imgProperties">6</div>
    <div class="col-var beetle imgProperties">7</div>
    <div class="col-var chain imgProperties">8</div>
    <div class="col-var twigs imgProperties">9</div>
    <div class="col-var petals imgProperties">10</div>
  </div>
</div>

  • What are you trying to achieve with this variable?
  • Do you want to change it based on screen width?
    Usually this is what the col-md-* and col-lg-* classes are for
  • Are you looking for an easy way to update all columns if the design requirements change?
    Your IDE can do that with search and replace or bulk editing
user_24384940
Related