A picture placed side by side with a list

Could someone please help me figure out what I'm doing incorrectly?

<div class="row">
      <ul class='list-group .col-md-6'> <li>1</li><li>1</li><li>1</li>  </ul>
      <div>
        <img class=".col-md-6" src="https://farm8.staticflickr.com/7613/16147502573_613d5f6b23.jpg" />
      </div>
</div>

Assume that the list elements are simply placeholders. My intention is to have a list on the left side of the screen and an image on the right side (ideally centered vertically with the list, if possible). I tried using the bootstrap grid system, but as a beginner with bootstrap, the result is not a side-by-side display; instead, the image appears below the list. I have imported and fetched bootstrap, and removing the div around the image did not solve the issue.

If using bootstrap is not the best approach, I am open to suggestions using plain CSS.

Answer №1

add float:left to the list and float:right to the picture.

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

The webpage lacked the functionality of smooth scrolling

I created a website which you can view here. Check out the code below: <div id="mainDiv" class="container"> <div id="header"> <div class="plc"> <h1><a href="#"></a></h1> ...

What is the best method for adjusting the width of a LengthMenu in dataTables?

Is there a way to increase the width of this drop-down menu? It seems too small, especially when selecting 10. https://i.sstatic.net/ObqBA.png ...

Tips for shifting objects from a horizontal row to a designated vertical column when switching to a smaller display

I am currently utilizing bootstrap to enhance my website layout for mobile view. The main challenge I'm facing involves transitioning items from a row to a column in a specific order. In this case, I have two items in a row and I would like the first ...

Is it possible to apply a CSS transform without erasing the existing transform?

Looking for a solution: elem transform translateY(5px) scale(1.2) I want the element to move down an extra 5px on hover elem:hover transform translateY(5px) Is there a way to achieve this without knowing the previous state of the transform? Appr ...

Directories within directories - HTML base directories & subdirectories

Within my HTML, I have included the following code: <head> <base href="http://mydomain.com/dev/"> </head> Despite this base element setting, all of my links seem to be pointing to mydomain.com/ instead of the expected subfolder /dev/. ...

Retrieving the value of a formControl within a formArray is made possible through a reactive form in

How can I retrieve the value of ItemName in my HTML code? When I attempt to use {{invoiceForm.controls[i].items.controls.itemName.value | json}}, it returns as undefined. <form [formGroup]="invoiceForm"> <div formArrayName="items" *ngFor="let ...

Linking issue with href tag

I am having trouble with my download links for PDFs of my Chinese articles. I've tried different approaches, but none of them seem to work. I even attempted linking it to my homepage as a test, but still no luck. <link href="http://unique-domain.c ...

Arranging individual spans within a div using CSS for perfect alignment

My current code looks like this: <div id='div_selectores' class='row_titulo '> <span class="label_selector" id="lbl_show"></span><span id="div_selector_show"></span> <br /> <span class ...

Musical backdrop for an online game platform

Currently, I am working on developing a game using HTML. I am trying to figure out the best way to incorporate music into the gameplay. Any suggestions on how I can add music to my web-based game? ...

What are the risks of using a PHP file within an iframe?

Upon discovering that my web server was unable to run PHP within my HTML file, I decided to use an iframe directed to my PHP script instead. The implementation went smoothly, and now my website features a charming comment form for users to interact with. ...

What is the best way to determine when an IndexedDB instance has finished closing?

In the world of IndexedDB, the close method operates asynchronously. This means that while close finishes quickly and returns immediately, the actual connection closure happens in a separate thread. So, how can one effectively wait until the close operatio ...

What is the best method for passing parameters from HTML to AJAX within code?

My project involves working with Flask, HTML, and Ajax. Here is the HTML code snippet: <script type=text/javascript> $(function() { $('a#calculate').bind('click', function() { $.getJSON('/_add_numbers&ap ...

Selection of multiple listings

Looking for a solution to create a multi list selection area? You can double click on an item in the left list to add it to the selected area. Also, you can double click on an item in the selected area to remove it from the list. <ul id="selection"> ...

The background-size CSS property may experience malfunctioning on iOS devices when using Safari browser

My website has a body background size set, which works well on Android and Windows devices. The background size is intended to be 85% width and 5% height of the body. However, when loading the site on an iPhone, the height appears much larger than 5%. It s ...

Adjust the text to fit neatly within a circular-shaped column container

I am currently working with Bootstrap 5 and I have a row with two columns positioned next to each other. My goal is to apply rounded borders to the left column while ensuring that the content remains within the div. Below is the code snippet: <div clas ...

Generating an HTML table from information stored in a text file

As a beginner in web design, I am looking to create an HTML table using data from a text file. I'm unsure of the best approach to take, so any guidance or pointers would be greatly appreciated. ...

The CSS property that controls the background color of an element

This syntax for a CSS background property is quite effective: .my-element { background: linear-gradient(rgba(131,131,131,0.8), rgba(98,98,98,0.8)), url('img/background.jpg') } However, I am not looking for a gr ...

What is the best way to ensure that this <span> maintains a consistent width, no matter what content is placed inside

So here's the deal, I've got some dynamically generated html going on where I'm assigning 1-6 scaled svgs as children of a . The span is inline with 2 other spans to give it that nice layout: https://i.sstatic.net/mySYe.png I want these "b ...

Why is the "text-overflow: ellipsis" property of a parent div not functioning properly for its child div?

Why is the CSS property text-overflow: ellipsis not working on a child div with the class name cluster-name? .ft-column { flex-basis: 0; flex-grow: 1; padding: 4px; text-overflow: ellipsis; overflow: hidden; } .ft-column > .cluster-name { ...

CSS Techniques for Smooth Transitions

When the hamburger icon is pressed, a menu appears over the current page with CSS from Glamor. The menu slides in perfectly from the right side of the screen, but I am having trouble getting it to slide out when any part of the menu is clicked. I have def ...