Bootstrap CSS grid not aligning-CodePudding

New to Bootstrap and using version 5-2-0

In my layout I wanted to have the image of the cat take up one side and then have the content and form on the other size (content first then form underneath) but I can't get it to work.

<div >
  <div >
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div >
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
  </div>
  <div >form</div>
</div>

Codepen: https://codepen.io/emmabbb/pen/ExRmgZE

CodePudding user response：

This should do.

Code:

<div >
  <div >
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div >
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
    <div>form</div>
  </div>
</div>

CodePudding user response：

In you're code, you were missing the stylesheet for https://getbootstrap.com/docs/5.2/assets/css/docs.css.

Also you need to start from g-start-7 (instead of g-start-6) as 1-6 is for the first column and 7-12 is for the second columns

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

    <link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">

<div >
  <div >
    <img src="http://placekitten.com/g/200/300" alt="kitty kitty">
  </div>
  <div >
    <h1>Hello</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni natus reiciendis corrupti quasi sit, ipsam officia doloribus totam fuga pariatur aliquid! Molestias et sapiente iusto, perspiciatis similique rem ipsum dolores?</p>
  </div>
  <div >form</div>
</div>

See more details here: https://getbootstrap.com/docs/5.2/layout/css-grid/#how-it-works