How to put a button on a new line using CSS-CodePudding

I have the following code

        <div >
            
            <div >
             
            </div>
            <button type="button" onClick={$("#error-text").hide()}  data-dismiss="modal">Close</button>
        </div>

where the HTML for the pagination class is set later. This gives me something that looks like this in my modal

Howeer I want the close button to appear below the other elements. I am wondering how to achieve this in CSS, I have already tried using another to contain the button as well as style:block

CodePudding user response：

one of the best ways to do this is flexbox. I highly recommend learning it.

 <div >
        
        <section >
        <span>1 2 3</span>
         <div>
           <button>
           next
         </button>
         <button>
         last
         </button>
         </div>
        </section>
        <button type="button" onClick={$("#error-text").hide()}  data-dismiss="modal">Close</button>
    </div>

CSS :

.pagination{
   display:flex;
   gap:10px;
  }
 .modal-footer{
   display:flex;
   flex-direction:column;
   align-items : flex-start;
   justify-content:center;
   gap:10px
   }

CodePudding user response：

You could try using
to insert a line break in the HTML:

<div >

<div >

</div>
<br><button type="button" onClick={$("#error-text").hide()}  data-     dismiss="modal">Close</button>