In bootstrap how do I make my card div responsive?-CodePudding

The section I am doing is just 6 cards, 3 cards in a row of 2. When the screen goes to small (mobile phone size) I want each card just to be on their own row. Each card showing one by one as the user scrolls.

It functions this way when I resize the screen however, when I go to google tools, it does not show my desired outcome.

.row {
  padding: 4rem;
  background-color: #F8F8FF;
  border: 4px black;
  colour: red;
}

.card {
  background-color: #ddf;
  padding: 30px;
  margin: 20px;
  transition: 0.40s;
}

.card:hover {
  transform: scale(1.05);
}

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

<div >
  <h1 >My Projects/Work</h1>
  
  <div >
    <div >
      <div  id="proj1">
        <img src="https://via.placeholder.com/300x200"  alt="project_1" />

        <div >
          <h5 >Blog Project</h5>
          
          <p >
            A simple blog website which I made from scratch using html , css and javascript for the frontend.The backend was done with Django and SQL.
          </p>
          
          <a href="#" >Click to see</a>
        </div>
      </div>
    </div>
    
    <div >
      <div  id="proj2">
        <img src="https://via.placeholder.com/300x200"  alt="project_2" />

        <div >
          <h5 >Social media clone </h5>
          
          <p >
            A social media clone with all the main features of a social media site such as Facebook.In order to achieve this I used Django and React.
          </p>
          
          <a href="#" >Click to see</a>
        </div>
      </div>
    </div>
    
    <div >
      <div  id="proj3">
        <img src="https://via.placeholder.com/300x200"  alt="project_3" />

        <div >
          <h5 >E-commence site</h5>
          
          <p >
            This is a website I build for a small tech company in my local area that specialized in databases .

          </p>
          
          <a href="#" >Click to see</a>
        </div>
      </div>
    </div>
  </div>

CodePudding user response：

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

<div >
  <div >
    <div >
      <div >
        <div >
          <h5 >Card title</h5>
          <p >Some quick example text.</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >Card title</h5>
          <p >Some quick example text.</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >Card title</h5>
          <p >Some quick example text.</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >Card title</h5>
          <p >Some quick example text.</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >Card title</h5>
          <p >Some quick example text.</p>
        </div>
      </div>
    </div>
    <div >
      <div >
        <div >
          <h5 >Card title</h5>
          <p >Some quick example text.</p>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

It works as it is supposed to, you set col-12 col-md-6 col-lg-4 which means :

1 column per row by default (low screen width)
2 columns per row on screen with a width >= 768px (md)
3 columns per row on screen with a width >= 992px (lg)

From what you described, it seems that you don't want 2 columns per row, so you can remove col-md-6, or if you want 3 items per row on medium screen size, change it to col-12 col-md-4.