Within Bootstrap 5.2, the grid system's breakpoints are determined by the width of the screen through @media. While this approach works well for most cases, it becomes challenging when dealing with nested grids.
In my current project, I am utilizing reusable components to construct HTML elements. However, when these components are employed for creating nested fields, the result is not always as intended. For instance, consider a component called TextInput, which generates markup like this:
<div class="row mb-3">
<label for="Example1" class="col-form-label col-lg-2 col-xl-3 text-lg-end">Example1</label>
<div class="col-lg-10 col-xl-9">
<input type="email" class="form-control" id="Example1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c9c6cac2e7c2dfc6cad7cbc289c4c8ca">[email protected]</a>">
</div>
</div>
The issue arises when TextInput is invoked from another component that creates nesting situations.
For instance, here's an attempt to adjust label position based on container size rather than screen size. The goal is to have labels aligned differently depending on screen width.
Upon examining the nested container below with a "red" background, you'll notice its narrower width compared to the main "blue" container, due to being nested within it.
While I could manually apply logic inside each component to alter Bootstrap classes, doing so would involve extensive code modifications and considerations. Hence, I'm seeking a CSS/JS solution to address this challenge more efficiently.
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12707d7d66616660736252273c203c23">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8eece1e1fafdfafceffecebba0bca0bf">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<div class="container-fluid bg-info pb-3">
<form>
<div class="row mb-3">
<label for="Example1" class="col-form-label col-lg-2 col-xl-3 text-lg-end">Example1</label>
<div class="col-lg-10 col-xl-9">
<input type="email" class="form-control" id="Example1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="127c737f7752776a737f627e773c717d7f">[email protected]</a>">
<div class="container-fluid bg-danger pb-3 nested-fields-container">
<div class="row mb-3">
<label for="Nested1" class="col-form-label col-lg-2 col-xl-3 text-lg-end">Nested1</label>
<div class="col-lg-10 col-xl-9">
<input type="email" class="form-control" id="Nested1" placeholder="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="315f505c54715449505c415d541f525e5c">[email protected]</a>">
</div>
</div>
</div>
</div>
</div>
</form>
</div>Question
Is there a method to modify the grid system such that it adjusts breakpoints based on the parent container-fluid width instead of relying solely on screen size via @media? Or if not achievable within the grid system, can this be accomplished using Flex system?