Display bootstrap card on top right of the screen-CodePudding

How can I move my Bootstrap card to the top-right of the screen?

This is my current html code (a snippet of it):

<div  style="max-width: 18rem;">
    <div >
        <h5 >{{c.Name}} {{c.Surname}}</h5>
        <p >{{ c.role }}</p>
    </div>
</div>

I have looked through the documentation of bootstrap and tried almost everything. Anyone an idea?

CodePudding user response：

Here you go...

You have to wrap your content with a wrapper and add this to your CSS:

#wrapper {
    position: absolute;
    top: 0;
    right: 0;
}

See the snippet below.

#wrapper {
  position: absolute;
  top: 0;
  right: 0;
}

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

<head>

  <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>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

</head>

<body>

  <div id='wrapper'>
    <div class='card-text' style='max-width: 18rem;'>
      <div class='card-body'>
        <h5 class='card-title'>{{c.Name}} {{c.Surname}}</h5>
        <p class='card-text'>{{ c.role }}</p>
      </div>
    </div>
  </div>

</body>

</html>

CodePudding user response：

You can move it by putting it in a wrapper. If you don't want to add it to a CSS you can just place it within style tags in the HTML head.

    <!DOCTYPE html>
    <html lang='en'>
       <head>
          <!-- Required meta tags -->
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <!-- Bootstrap CSS -->
          <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
          <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
          <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho j7jyWK8fNQe A12Hb8AhRq26LrZ/JpcUGGOn Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
          <style>
             #wrapper {
             position: absolute;
             top: 0;
             right: 0;
             }
          </style>
       </head>
       <body>
          <div id='wrapper'>
             <div  style="width: 18rem;">
                <div class='card-text' style='max-width: 18rem;'>
                   <img src="..."  alt="...">
                   <div class='card-body'>
                      <h5 class='card-title'>{{c.Name}} {{c.Surname}}</h5>
                      <p class='card-text'>{{ c.role }}</p>
                   </div>
                </div>
             </div>
          </div>
       </body>
    </html>