Is it possible for the bootstrap grid system to utilize the width of the parent element "container-fluid" as its media query?

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?

Answer №2

Perhaps this solution may not perfectly align with your criteria, but it could offer some assistance. By utilizing CSS grid, you can adjust column widths without relying on breakpoints. Targeting parent elements in CSS is a challenge and there isn't a universally supported method for achieving it.

<!DOCTYPE html>
<html lang="en">
<head>
<style type="text/css">
* {
  box-sizing: border-box;
}
body {
  margin: 0 auto;
  width: 100%;
  height: 100%;
}
/* Sample 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/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Separate the label and content sections in an Angular Material vertical stepper

https://i.sstatic.net/S1gIH.jpg After applying the following CSS: mat-step-header{ display: flex ; justify-content: flex-end ; } I am attempting to make this stepper function properly. I have implemented Angular Material design for a vertical stepp ...

Tips for effectively utilizing an if/else structure to animate fresh content from the right while smoothly removing old content by sliding it to the left

document.getElementById("button1").addEventListener("click", mouseOver1); function mouseOver1(){ document.getElementById("button1").style.color = "red"; } document.getElementById("button2").addEventListener("click", mouseOver); function mous ...

What is the best way to prevent certain bootstrap classes from being applied across all elements?

After testing my HTML and CSS code on my local computer, it looks perfect. However, when I upload it to a server, the appearance changes. You can see it in action here: . The issue seems to be related to some bootstrap classes being activated differently ...

Why is Chrome ignoring the flexbox CSS in the footer section of my website?

My footer flexbox CSS is working on various browsers and devices, but for some reason, Chrome on my iMac is not responding correctly. The website is www.batistaelectric.com. It works on my iPhone Chrome browser, Safari iPhone browser, iMac Safari browser, ...

How can I adjust height without affecting weight in CSS using curly brackets?

Can CSS be used to specifically adjust the height of a curly bracket without changing its thickness? I have been attempting to modify the height of a curly bracket dynamically by adjusting the font-size, but this also alters the weight. Is there a workar ...

Creating consistent height for elements in different columns using Bootstrap 5

I'm struggling with keeping the ".item" elements equal height in different columns. Does anyone have a solution for this? <div class="container"> <div class="row"> <div class="col-8"> <h3& ...

Create a centrally located search bar in the header with a stylish button using Bootstrap 5

Struggling with aligning elements on my simple search page. The goal is to center the company name above the search input and have buttons centered under it with some spacing in between. https://i.stack.imgur.com/FdadF.png <div class="backgroundWh ...

Enhance your navigation bar with hover styles in React Router Dom v6

I'm having an issue with my navbar where the active styles are overriding the hover state. I want to maintain my hover state styles even on the active nav link. How can I achieve this? Here is what's currently happening: Active nav styles (look ...

Achieve hidden and visible elements using CSS without redundancy

Is there a way to hide a div on specific devices and show it on others without resorting to duplicating the code or using CSS hacks? This is my current approach: <div class="container"> <div class="row"> <div class="col-md-8 d-none d- ...

Angular 2: Triggering the "open" event for a Bootstrap dropdown

I am currently in the process of developing a directive that will trigger a Bootstrap dropdown to open when clicked and close it when the mouse leaves. Below is the code for the dropdown directive: import {Directive, HostBinding, HostListener} from ' ...

Assessing the performance of YUi and BackBone

As I embark on a new project, one of the crucial decisions to make is regarding the architecture. Currently, I am contemplating the selection of front-end components. I plan to utilize HTML5, CSS3, and Javascript for this purpose. When it comes to choos ...

Having trouble with Django's submit POST method for creating objects

Latest Updates: I have successfully implemented a feature where the page does not reload upon clicking the submit button. To achieve this, I filled out the form and inspected the page source code. The form structure was as follows: https://i.sstatic.net/ ...

Click here for a hyperlink with an underline that is the same width

As we work on our website, we want a unique feature where links are underlined when hovered over, with the underline staying the same width regardless of the length of the link text. How can we achieve this using CSS/jQuery/Javascript? ...

How can I code a div to automatically scroll to the top of the page?

I'm attempting to implement something similar in WordPress - I want a div containing an advertisement to initially start 300px down the page, then scroll up with the page until it reaches the top, and finally stay there if the user continues to scroll ...

Customizing Carousel Caption Positions in Bootstrap 5

Is it possible to center the captions in a Bootstrap 5 carousel without using CSS like in older versions? I've tried adding classes like align-middle to the div containing carousel-item or carousel-caption but it hasn't worked. Do I still need to ...

Ways to implement the CSS on images with an ID such as img120 within a div that has a class of 'open'

<div class='cluster' id='12' 'style='width:350px;min-height:150px;border:4px solid #339966;'> <div class='image' style='width:150px;height:150px;border:2px solid black;float:left;margin-bottom: ...

Altering the placement of a single element from floating to fixed positioning in CSS

Currently in the process of designing a basic website, I am looking to modify the behavior of the navigation bar on the left-hand side. I want it to remain fixed in its position so that users can scroll through the page without losing sight of it. My main ...

Trouble with jQuery: Background color fade in/fade out effects not functioning

Issue with changing background color during FadeIn and FadeOut effect. Whenever I click on the "whatup" link, my button should blink with alternating red and white colors. Below is the HTML code: <a id="blkwhatsup" href="#" >whatup</a> <in ...

What is the best approach to increase the height of a div element dynamically

I've encountered an issue with a div tag containing an image that may exceed the screen size. When this happens, I want to increase the height of the div tag and have a footer displayed below it. Currently, my styling for the div tag looks like this: ...

The size of the panel header does not seem to be adjusting as expected within the React

I need help adjusting the header size in a React-Bootstrap Panel within a Typescript application. I've tried wrapping the text in <h1> tags as specified in the documentation, but there seems to be no change. Even with attempts to add inline sty ...