Attempting to position an image in the middle-right of a column using bootstrap

After spending all day researching flexbox and vertical align, I still can't figure out how to align an image to the right in my bootstrap column with text wrapping around it on the left. Check out what I've tried so far here: https://codepen.io/Seaplush/pen/rKVLmX

Here's a snippet of my code:

.col2 img{
  max-width: 100%;
  height: 50%;
  float: right;
}


.col2{
  background-color: #cccccc;
  height: 50vh;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

If anyone could provide guidance or tips on how to achieve this layout, I would greatly appreciate the help. This is my first attempt at building a website, so please excuse any messiness in my code!

Answer №2

Have you considered using the bootstrap grid layout if you are already using bootstrap?

Alternatively, if you decide to use flex box instead, here are some tips...

  1. Ensure that you specify the width for both the text and the image...

  2. Make the parent of these two elements a flex container, and adjust the align-content property.

For example:

.parent{
    display:flex;
    align-content:space-around;
 }

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

Position a Paper component in the center of a div

I'm having trouble centering my <Paper> element inside a div. Can anyone help me with this? I have placed both the <Paper> and <RaisedButton> elements inside the div and applied the following CSS: .timerArea { text-align: center; ...

Adjust the form-row size to make room for a button on the right

I am in the process of developing a web application using Bootstrap v4.4.1. Currently, I am facing an issue where I am attempting to include a form-row with two inputs and one button side by side. However, I also want to add an additional button to the ri ...

Is there a way to ensure that all elements on a page display properly across all screen resolutions without being cut off?

My website consists of three main elements: pictures, Cards (containing pictures and various typography), and Buttons. These elements are arranged in a column layout. The issue I am facing is that the pictures and buttons get cut off on the screen due to ...

What could be causing this slider to malfunction in Firefox?

I have recently developed a slider on this page: While the slider functions smoothly in Chrome, I am facing compatibility issues with Firefox. Can anyone shed some light on why this might be happening? Here is the HTML, CSS, and JS code used for the slid ...

What can be done to stop the Datepicker from exiting the Dialog box and causing it to malfunction?

While creating a form inside a dialog box, I encountered an issue with the date picker functionality. Whenever I try to select a date, it disappears and breaks, rendering the last days of the calendar inaccessible. You can view an example of this problem i ...

Switch up the functionality of Bootstrap tooltips: show all the content and only hide it when hovered over

I have a page containing multiple tooltips that I would like to show all at once. All of the tooltips share a class called "tooltipWarn." <span class='warning tooltipWarn'>test</span> Using JQuery: $('.tooltipWarn').toolti ...

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

Wishes and Aspirations My goal is to design an .input-group with one input[type=text] and one button[type=button]. Initially, the text box should be hidden, leaving only the button visible at the center of the page. Upon activation, the text box should ...

I am seeking assistance to utilize Flexbox to completely fill the height of my computer screen

Seeking assistance in utilizing Flexbox to occupy 100% of my computer screen's height, all while ensuring responsiveness: View of my current sign-in page on Chrome (Note the whitespace): https://i.sstatic.net/pJFOi.png Examining my existing fronten ...

Top method for converting scrolling into an element

When trying to create a scrollable element, I attempted the following: .scroll-content { overflow: hidden; } .scrollabe { overflow-y: scroll; } <ion-content> <ion-grid style="height:100%" *ngIf="plat && ticket"& ...

Ensure that the background div extends all the way to the bottom of the page

Is there a clever CSS technique that allows a div to extend all the way to the bottom of the screen without displaying any visible content inside? Or am I better off using JavaScript for this purpose? Thank you, Richard ...

Ways to conceal the TippyJS tooltip so it doesn't show up on video embeds

My website has tooltips enabled, but I am looking to hide the tooltip pop-ups that appear specifically over youtube video embeds. Upon inspecting the webpage, I found the code snippet below that is associated with youtube videos: <div data-tippy-root id ...

Issue with Bootstrap 5 dropdown menu on mobile devices when not sliding down upon clicking

Important things to know before getting started: Utilizing Django (python) Implementing Bootstrap Additionally, using html and css Steps taken (in sequence leading up to encountering an error): Copied the navbar template from the bootstrap navbar docume ...

What is the best way to modify the text color in an MUI Text Field?

I'm completely new to using MUI and React, and I've run into an issue with changing the text color in my input field. Even though I specified inputProps={{sx: { color: "CCCCCC" }}}, the text color remains black while the label and searc ...

Can someone please clarify how the nth-of-type selector functions?

I can't understand why the nth-of-type selector needs to be set to 2 instead of 1 for the first sibling of this type in the code. To see the code in action, check out this jsfiddle: https://jsfiddle.net/xj5hvn16/ If anyone could kindly provide an ex ...

Guide to including Bootstrap 4 prerequisites (jQuery & Popper.js) through Browserify and Gulp

Currently, I'm in the process of setting up a default template for my bootstrap 4 projects. My plan is to utilize Browserify to include Bootstrap 4 along with its dependencies (jQuery & Popper.js) in my script file. However, I'm facing some confu ...

The scroll-to-top arrow remains concealed when the height of the html and body elements is set to 100

I recently added a scroll-to-top arrow using Jquery, and it's functioning flawlessly. However, I encountered an issue when I set body and html to a height of 100%, as it mysteriously disappears. View this fiddle for reference The HTML structure is a ...

Issues with table-cell rendering in Chrome

I have three different divisions that I would like to showcase as table cells: <div class="field"> <div class="row"> <label for="name">Subdomain</label> <input type="text" id="name" name="name"> &l ...

Tips for incorporating your personal touch while utilizing Snipcart

I have created an ecommerce platform with GatsbyJS and Snipcart, but I am struggling to override the default theme provided by Snipcart. When I try to change the main default CSS through gatsby-config.js, it does not seem to work. Does anyone have a soluti ...

How can I adjust the size of my elements to be responsive in pixels

While browsing through Quora and Facebook feeds, I noticed the fixed size of user display pictures: width: 40px; height: 40px; Even when resizing the browser window for a responsive design, these pictures maintain their size at 40px x 40px. What other f ...

Concerns arise regarding the implementation of an image slider using HTML and CSS

Hey guys, I've created an image slider, but I'm facing an issue where the first click doesn't trigger a smooth animation. Instead, it jumps to the target without any transition. I want a seamless change of images, but right now it's jus ...