How can I align my photo and text next to each other?-CodePudding

The thing that I am trying to do is: image

The problem in my code is, I am using bootsrap grid system to achieve this easily but when I put this two text and image in a grid system(rows and columns), they look like this: problematic image. How can I achieve the look in the first photograph I put? Also, I want my website to be responsive. So, please write an answer accordingly. Thanks.

HTML:

<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <!-- Own CSS-->
    <link rel="stylesheet" href="stayil.css">
    <!-- Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Great Vibes&family=Montserrat:wght@300;400;600;700&display=swap"
        rel="stylesheet">
    <title>Bati Gozen</title>
</head>

<body>
    <!-- Navbar -->
    <header id="home">
        <nav >
            <div >
                <a  href="#home">Batı Gözen</a>
                <button  type="button" data-bs-toggle="collapse"
                    data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false"
                    aria-label="Toggle navigation">
                    <span ></span>
                </button>
                <div  id="navbarNavAltMarkup">
                    <div >
                        <a  aria-current="page" href="#">Home</a>
                        <a  href="#mywork">My Work</a>
                        <a  href="#resume">CV</a>

                    </div>
                </div>
            </div>
        </nav>
        <!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
        <div >
            <div >
                <div >
                    <img src="images/IMG_0109.jpg" alt="My Picture" >
                    <h1 >Batı Gözen</h1>
                    <p >"Web Developer, Mix&Masterig Specialist"</p>
                </div>
            </div>
        </div>
        </div>
        <div >
            <div >
                <div >
                    <div ><img  src="images/ibimag.png" alt="IB"></div>
                </div>
                <div >
                    <h3 > IB Student, 12.th Grade</h3>
                </div>
            </div>
    </header>
    <!-- Photo Gallery -->
    <section id="mywork">
        <h3>My Work</h3>
        <div >
            <div >
                <div >
                    <img src="images/1.png" alt="Certificate" >
                </div>
                <div >
                    <img src="images/2.png" alt="Certificate" >
                </div>
                <div >
                    <img src="images/3.jpg" alt="Certificate" >
                </div>



            </div>
            <div >
                <div >
                    <img src="images/1.png" alt="Certificate" >
                </div>
                <div >
                    <img src="images/5.png" alt="Certificate" >
                </div>
                <div >
                    <img src="images/6.jpg" alt="Certificate" >
                </div>
            </div>
        </div>
    </section>
    <!-- Resume -->
    <section id="resume">
        <h3>My Resume</h3>
        <button >

            <a href="images/Bati's Resume (4).pdf" ><i ></i> Download</a>
        </button>
    </section>
    <!-- Bootsrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-OERcA2EqjJCMA /3y gxIOqMEjwtxJY7qPCqsdltbNJuaOe923 mo//f6V8Qbsw3"
        crossorigin="anonymous"></script>

</body>

</html>

CSS:

body {
  background-color: #CDF0EA;
  font-family: 'Montserrat', sans-serif;
}



.ib-section {
  margin: 60px 0;
}

.ib {
  max-width: 200px;
}



.name {
  font-family: 'Great Vibes', cursive;
  font-size: 4.8rem;
  letter-spacing: 0.3px;
}

.caption {
  font-size: 1.4rem;
  letter-spacing: 0.8px;
}

.myimage {
  max-width: 18%;
  border-radius: 14%;
}

.navbar-brand,
.nav-link {
  color: #555555;
}

.navbar-brand {
  margin-left: 10px;
}

.navbar-brand:hover,
.nav-link:hover {
  color: black;
}

CodePudding user response：

Because you want these elements grouped closely, it makes sense to nest them in the same parent and use flex only on that parent.

Instead of making them in two different .col's. Try putting them in the same one and use .d-flex with .align-items-center and .justify-content-center classes on that parent. You can then use .gap-3 for 1rem of gap betwen the two elements.

body {
  background-color: #CDF0EA;
  font-family: 'Montserrat', sans-serif;
}

.ib-section {
  margin: 60px 0;
}

.ib {
  max-width: 200px;
}

.name {
  font-family: 'Great Vibes', cursive;
  font-size: 4.8rem;
  letter-spacing: 0.3px;
}

.caption {
  font-size: 1.4rem;
  letter-spacing: 0.8px;
}

.myimage {
  max-width: 18%;
  border-radius: 14%;
}

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

<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div >
  <div >
    <div >
      <img src="https://dummyimage.com/100/000/fff" alt="My Picture" >
      <h1 >Batı Gözen</h1>
      <p >"Web Developer, Mix&Masterig Specialist"</p>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <img  src="https://dummyimage.com/100/000/fff" alt="IB">
      <h3 > IB Student, 12.th Grade</h3>
    </div>
  </div>
</div>