Bootstrap Cards not working correctly with columns

user_11874998 0
Viewed 706

On small devices, I would like to display "Cards" in single lines -> image on the left side and the name and description on the right. On larger devices I would like to have several cards side by side -> picture on top and title with description underneath.

The image above with the text below works fine for me, anyway I am not able to swap the image to the left and the text to the right.

This is my code so far:

<div class='col'>
  <div class='card h-100'>
    <div class='col-4 col-md-12'>
      <img src='...' class='img-fluid rounded-start' alt='...'>
    </div>
    <div class='col-8 col-md-12'>
      <div class='card-body'>
        <h5 class='card-title'>Title</h5>
        <p class='card-text'>Description</p>
      </div>
    </div>
  </div>
</div>

On small devices I get the col-4 for image and col-8 text set correctly but they still stay below each other, and I don't see reason why.

bootstrap-5 css html
1 Answers

Change the class col on your first div for row. After that, you can add your card in some columns and have them disposed side by side on a larger screen with col-md-x, col-lg-x and col-xl-x.

It's the same thing for the content in your card. Group the content in a div with the class row and group each section of your content in some columns.

Here is more information about the Bootstrap Grid System

Here is en example:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<div class='row'>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-4 col-12">
    <div class='card h-100'>
      <div class='row'>
        <div class='col-md-12 col-4'>
          <img width="300" src='https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y2hhbmdlfGVufDB8fDB8fA%3D%3D&w=1000&q=80' class='img-fluid rounded-start' alt='...'>
        </div>
        <div class='col-md-12 col-8'>
          <div class='card-body'>
            <h5 class='card-title'>Title</h5>
            <p class='card-text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

user_179493320
Related