Bootstrap 5 - Card Element Alignment on the Bottom-CodePudding

Okay so I'm new with Bootstrap, and I'm trying to place one button element to be on the bottom of the Card all the time, even when body text is small. However, I'm always receiving this result, which is not placing my button on the bottom right corner where I need it to be.

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div >
    <div >
      <div >
        <img src="Logo.png"  alt="Logo">
      </div>
      <div >
        <div >
          <h2  style="font-weight: bold;">John Doe</h5>
            <h6 >Developer</h5>
              <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                <div >
                    <a href="#" >Portfolio</a>
                    <div >
                        <img src="/bootstrap-icons-1.7.2/facebook.svg" alt="Facebook Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/instagram.svg" alt="Instagram Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/linkedin.svg" alt="Linkedin Icon" width="32" height="32">
                        <img src="/bootstrap-icons-1.7.2/twitter.svg" alt="Twitter Icon" width="32" height="32">
                    </div>
                </div>
        </div>
      </div>
    </div>
  </div>




  <script src="js/bootstrap.js"></script>
</body>

</html>

CodePudding user response：

Since you already have the element nested in a bootstrap row you can add the class justify-content-end which is synonymous with justify-content: flex-end; I also declared a width on your a tag at w-25.

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div >
    <div >
      <div >
        <img src="Logo.png"  alt="Logo">
      </div>
      <div >
        <div >
          <h2  style="font-weight: bold;">John Doe</h5>
            <h6 >Developer</h5>
              <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <div >
                <a href="#" >Portfolio</a>
              </div>
        </div>
      </div>
    </div>
  </div>

Edit ~ "what if I have two elements inside that row, and I want to place one on the right/start and the other on the left/end?"

Then use justify-content-between. See below.

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="/bootstrap-icons-1.7.2/*">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div >
    <div >
      <div >
        <img src="Logo.png"  alt="Logo">
      </div>
      <div >
        <div >
          <h2  style="font-weight: bold;">John Doe</h5>
            <h6 >Developer</h5>
              <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
              <div >
                <a href="#" >Portfolio</a>
                <a href="#" >Portfolio</a>
              </div>
        </div>
      </div>
    </div>
  </div>

CodePudding user response：

Would this be ok for you?

.card-container {
  display: flex;
}

.card {
  flex: 1;
}

.card-body {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div >
  <div >
     <div >
      <div >
        <div >
          <a href="#">
            <img src="https://picsum.photos/50/50/?gravity=west"  />
          </a>
          <h5 >John Doe</h5>
          <h6 >Developer</h6>
          <p >This is a wider card with supporting text below as a natural</p>
          <div >
            <a href="#" >Portfolio</a>
          </div>
        </div>
      </div>
    </div>

    <div >
      <div >
        <div >
          <a href="#">
            <img src="https://picsum.photos/50/50/?gravity=west"  />
          </a>
          <h5 >John Doe</h5>
          <h6 >Developer</h6>
          <p >This is a wider card with supporting text below as a natural lead-in to additional content. This content</p>
          <div >
            <a href="#" >Portfolio</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>