Why is it not possible for me to place my image and text side by side?

I've been working on my personal portfolio website and ran into an issue when trying to position the image with text that says Ib student. I attempted using the bootstrap box model which didn't work, followed by using float, but that also didn't produce the desired result. The text always appears at the top of the page, and when I try to adjust its position using position: absolute, it ends up in a location I don't want when resizing the page. In summary, how can I successfully align these elements?

Here's a look at the current appearance: 

body {
  text-align: center;
  color: #FFF5FD;
}

header {
  background-color: #FF96AD;
}

header h1 {
  color: #FFF5FD;
  font-family: 'Dancing Script', cursive;
  font-size: 6rem;
  padding-top: 16px;
}

header img {
  width: 16%;
  border-radius: 60%;
  margin-top: 30px;
  min-width: 200px;
}

.navbar-brand {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 3px;
}

.capton {
  font-size: 1.3rem;
  margin-top: 18px;
  font-family: 'Spartan', sans-serif;
  font-weight: 600;
}

.ib {
  width: 6%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="53313c3c27202721322313667d637d62">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">



<header id="home">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#home">Batı Gözen</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">My Work</a>
          <a class="nav-link" href="#">CV</a>

        </div>
      </div>
    </div>
  </nav>
  <img src="https://via.placeholder.com/300.jpg/" alt="My Picture">
  <h1>Batı Gözen</h1>
  <p class="capton">"Web Developer, Video Editor"</p>
  <div class="row row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1">
    <div class="col">
      <img src="https://via.placeholder.com/400.jpg/" alt="IB" class="ib">
    </div>
    <div class="col">
      <h3> IB Student, 12.th Grade</h3>
    </div>


  </div>


</header>

<section id="resume">
  <h3>My Resume</h3>
</section>



<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="680a07071c1b1c1a0918285d46584659">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous">

htmlcssbootstrap-5

Answer №1

body {
  text-align: center;
  color: #FFF5FD;
}

header {
  background-color: #FF96AD;
}

header h1 {
  color: #FFF5FD;
  font-family: 'Dancing Script', cursive;
  font-size: 6rem;
  padding-top: 16px;
}

header img {
  width: 16%;
  border-radius: 60%;
  margin-top: 30px;
  min-width: 200px;
}

.navbar-brand {
  padding-top: 6px;
  padding-bottom: 6px;
  margin-bottom: 3px;
}

.capton {
  font-size: 1.3rem;
  margin-top: 18px;
  font-family: 'Spartan', sans-serif;
  font-weight: 600;
}

.ib {
  width: 6%;
}
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="4b2924243f383f392a3b0b7e657b675c627d7276">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcjohdmlsNSxlBLeRKmTABMP9QbsX86TMEwsP" crossorigin="anonymous">



<header id="home">
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#home">Batı Gözen</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
          <a class="nav-link" href="#">My Work</a>
          <a class="nav-link" href="#">CV</a>

        </div>
      </div>
    </div>
  </nav>
  <img src="https://via.placeholder.com/300.jpg/" alt="My Picture">
  <h1>Batı Gözen</h1>
  <p class="capton">"Web Developer, Video Editor"</p>
  <!--<div class="row row-cols-lg-2 row-cols-md-2 row-cols-sm-1 row-cols-1">
    <div class="col">
      <img src="https://via.placeholder.com/400.jpg/" alt="IB" class="ib">
    </div>
    <div class="col">
      <h3> IB Student, 12.th Grade</h3>
    </div>
  </div>-->
 
<div class="row">
<div class="col d-flex">
    <img class="ms-auto" src="https://via.placeholder.com/400.jpg/" alt="IB" class="ib">
</div>
<div class="col d-flex">
    <h3 class="my-auto me-auto"> IB Student, 12.th Grade</h3>
</div>
</div>

</header>

<section id="resume">
  <h3>My Resume</h3>
</section>



<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b0904041f181f190a1b2b5e455b454a">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3UtqUBWTxzn8NWMHsR" crossorigin="anonymous">

If you desire a similar outcome.To achieve this result, I have replaced your code snippet with mine and provided customization options for adjusting margins using ms-auto and me-auto.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showing ASP code within a DIV element (inline)

Working on setting up a 'shopping cart' feature on our website, but running into some issues with the ASP code. Does anyone have any advice to offer? In the image below, you can see that when items are added to the cart, the 'total' is ...

cssasp-classic

Blend Image and Text with jQuery when Hovered Over

Alright, so here's the deal - I have an image that needs to smoothly transition to another image when hovered over. I also have some descriptive text that should crossfade into different text corresponding to the second image. The current setup is ki ...

jqueryhtmlhovermouseovercross-fade

How to Duplicate a Select Box Option in MySQL without Copying the Entire Field (Duplicate Only One Option)

I am in the process of setting up a database for an upload system, specifically using a select box to restrict the number of categories added to the database. <select name="category"> <?php $conn = mysqli_connect("localhost", "blah", "blah") or d ...

phphtmlmysql

Is there a way to exclusively utilize CSS in order to achieve bottom alignment for this btn-group?

I currently have a series of div elements that I transformed into two columns. https://i.stack.imgur.com/xG7zT.png My goal is to align the PDF/XML button group at the bottom, creating a layout like this: https://i.stack.imgur.com/ijtuH.png This is an e ...

htmlcss

Is it possible to receive real-time updates for a specific location in Cesium

I am currently developing a live tracking application using Cesium, and I'm encountering an issue with updating the point location on the map in real-time. Currently, my Cesium viewer successfully receives the data from the server in JSON format and ...

javascripthtmljsondictionarycesiumjs

Is there a way to implement a sticky footer on just a single webpage if that's all I need?

On my main page, I have an empty div with only a background image. To prevent it from collapsing, I created a sticky footer using the following code: * { margin:0; padding:0; } html, body, #wrapper{ height: 100%; } body &g ...

htmlcssfooter

Avoid Bootstrap 5 collapse when clicking on links or buttons

In my table, there are parent rows with hidden child rows that can be toggled using the bootstrap collapse feature. Clicking on a parent row toggles the visibility of its child rows. Both parent and child rows can be dynamically added to the table. Parent ...

javascriptbootstrap-5

Looking to adjust the width of a Bootstrap dropdown menu?

I am trying to adjust the width of my dropdown menu Here is a link to jsfiddle with my code: [jsfiddler][1]. On the right side of the main menu, I have a languages dropdown menu. When it expands, its width is very large and I want it to match the main m ...

jqueryhtmlcsstwitter-bootstrapdrop-down-menu

exploring the seamless transfer of values between Thymeleaf and Spring controllers, and vice versa

As a newcomer to thymeleaf, I'm seeking guidance on how values are passed between the thymeleaf HTML and Spring controllers. Could someone please recommend some helpful tutorials for thymeleaf-spring-mvc? In the following example, I would like to und ...

htmlspring-mvcspring-3thymeleaf

Using jQuery to extract the value of an object from an <li> element and updating the class attribute of the <li> element

There is a div element: <div id="ddDistr" class="searchBoxSortDistrict" tabindex="1"> <ul id="ddd"> </ul> </div> I have inserted HTML from json into it: $("#ddd").html(" "), $.each(dis, function( index, value) { $("#dd ...

javascriptjqueryhtmlcss

Pop-up message on card selection using JavaScript, CSS, and PHP

I have a total of 6 cards displayed in my HTML. Each card, when clicked, should trigger a modal window to pop up (with additional information corresponding to that specific card). After spending a day searching for a solution online, I've come here s ...

javascripthtmlcss

Accessing JSON data through crawling may trigger an "Invalid access" warning

Currently extracting data, I came across this base URL After inspecting chrome's developer tools - Network tab, I found the following URL: international?Adt=1&Chd=0&ECITY1=HKG&ECITY2=ICN&Fa…019.03.13.&TRIP=RT&W ...

pythonhtmljsonajaxweb

Adjusting the color scheme of a Checkbox Button in Bootstrap 4

Seeking advice on locating overrides for certain css properties. Take a look at this illustration on https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons. The contrast in color between the activated and deactivated states is n ...

csstwitter-bootstrapsassbootstrap-4

Display the remainder of an image's height within a div container

Here is the code snippet I am working with: HTML: <div id="mapWrapper" style="height: 624px;"> <div class="box" id="map"> <h1>Campus</h1> <p>Description Campus Map.</p> <img src="abc.png" ...

htmlcss

Adjusting the line-height in CSS dynamically based on the length of characters using jQuery

I am facing an issue with the Twitter widget on my website where our company's latest tweet sometimes gets cut off if it exceeds a certain length. I want to dynamically adjust the line-height CSS property of the element based on the tweet's chara ...

phpjavascriptjquerycss

The height of the navigation bar adjusts to fit the image

I'm currently struggling with my html and css learning project. The height of the navigation bar is not adjusting properly to the size of the image. I have tried various solutions, but nothing seems to work. Any guidance would be appreciated! htm ...

htmlcss

Having trouble extracting data from Moz Bar through selenium using Python?

Having trouble retrieving the spam score from Moz bar using Selenium WebDriver? I've attempted various methods such as XPath, class, and tag name without success. Any assistance would be greatly appreciated: from selenium.webdriver.common.by import By ...

pythonhtmlcssselenium-webdriverselenium-chromedriver

What is the method for obtaining the WordPress user ID?

I am looking to incorporate a Twitter follow button for all site authors on every post. Below is the structure of the Twitter button: <a href="https://twitter.com/twitterapi" class="twitter-follow-button" data-show-count="false" data-lang="en">Foll ...

phphtmlwordpress

Alignment of Bootstrap thumbnails in a horizontal layout

After adding the thumbnail class to my thumbnails div, I noticed that some of the thumbnails were smaller in size than others. Wanting them all to have the same height, I decided to give each thumbnail a fixed height of 210px. However, this caused the sm ...

javascriptjqueryhtmlcsstwitter-bootstrap

Is there a way to update the input box value with a variable using jquery?

I am currently facing an issue with changing the value attribute of an input box in a form using jquery. Although I am able to change the value, it does not reflect in the outer html. Below is my current code snippet: $("a").click(function(event) { va ...

javascriptjqueryhtmlforms