Issues with Bootstrap container causing overflow and lack of responsiveness (resulting in consistent display of two columns)

Question

Issues with Bootstrap container causing overflow and lack of responsiveness (resulting in consistent display of two columns)

I'm facing an issue with a form layout I created that has two columns. Even when the browser width is decreased and the content overflows, the two columns remain the same. I've attempted modifying the code by using plain DIV with the container class, specifying column count, setting width constraints but it's not working as expected.

You can view the codepen here: https://codesandbox.io/s/stoic-goldberg-4ugt6

Below is the source code of the parent container:

<div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5">
  <div class="row">
    <div class="col">
      <b-card>
        <SeriesForm />
      </b-card>
    </div>
    <div class="col">
      <b-card :header="captions[1]">
        <SeriesForm :group="forms[1]" />
      </b-card>
    </div>
  </div>
  <div class="row">
    <div class="col text-center p-4">
      <b-button>Analyse</b-button>
    </div>
  </div>
</div>

I am looking for a solution to make it display as two columns when there is enough space available, and switch to a single column layout when needed.

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

css bootstrap-4 bootstrap-vue

Answer 1

Answer №1

To customize your layout, experiment with classes such as col-sm-6, col-xs-6, col-md-6, or col-lg-6 based on your requirements.

<div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5">
  <div class="row">
    <div class="col-sm-6">
      <b-card>
        <SeriesForm />
      </b-card>
    </div>
    <div class="col-sm-6">
      <b-card :header="captions[1]">
        <SeriesForm :group="forms[1]" />
      </b-card>
    </div>
  </div>
  <div class="row">
    <div class="col text-center p-4">
      <b-button>Analyse</b-button>
    </div>
  </div>
</div>

Answer 2

To customize your layout, experiment with classes such as col-sm-6, col-xs-6, col-md-6, or col-lg-6 based on your requirements.

<div class="container flex-wrap pt-3 w-75 ml-auto mr-auto mt-auto mb-5">
  <div class="row">
    <div class="col-sm-6">
      <b-card>
        <SeriesForm />
      </b-card>
    </div>
    <div class="col-sm-6">
      <b-card :header="captions[1]">
        <SeriesForm :group="forms[1]" />
      </b-card>
    </div>
  </div>
  <div class="row">
    <div class="col text-center p-4">
      <b-button>Analyse</b-button>
    </div>
  </div>
</div>

Answer 3

Answer №2

The problem does not lie with the bootstrap grid itself; rather, it is related to how your checkboxes are being presented.

By specifying in the .align-nicely class that your checkbox group should always be 3 columns wide, you are limiting its flexibility. The display: grid property follows these instructions strictly, resulting in content overflow.

To address or enhance this issue, consider adjusting how the grid columns are managed using CSS.

One approach could involve utilizing CSS @media queries to determine the number of columns based on screen width, allowing for responsive scaling as the screen size changes.

The following CSS snippet should prove effective when used in conjunction with <b-col xl='6'> alongside your existing text:

.align-nicely {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 1350px) {
  .align-nicely {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 576px) {
  .align-nicely {
    grid-template-columns: 1fr;
  }
}

Alternatively, you can explore using the repeat() function in combination with minmax(). While this method offers greater dynamism than the previous one, it may impact alignment consistency across different groups.

.align-nicely {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  /* 
    The 110px value inside minmax(), determines the minimum column size.
    If a column cannot fit within the available space on the current row,
    exceeding 110px, it will move to a new row. Adjust as needed based on content size.
  */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

Answer 4

The problem does not lie with the bootstrap grid itself; rather, it is related to how your checkboxes are being presented.

By specifying in the .align-nicely class that your checkbox group should always be 3 columns wide, you are limiting its flexibility. The display: grid property follows these instructions strictly, resulting in content overflow.

To address or enhance this issue, consider adjusting how the grid columns are managed using CSS.

One approach could involve utilizing CSS @media queries to determine the number of columns based on screen width, allowing for responsive scaling as the screen size changes.

The following CSS snippet should prove effective when used in conjunction with <b-col xl='6'> alongside your existing text:

.align-nicely {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
}

@media screen and (max-width: 1350px) {
  .align-nicely {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (max-width: 576px) {
  .align-nicely {
    grid-template-columns: 1fr;
  }
}

Alternatively, you can explore using the repeat() function in combination with minmax(). While this method offers greater dynamism than the previous one, it may impact alignment consistency across different groups.

.align-nicely {
  display: grid;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  /* 
    The 110px value inside minmax(), determines the minimum column size.
    If a column cannot fit within the available space on the current row,
    exceeding 110px, it will move to a new row. Adjust as needed based on content size.
  */
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

Answer 5

Answer №3

The issue arises due to the flex display,

To resolve this, ensure that the columns are set below your row for each form:

Replace <div class='col'> with

<div class='col-12 col-xl-6'>

. The spacing may be a bit tight, so consider adjusting margins and paddings accordingly.

By making this change, each form will occupy the entire width on larger screens and 50% width on extra-large screens.

Answer 6

The issue arises due to the flex display,

To resolve this, ensure that the columns are set below your row for each form:

Replace <div class='col'> with

<div class='col-12 col-xl-6'>

. The spacing may be a bit tight, so consider adjusting margins and paddings accordingly.

By making this change, each form will occupy the entire width on larger screens and 50% width on extra-large screens.

Answer 7

Answer №4

I have included a new attribute in your https://i.sstatic.net/GVJFR.png

By enlarging the screen, you will see the original layout.

Answer 8

I have included a new attribute in your https://i.sstatic.net/GVJFR.png

By enlarging the screen, you will see the original layout.

Issues with Bootstrap container causing overflow and lack of responsiveness (resulting in consistent display of two columns)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How to create space between elements in CSS without using margin or padding?

When using AngularJS ng-controller, the HTML href does not effectively call any div elements

Chrome does not support CSS animation rotation over 360 degrees

Guide for changing the background color exclusively in the final row of a dynamically-generated HTML table with PHP

Determining if an object is visible on the screen (with no reliance on scrollbars)

I am looking to dynamically assign CSS classes to elements in my HTML document. Additionally, my project utilizes Angular 5 and Bootstrap version 3.3.7

Create a sleek transition for your Bootstrap 4 fixed Navbar by having it smoothly slide down and change to a

The maskSize animation from Framer Motion is not functioning properly on mobile devices

The behavior of the jQuery slick slider is acting oddly

What is the best way to ensure that my header remains responsive across all devices and screen sizes?

Transforming hover interactions into onclick events involves adjusting the CSS and JavaScript

Leverage the input value from a text field within the same HTML document

What causes differences in the resulting width between buttons and inputs as opposed to divs and anchor tags?

Preventing a bootstrap data target from opening based on certain conditions

Struggling to display bootstrap glyph icons on any browser

Disabled text selection in Internet Explorer

How can I fully personalize the ion-toggle in Ionic?

Setting constraints for table size with min-width and max-height

What's the best way to enable touch scrolling for items within a div container?

Prevent border duplication in CSS and retain border visibility