Can bootstrap grid system use the width of the parent "container-fluid" as its media with?-CodePudding

In bootstrap 5.2, the breakpoints of the grid system is the width of the screen @media. This works great for the most parts. But when nesting grids it becomes tricky to deal with.

In my project, I am using reusable components to generate the HTML. When these components are used to create a nested fields, the outcome isn't as desired. For example, I have a component names TextInput, this component will generate something like this

<div >
  <label for="Example1" >Example1</label>
  <div >
    <input type="email"  id="Example1" placeholder="[email protected]">
  </div>
</div>

My TextInput component could be called from another component which generated nesting.

Here is an example of nesting, I am trying to change the position of the labels based on the size of the container "not the screen". When the screen is large, we place the label on the same row as the input. When the screen is less than large, the label appears above the input making it responsive while utilizing the with of the screen more efficiently.

If you look at the nested container "red color below", you'll see that its width is much smaller that the main container "blue color below" since it's nested inside of it.

I can add logic inside of each component I have and manually change the bootstrap classes. But this would require lots of code changes and lots of conditions to consider. I am hoping for a solution using css/js that I can use.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6 fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
<div >
  <form>
    <div >
      <label for="Example1" >Example1</label>
      <div >
        <input type="email"  id="Example1" placeholder="[email protected]">

        <div >

          <div >
            <label for="Nested1" >Nested1</label>
            <div >
              <input type="email"  id="Nested1" placeholder="[email protected]">
            </div>
          </div>
        </div>

      </div>
    </div>

  </form>
</div>

Question Is there a way to change the grid system to use the width of the parent container-fluid as its breakpoints instead of using the @media (size of the screen) to define the breakpoints for all of the nested grids?

If this is something that isn't possible in the grid system, is there a way to do it using Flex system,

CodePudding user response：

Probably not. I think there are some proposals for CSS Container Queries (not widely supported) and some libraries that allow container wise media queries.

Here's a polyfill for Container Queries! https://www.npmjs.com/package/container-query-polyfill and a demo

CodePudding user response：

Not sure if this fits your requirements exactly, but hopefully it might help you. You can use CSS grid to change column widths without breakpoints. I don't know of a fully supported way to target parent elements in CSS (probably for good reason).

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
/* Example responsive grid layout */
.c-1 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 200px;
  margin: 0 auto;
  overflow: hidden;
  width: 100%;
}
.c-2 {
  background-color: #ddd;
  padding: 1em;
  margin: 0 auto;
  border: 1px solid red;
  width: 100%;
  grid-column: 1/3;
}
.c-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  margin: 0 auto;
  border: 1px solid green;
  width: 100%;
}
.c-4 {
  padding: 1em;
}
.c-4:first-child > .c-4 {
  border: 1px solid blue;
}
.c-4 input, .c-4 label {
  width: 90%;
}
</style>
</head>
<body>
  <div class=c-1>
    <div class=c-2>
      Grid Column 1/3
      <div class=c-3>
        <div class=c-4>
          <label>Label 1</label>
          <input type=text size=10>
          <div class=c-4>
            <label>Label 2</label>
            <input type=text size=10>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Fiddle Demo: https://jsfiddle.net/pz2gsd58/

CSS Grid: https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/