Use same col-md-* and col-lg-* for all instances of the class

Question

I'm using Bootstrap 5.2, I target github pages, and this is my code:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web project</title>
    <link rel="stylesheet" href="bootstrap.min.css">
    <style>
        .left-column {
            background-color: red;
            /* Other things */
        }
        .right-column {
            background-color: lightblue;
            /* Other things */
        }
    </style>
</head>

<body>
<script src="bootstrap.min.js"></script>
<div class="container-fluid">
    <div class="row">
        <div class="left-column col-lg-3 col-md-6">AAA</div>
        <div class="right-column col-lg-9 col-md-6">BBB</div>
    </div>
    <div class="row">
        <div class="left-column col-lg-3 col-md-6">CCC</div>
        <div class="right-column col-lg-9 col-md-6">DDD</div>
    </div>
</div>
</body>
</html>

For every left column, I also specify col-lg-3 col-md-6, and for every right column, I also specify col-lg-9 col-md-6.

Question: Since every left-column also uses col-lg-3 col-md-6, is there a way to avoid specifying them every time? Ideally, I want my declaration of .left-column use col-lg-3 and col-md-6, but I don't see how.

Of course, I can do this by using @media, and specifying width depending on min-width/max-width, but this way:

I'll reinvent the wheel by duplicating the work done by the bootstrap
The CSS will become more ugly since I'll have to either duplicate or split the declaration of left-column

This question is related to: Can a CSS class inherit one or more other classes?. The accepted answer uses LESS, which I can't use. Other answers are mostly along the lines "you can't", but they are extremely old. The closest approach seems to be https://stackoverflow.com/a/19552985/15072863, but it only applies to already existing elements.

score 1 · Accepted Answer · answered Sep 21 '22 at 19:30

Bootstrap 5 uses scss and you should use that see here how https://stackoverflow.com/a/73709723/3807365 for example:

// File: my-bootstrap-and-styles.scss

// your overrides
$primary : #FEBC35;

// include bootstrap.scss
@import "../node_modules/bootstrap/scss/bootstrap";   

// Then add your additional custom code here
.my-primary-div {
  background: $primary;
  border: 1px solid black;
}

// also don't forget to take advantage
// of bootstrap's variables and mixins
@include media-breakpoint-down(md) {
    .my-class {
        overflow-y: auto;
    }
}

afterwards it's just a matter of:

.left-column {
    background-color: red;
    @extend .col-lg-3;
    @extend .col-md-6;
    /* Other things */
}

I'm using github pages. Do I understand correctly that I'll have to re-compile it (and commit the compiled CSS) every time I make changes? — Dmitry, Sep 21 '22 at 19:45
you of course should be using an editor or other tools that will automatically compile the scss into css whenever you make a change — IT goldman, Sep 21 '22 at 19:57

Use same col-md-* and col-lg-* for all instances of the class

1 Answers1