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 >
<div >
<div >AAA</div>
<div >BBB</div>
</div>
<div >
<div >CCC</div>
<div >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.
CodePudding user response:
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 */
}