Is there a way to position my image and text side by side?

My current objective revolves around implementing a specific design, as illustrated in this image.

The issue I'm encountering in my code pertains to the utilization of the bootstrap grid system for ease of layout. However, when I incorporate both text and image elements within the grid system (rows and columns), they yield an outcome similar to the one shown in this problematic image. How can I attain the desired appearance resembling the first photo I shared? Furthermore, maintaining responsiveness on my website is a critical aspect. I appreciate any insights or solutions provided. Thank you.

Below are snippets of the HTML and CSS segments:

<!--- Inserted HTML Code Here --->

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;
}

Answer №1

If you want to keep these elements grouped closely together, it would be best to nest them within the same parent container and apply the flex property only to that parent.

Instead of separating them into two different columns, consider placing them in a single column and applying the classes .d-flex, .align-items-center, and .justify-content-center to the parent container. You can also use .gap-3 to add a gap of 1rem between 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="cdafa2a2b9beb9bfacbd8df8e3fde3ff">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<!-- Explanation !!!!!!!!I HAVE PROBLEM HERE!!!!!!!!-->
<div class="container-fluid text-center mt-3">
  <div class="row justify-content-center">
    <div class="col-12">
      <img src="https://dummyimage.com/100/000/fff" alt="My Picture" class="img-fluid myimage">
      <h1 class="name mt-4 mb-3">Batı Gözen</h1>
      <p class="caption">"Web Developer, Mix&Masterig Specialist"</p>
    </div>
  </div>
</div>

<div class="container-fluid text-center ib-section">
  <div class="row">
    <div class="col-12 d-flex align-items-center justify-content-center gap-3">
      <img class="img-fluid ib" src="https://dummyimage.com/100/000/fff" alt="IB">
      <h3 class="img-fluid"> IB Student, 12.th Grade</h3>
    </div>
  </div>
</div>

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

If the navigation menu contains sub-menus, it should slide to the left

I am currently working on developing a navigation menu with four levels of depth. The menu displays three levels at a time, and when the user reaches the fourth level, the first level should move to the left to make room for the second, third, and fourth l ...

Calculation operations nested within each other

Looking for a solution here. I am trying to utilize the CSS calc operation to carry out two calculations: I aim to make my width equal to (100% / 7) - 2 But whenever I attempt multiple operations in a CSS calc function, it doesn't work: width: cal ...

Tips for aligning buttons in a row

I am trying to find a way to make my buttons more compact within a <div> element when the length exceeds 100%. Is there a way to achieve this while avoiding wrapping to a second line? Is there a solution similar to using scaleX, but one that takes i ...

What could be causing my JavaScript code to not function properly in an HTML document?

Hello, I am a beginner in the world of coding and currently delving into web development. Recently, I was following a tutorial on creating a hamburger menu but I seem to be encountering some issues with the JavaScript code. I have double-checked my Visual ...

How can I use Ajax to show only one div on the entire page while keeping the CSS and other header content intact

One of my clients is looking to integrate a merch shop into their website. The existing merch page is not visually appealing and doesn't match the aesthetic of the client's site. I am considering using AJAX GET to fetch the content of the merch p ...

Tips on getting rid of the excess margin added by Android WebView printing

We have been attempting to print content from a webview via Google Cloud Print, but no matter what steps we take, the resulting printout always includes an unwanted margin. Is there a solution to eliminate this margin? We have tried: <body style="marg ...

AngularJS: Unable to locate element using getElementById function

Using a third party JavaScript application, I have integrated and invoked a function within one of my AngularJS factories. This function requires the id of a DOM element as a parameter, as it manipulates this element. ThirdPartyApp.doSomething("#elementId ...

Dynamic extension of classes in SCSSORExtending classes

When working with Vue, I encountered a situation similar to :style="{ [`--chip-bg-hover`]: hoverColorValue, [`--chip-bg-active`]: activeColor, [`--chip-border-hover`]: borderHoverColorValue, }" Then, i ...

Getting rid of any excess space between columns within the same row in Bootstrap following a line

Exploring Bootstrap 3. When you test the following HTML and CSS code, everything appears as expected with no space above 768px. However, upon reaching that breakpoint, the divs start stacking on top of each other, which is fine. But suddenly, a mysterious ...

Showing or hiding child content based on the selected state of a radio button

This is a follow-up question from a previous one on changing check boxes to radio buttons. Now, I need to display child radio buttons and change the background color when the parent radio button is active. The child radio buttons should be hidden and the b ...

4 innovative ways to customize internal CSS in Bootstrap

I'm just starting out with bootstrap and I could really use some guidance on how to customize it. I managed to create a sample site, but I'm struggling to make modifications beyond the basic bootstrap settings. I have a "container" with blue font ...

Retrieving the selected value from a Bootstrap dropdown using JavaScript when there are multiple dropdowns present

I have created multiple rows in javascript that are being rendered to the DOM from a Firestore collection. Each row contains a Bootstrap dropdown with the same select options (".a" elements). The id attribute of each row div is dynamically set based on the ...

An hour ago, the Python and Selenium code was functional, but now it has suddenly ceased to work

Hello to all fellow community members, I recently attempted to locate the next button in Google search, specifically on the bottom right corner. Here is the HTML code snippet that pertains to this: <td aria-level="3" class="d6cvqb" ...

Create a resizable textarea within a flexbox container that allows for scrolling

Hey there! I'm struggling with a Flexbox Container that has three children. The first child contains a textarea, but it's overflowing beyond its parent element. Additionally, I want to make the content within child 2 and 3 scrollable. I've ...

Using jQuery to generate a JSON object dynamically based on the values entered in each input field

I'm facing a situation where I need to extract data from a JSON format using PHP. However, I'm struggling with how to structure the Javascript object in order to dynamically create the JSON format. Here is my current scenario: <input title=" ...

Disabling the movement of arrows in the client-testimonials-carousel plugin

This plugin that I'm currently using is working flawlessly: However, I'm unsure about how to make the arrows stationary and prevent them from moving. Currently, they are centering themselves based on the height of the div, but I want them to rem ...

The Angular Animation constantly resets with each new action taken

In my Angular project, I am working on a scaling animation for a list. I want the animation to only trigger when specific buttons (red and green) are pressed. Currently, the animation restarts regardless of what I click on. Can anyone help me troubleshoot ...

Is there a way to dynamically expand and collapse all table rows, with the latest row always remaining visible, using pure JavaScript?

I have a form input field where I enter data. The entered data is then displayed in a table as a new row, with the most recent entry at the top. What I want to achieve is to show only the newest row in the table and hide all other rows. When I hover over ...

Having trouble with Simplehtmldom's innertext function?

While working with simple_html_dom: I encountered the following code snippet: $j = ' <itemBody> <div>films - to watch (Simple Present)<br/> <textEntryInteraction responseIdentifier="RESPONSE_1"/> ...

Multi-select buttons using Bootstrap

Before, I used standard check-boxes, but now I am looking to switch to using bootstrap Multiple select boxes. However, when I implement the new code, I am unable to see any rows in my drop down. New code snippet: <li> <select href="#" class="se ...