bootstrap columns overlapping each other on mobile-CodePudding

I have the following code

<div >
 <div >
 </div>
 <div >
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
    <button></button>
 </div>
</div>

Here's my css

.calendar { min-width: 447px; }

The calendar div has a minimum width of 400px; however, on smaller screens the second column overlaps with the calendar column. How do I make sure they don't overlap when the screen size is < 1024px.

CodePudding user response：

You can use it simply like this.

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet"/>
<div >
  <div >col-9</div>
  <div >col-3</div>
</div>

CodePudding user response：

You need to wrap the columns with a div giving a class name (.row) row. Make another div with calendar class in .clo-md-3 div. And use width with %

<div >
    <div >
        <div >
            <div >Calendar</div>
        </div>
        <div >
            <button>Button text</button>
        </div>
    </div>
</div>

CSS code Example:

.calendar { 
    min-width: 30%; 
    background: #000;
    color: #ffffff;
    padding: 10px;
    display: inline-block;
}