Bootstrap's nested grid system allows for intricate and dynamic layouts within

I am looking to design a grid with two columns, where on small and larger screens the width of the right column adjusts itself to accommodate its content, while the left column takes up the remaining space. On extra small screens, the layout changes to two rows.

<div className='row' >
        <div className='col text-light bg-success'>
          large left column
        </div>

        <div className='col-sm-auto' >
          right column
        </div >
</div >

On screens equal or larger than small (sm), it appears as shown in the image:

https://i.sstatic.net/pI7Ax.png

On extra small (xs) screens, it looks like this:

https://i.sstatic.net/C0ing.png

This is the desired layout, but if there is another row within the right column containing two subcolumns:

<div className='row' >

        <div className='col text-light bg-success'>
          large left column
        </div>

        <div className='col-sm-auto' >
          <div className='row row-cols-sm-1' >
            <div className='col text-light bg-secondary'>subcolumn</div>
            <div className='col text-light bg-primary '>subcolumn</div>
          </div>
        </div >

      </div >

https://i.sstatic.net/H0Bui.png

The width of the right column now seems too wide to fit both subcolumns side by side. How can I make the right column adjust its width based on the widest subcolumn?

Answer №1

Forget about using nested grid layouts to achieve that effect. Just implement the flex-grow-1 utility class.

Take a look at the code snippet below.

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="75171a1a01060107140535405b475b46">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="22404d4d56515650435262170c100c11">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

<div class='row d-flex'>

  <div class='col-sm-auto text-light bg-success flex-grow-1'>
    large left column
  </div>

  <div class='col-sm-auto ps-sm-0'>
    <div class='text-light bg-secondary'>subcolumn</div>
    <div class='text-light bg-primary'>subcolumn subcolumn subcolumn subcolumn</div>
  </div>

</div>

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

The HTML output is essential for creating the content of a Bootstrap carousel

Is there a way to populate my bootstrap carousel with the content of an HTML page instead of images? I attempted to create a div and use CSS to load the contents from ac1_div using content:url(carousel_content.html), but it was unsuccessful. <!-- our ...

Utilizing Tailwind CSS for creating a responsive layout on a Next.js application

I'm just getting started with Tailwind CSS and I decided to build the user interface of my nextjs application using a "mobile first" approach like everyone suggests. I got the flex direction and background color working perfectly on mobile screens, so ...

Does anyone else have a peculiar problem with css width?

Either I have been designing web pages for an extensive period of time without taking a break or something truly bizarre occurred. <div style="background-color:#0F0; margin:5px; height:5px;"></div> This will generate a lengthy bar with a 5-pi ...

site with scrolling options in various directions

Someone recently asked me if I could create a multi-directional scrolling website similar to the one found at COS, but using WordPress. At first, I assumed it might be done with Flash, but the source code suggests it could actually be more simple, possibly ...

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

Show JSON data as choices in a dropdown menu

On my webpage, I want to display a dropdown list populated with objects from a JSON file using JavaScript. Here is the structure of my HTML and JSON: HTML <html> <body> <select id="myid">MyList</select> <script src="m ...

Creating links to external websites in PHP files

I'm currently developing a new website with PHP, and I’m facing an issue where all the URL links are directing users to 'localhost' instead of the correct IP address. This is causing a problem as they should be directed to the IP, not &apo ...

Do Bootstrap 3 and Bootstrap 4 - alpha versions maintain backward compatibility with each other at present?

Is backward compatibility maintained between Bootstrap 3 and the alpha version of Bootstrap 4? I am attempting to replace Bootstrap 3 with the new alpha version, but I am experiencing broken styles. Is this a common issue or am I missing something in my a ...

Retrieve the site's title content using PHP

I created a code to scrape website content from platforms like Facebook and Google+. $html = file_get_contents_curl($url); if ($html) { //parsing begins here: $doc = new DOMDocument(); @$doc->loadHTML($html); $nodes = $doc ...

Enabling or disabling select input based on the selected option in a previous select dropdown

My goal here is to customize a select input with 3 options: Sale, Rent, Wanted. Based on the selection, I want to display one of three other select inputs. For example, if "Sale" is chosen, show the property sale input and hide the others. However, when su ...

What could be causing the data-price values of my alternative select options to not add up correctly when running this function?

ISSUE I am facing a challenge in calculating the total values of select inputs based on the radio button selected initially. Each radio button corresponds to different select inputs with their own data-price values. Once a radio button is chosen, the div ...

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

I recently implemented unslider to create a slideshow that spans 100% of the width on my website. Everything seemed to be working fine until I tried resizing the screen, and the slides remained the same size as they were initially loaded. Here is the code ...

Issue with jQuery dropdown navigation bar

I am interested in creating a drop-down menu using jquery (here's the corresponding jsFiddle). HTML: <ul id="mainmenu"> <li><a href="http://myszki/">Aktualności</a></li> <li class="parent item13"><a href=" ...

Images on NextJS are failing to resize properly in Next 13

I have been facing challenges with optimizing image sizes for different screen resolutions using the NextJS Image component. Currently, all images seem to be loading at their largest size on various screens. Below is a screenshot showing the resolution t ...

The input field within the mat-form has been styled to match the background of the page using CSS

I am currently facing an issue with the code below: Html: <form fxLayout="column" fxLayoutAlign="center center" [formGroup]="deleteForm" (ngSubmit)="onSubmitForm()"> <mat-form-field color="accent" appearance="outline"> <input ...

Issue with JavaScript HTML Section Changer not functioning properly

I need to implement a button that switches between two pages when pressed. Although the code seems simple, I am struggling to make it work. HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"& ...

Having trouble getting the align-items-end property in Bootstrap 4 to function

After dedicating almost two full weeks to this project, I'm still struggling to achieve the desired outcome. I suspect that the issue may lie in the depth of the rows and columns I'm working with, but I'm open to any external perspectives or ...

The code functions correctly on JSfiddle, however it is not executing properly on my website

When I tried to implement the code from this jsfiddle link: http://jsfiddle.net/mppcb/1/ on my website (), it didn't work as expected: Here is the HTML code snippet: <form id="myform" novalidate="novalidate"> <input type="text" name="fi ...

Are HTML attribute names really case-sensitive? A topic filled with conflicting information

After learning that attribute names are case-sensitive, I found conflicting information. A source mentioned that attribute names are indeed case-sensitive. For example, the width attributes in <div> and <DIV> would be considered separate due ...

Changing my PHP contact form from method GET to POST is causing it to malfunction

Feel free to check out my contact form on benlevywebdesign.com, located at the bottom of the page. <form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="text/plain" method="get"> <fieldset> ...