Bootstrap 5.2 is my framework of choice for targeting github pages, and here is a snippet of 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>
I always include col-lg-3 col-md-6 for every left column, and col-lg-9 col-md-6 for every right column. Is there a way to streamline this process for the .left-column declaration without repetition?
Question: I want .left-column to utilize col-lg-3 and col-md-6, but I'm not sure how to achieve this ideally.
One potential solution could involve using @media queries to adjust the width based on min-width/max-width, but this approach:
- Involves duplicating Bootstrap's functionality
- Might lead to messy CSS code due to redundant or split
left-columndeclarations
This query is tied to: Can a CSS class inherit one or more other classes?. The suggested solution involves LESS, which is not a viable option for me. While older responses commonly state that it's impossible, a potential workaround is outlined here: , but it only works for pre-existing elements.