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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div >
<div >
<div >
<div >
<div >
<a href="#">
<h5 > 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 >
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 >
<div >
<div >
<div >
<img width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div >
<div >Miracles Lee Cross
<span >@LeeCross</span>
</div>
</div>
</div>
</div>
<div >
<span ><i ></i> 18</span>
<span ><i ></i>
18</span></span>
<span ><i ></i> 18</span>
<span ><i ></i> 18</span>
<div >8 bulan lalu</div>
</div>
</div>
</div>
</div>
<div >
<div >
<p >
Lorem ipsum dolor sit amet !
</p>
<div >
<div >
<div >
<div >
<img width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div >
<div >Miracles Lee Cross
<span >@LeeCross</span>
</div>
</div>
</div>
</div>
<div >
<span ><i ></i> 18</span>
<span ><i ></i>
18</span></span>
<span ><i ></i> 18</span>
<span ><i ></i> 18</span>
<div >8 bulan lalu</div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<h5 >Special title treatment</h5>
<p >With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" >Go somewhere</a>
</div>
</div>
</div>
<div >
<div >
<div >
<h5 >Special title treatment</h5>
<p >With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" >Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>CodePudding user response：
Start by leaving the columns full-width for medium. You have them reducing to 6, which is half the grid. Keep in mind that Bootstrap is mobile-first, so you set properties for a specific breakpoint and up.
col-lg-6
Then set text alignment and flex justification to center for breakpoints below large.
Use this for flex:
justify-content-center justify-content-lg-between
And this for text:
text-center text-lg-end
<head>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div >
<div >
<div >
<div >
<div >
<a href="#">
<h5 > 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 >
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 >
<div >
<div >
<div >
<img width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div >
<div >Miracles Lee Cross
<span >@LeeCross</span>
</div>
</div>
</div>
</div>
<div >
<span ><i ></i> 18</span>
<span ><i ></i>
18</span></span>
<span ><i ></i> 18</span>
<span ><i ></i> 18</span>
<div >8 bulan lalu</div>
</div>
</div>
</div>
</div>
<div >
<div >
<p >
Lorem ipsum dolor sit amet !
</p>
<div >
<div >
<div >
<div >
<img width="45" src="https://picsum.photos/50/50" alt="">
</div>
<div >
<div >Miracles Lee Cross
<span >@LeeCross</span>
</div>
</div>
</div>
</div>
<div >
<span ><i ></i> 18</span>
<span ><i ></i>
18</span></span>
<span ><i ></i> 18</span>
<span ><i ></i> 18</span>
<div >8 bulan lalu</div>
</div>
</div>
</div>
</div>
</div>
<div >
<div >
<div >
<h5 >Special title treatment</h5>
<p >With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" >Go somewhere</a>
</div>
</div>
</div>
<div >
<div >
<div >
<h5 >Special title treatment</h5>
<p >With supporting text below as a natural lead-in to additional content.
</p>
<a href="#" >Go somewhere</a>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>
</body>