Css bootstrap put button on right bottom corner-CodePudding

I need help putting a button on right bottom corner of a boostrap col I want to put the button where the black outline in the image help pls

<div >
<div >     
  <div >
   <div >
     <div >
        <div>
        </div>
     </div>
    <div >
       <h3> Username</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
       <p>xxx Followers . xxx Following</p>
    </div>
    <div >
      <p >
        <button type="button" >Cancel</button>
      </p>
    </div>
           
        
    </div>
   </div>

</div>

Button place

CodePudding user response：

Check this out--

<div >
<div >     
<div >
 <div >
 <div >
    <div>
    </div>
 </div>
<div >
   <h3> Username</h3>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
   <p>xxx Followers . xxx Following</p>
</div>
<div >
  <p style="height: 100%" >
    <button type="button" >Cancel</button>
  </p>
</div>  
</div>

CodePudding user response：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <div ></div>
        <div >
          <div >
            <h3> Username</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
            <p>xxx Followers . xxx Following</p>
          </div>
        </div>
        <div >
          <div >
            <button type="button" >Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

There are two methods to implement this...

The first method:

<div >
  <div >
    <div >
      <div >
        <div ></div>
        <div >
          <div >
            <h3> Username</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque dolor leo, iaculis eu rhoncus quis</p>
            <p>xxx Followers . xxx Following</p>
          </div>
        </div>
        <div >
          <div >
            <button type="button" >Cancel</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This is the easiest one.

The second method:

Go to index.css or App.css or you can go to any other CSS file if you have imported it into your file.

Write this piece of code:

.col-sm {
    height: 100%; !important
    display: flex; !important
    justify-content: flex-end; !important
    align-items: flex-end; !important
}

You can also give a class and then write the CSS code based on the class.