How do i put two cards beside each other?-CodePudding

I am trying to get two cards beside each other but no matter what I do they end up underneath each other. I have them in the same row, in the same container but it still won't work.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Home page</title>
    <meta charset="utf-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="search-bar.css" rel="stylesheet">
  </head>

  <body>
      <div class ="container-fluid">

     <div >
        <div class ="col-2" style="width: 170px;">
          <div >
            <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
            <div >
              <h6><b>John Doe</b></h6>
            </div>
          </div> 
          </div>

          <div>
            <div >
              <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
                <div >
                  <h6><b>John Doe</b></h6>
                </div>
          </div>

          </div>


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

      </body>
      </body>
      </html>

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

<head>
  <title>Home page</title>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="search-bar.css" rel="stylesheet">
</head>

<body>
  <div >

    <div >
      <div  style="width: 170px;">
        <div >
          <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
          <div >
            <h6><b>John Doe</b></h6>
          </div>
        </div>
      </div>

      <div>
        <div >
          <img src="http://placehold.jp/150x150.png" alt="Avatar" style="height: 150px; width: 150px;">
          <div >
            <h6><b>John Doe</b></h6>
          </div>
        </div>

      </div>


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

</body>
</body>

</html>

CodePudding user response：

Try this,

Some containers removed. Your cards are now in a column each and both columns are inside a row.

col-6 will make the columns 50% width each, you can make them thinner or wider using col-1 to col-12. The cards will also fill that width as long as you do not dictate any card sizes in your CSS!!

Adding to the images and removing the styled size you entered will make the images stay at the column width no matter the screen size.

<div >
   <div >
      <div >
         <div >
            <img src="http://placehold.jp/150x150.png"  alt="Avatar">
            <h6><b>John Doe</b></h6>
         </div> 
      </div>
      <div >
         <div >
            <img src="http://placehold.jp/150x150.png"  alt="Avatar">
            <h6><b>John Doe</b></h6>
         </div>
      </div>
   </div>
</div>

CodePudding user response：

You have two syntax errors:

An extra div closer </div>
and extra body closer </body>
I added to the second card div
Note by using the forced width on the first column, on small screens you may not see all of that image in columns 1 and 2 set by col-2 you have.
I removed some style= and made classes instead (always try to style wit CSS and classes

We have NO idea what your CSS file does and now this may impact answers negatively. This is the main reason I left some of the markup I would normally NOT do such as the containers around the text on the cards.

.first-column {
  width: 170px;
}

.card-image {
  height: 150px;
  width: 150px;
}

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

<head>
  <title>Home page</title>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <link href="search-bar.css" rel="stylesheet">
</head>

<body>
  <div >
    <div >
      <div >
        <div >
          <img src="http://placehold.jp/150x150.png" alt="Avatar" >
          <div >
            <h6><b>John Doe</b></h6>
          </div>
        </div>
      </div>
      <div >
        <div >
          <img src="http://placehold.jp/150x150.png" alt="Avatar" >
          <div >
            <h6><b>John Doe</b></h6>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Second example with standard card use

.card-image.card-img-top {
  width: 100%;
  height: 150px;
}

.card-img-top {
  width: 100%;
}

.card-title {
  font-weight: bold;
}

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

<body>
  <div >
    <div >
      <div >
        <img src="http://placehold.jp/150x150.png" alt="Avatar" >
        <div >
          <h6 >John Doe</h6>
        </div>
      </div>
      <div >
        <img src="http://placehold.jp/150x150.png" alt="Avatar" >
        <div >
          <h6 >John Doe</h6>
        </div>
      </div>
    </div>
  </div>
</body>