I'm having a hard time getting the div to be centered when the screen size is medium. My code when the screen size becomes medium will display:
What I expect is the following:
.
Actually here I have some problems, the 2 cards on the right hand side don't immediately go down when I slowly resize the screen. And 1 more problem is the right margin doesn't work so I can't give the distance between the profile picture and username.
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-5 mt-3">
<div class="card">
<div class="card-body">
<a class="card-link" href="#">
<h5 class="card-title"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit consectetur deserunt illo esse distinctio.</h5>
</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<a href='#' class='hashtag'>#lorem</a>
<p class="card-text">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam omnis nihil, aliquam est, voluptates officiis iure soluta alias vel odit, placeat reiciendis ut libero! Quas aliquid natus cumque quae repellendus. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Ipsa, excepturi. Doloremque, reprehenderit! Quos in maiores, soluta doloremque molestiae reiciendis libero expedita assumenda fuga quae. Consectetur id molestias itaque facere? Hic!
</p>
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-100">
<img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div class="ml-10">
<div class="h6 ml-10">Miracles Lee Cross
<span class="text-muted">@LeeCross</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 text-end">
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-up"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-down"></i>
18</span></span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-comment"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-share"></i> 18</span>
<div class="mt-10">8 bulan lalu</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-body">
<p class="card-text">
Lorem ipsum dolor sit amet !
</p>
<div class="row">
<div class="col-md-6">
<div class="d-flex justify-content-between align-items-center">
<div class="mr-100">
<img class="rounded-circle" width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div class="ml-5">
<div class="h6 ml-10">Miracles Lee Cross
<span class="text-muted">@LeeCross</span>
</div>
</div>
</div>
</div>
<div class="col-md-6 text-end">
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-up"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-caret-down"></i>
18</span></span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-comment"></i> 18</span>
<span class="badge rounded-pill bg-primary"><i class="fas fa-share"></i> 18</span>
<div class="mt-10">8 bulan lalu</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-md-3 mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>