How to show an image alongside a textarea in Bootstrap 4

Currently, I am facing a display issue while trying to show an image next to a textarea using Bootstrap 4.

To clarify, here is the desired appearance that I aim for:

https://i.sstatic.net/LJ8P6.png

I want the image and textarea layout to consistently resemble the above image, both on desktop and in responsive mode.

Shown below is the code snippet of my Angular HTML component:

<div class="container">
<div class="row">
          <div class="col-lg-12">
            <div class="col-lg-4">
                <img 
                data-src="holder.js/200x200" 
                class="rounded float-left" 
                alt="100x100" 
                src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" 
                data-holder-rendered="true" 
                style="width: 150px; height: 150px; margin:5px;">
            </div>
            <div class="col-lg-8">
                <label for="modifications">Modificaciones al diseño</label>
                <textarea 
                  class="form-control" 
                  id="modifications" 
                  rows="4"
                  required 
                  [(ngModel)]="mModifications" 
                  name="modifications"
                  #modifications="ngModel"
                  [ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
                </textarea>
                <small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
                <small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>
            </div>
          </div>
        </div>  
       </div>

I have made efforts to adjust the CSS styling to achieve the desired layout without success.

Your assistance is greatly appreciated!

csstwitter-bootstrapbootstrap-4

Answer №1

<div class="container">
<div class="row">
            <div class="col-lg-4">
                <img 
                data-src="holder.js/200x200" 
                class="rounded float-left" 
                alt="100x100" 
                src="data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22200%22%20height%3D%22200%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20200%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_164e3f66702%20text%20%7B%20fill%3Argba(255%2C255%2C255%2C.75)%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A10pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_164e3f66702%22%3E%3Crect%20width%3D%22200%22%20height%3D%22200%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%2274.4296875%22%20y%3D%22104.5%22%3E200x200%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E" 
                data-holder-rendered="true">
            </div>
            <div class="col-lg-8">
                <label for="modifications">Modificaciones al diseño</label>
                <textarea 
                  class="form-control" 
                  id="modifications" 
                  rows="4"
                  required 
                  [(ngModel)]="mModifications" 
                  name="modifications"
                  #modifications="ngModel"
                  [ngClass]="{'is-valid': modifications.valid && modifications.touched, 'is-invalid': modifications.invalid && modifications.touched}">
                </textarea>
                <small *ngIf="modifications.untouched || modifications.valid && modifications.touched" class="form-text text-muted">Se conciso en la descripción, esto ayuda a nuestros expertos a estar preparados el día de la visita.</small>
                <small *ngIf="modifications.invalid && modifications.touched" class="form-text text-muted-error">Debes describir el trabajo a realizar</small>

          </div>
        </div>  
       </div>

Simply eliminate the col-lg-12 div altogether.

https://codepen.io/anon/pen/jpYQQK

Answer №2

Include this in your HTML code:

<div class="col-md-12" id="dvImageTextBox">   
      <input id="cc-cvc" placeholder="CVC" formControlName="cvc" type="text" autocomplete="off" ccCvc>                                           
      <img src="assets/citybook/images/CVV.png" height="45px" width="75px" />                                                                                                                     
  </div>

Add the following CSS for styling:

#dvImageTextBox
{
position: relative;   
}
#dvImageTextBox input
{
display: block;
width: 100%;

}

#dvImageTextBox img
{
position: absolute;
top: 5px;
right: 5px;
}

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

"Discover the simplicity of customizing Bootstrap 5 with an easy-to-use online tool

When I was using Bootstrap 3, there was a convenient tool that allowed me to customize which features I wanted in the minified CSS/JS files to improve loading time. Now, as I delve into the documentation for Bootstrap 5, I find myself struggling to unders ...

javascripthtmlcsstwitter-bootstrapbootstrap-5

Enhancing Your Website with Multiple Background Images in CSS3

Having trouble understanding how to position multiple background images with CSS3. I'm struggling to get them to display at the top, middle, and bottom of the page. Can you help me figure out how to make an image appear at different positions using a ...

htmlcss

The Bootstrap CDN is malfunctioning and displaying errors in the console

I attempted to incorporate Bootstrap 4.5 using the CDN provided on their main website. However, after adding all the code lines to my project, I encountered numerous issues with my custom CSS and the Bootstrap carousel failing to function. Upon inspecting, ...

javascripthtmljquerycssbootstrap-4

Mastering the art of creating an authentic carbon fiber CSS background

Authentic carbon fiber consists of a series of interconnected grey fibers that resemble woven sheets in grey color. Does anyone have knowledge on how to replicate this pattern using CSS? The examples created by Lea Verou do not accurately depict true carb ...

csslinear-gradients

How can I create off-center underlined text?

I am looking to create a unique text effect where the underline is off-centered and overlaps the text. However, I am unsure of how to achieve this. Can someone guide me on the best way to replicate the following effect? https://i.sstatic.net/MEyRk.png Cu ...

htmlcssuser-interface

Elements on the page are being truncated beyond the visible viewport

Encountering an issue with a web page I'm currently developing that is proving challenging to explain. The problem occurs when the page is viewed in a small browser window and cuts off when scrolling horizontally to content outside of the viewport. Wh ...

htmlcss

The text and links should appear transparent against a gradient background; however, they are displaying in white

I am currently facing a small issue while working on my new website, www.dvpwebdesign.com. The problem arises in Internet Explorer (IE) when the intro page displays a repeated gradient background with text and links overlaid on it. While the layout works ...

htmlcss

Delete element by class in jQuery

Hey there! Would you happen to know if there's a wildcard in jQuery that could help me remove a class from an element? I've been trying to update the classes on my info message box. When a user clicks it once, then clicks it again, it adds a ne ...

javascriptjquerycss

Is it feasible to have a set number of character lines per <p> tag without relying on monospaced fonts?

I am facing the challenge of breaking a large text into paragraphs of equal size, with the same number of string lines in order to maintain uniformity. Currently, I am using PHP and the following code to achieve this: function arrangeText(){ if (have_ ...

phpjavascriptjquerywordpresscss

Switch between visibility of objects with toggle button

I have set a background image on the body, and positioned a large box, footer, navigation bar, and header above it. In order to add functionality to slide these elements up and down, I've created two buttons with classes 'slideUp' and &apos ...

javascriptjqueryhtmlcss

What steps can I take to avoid horizontal scrolling on mobile due to a table overflowing?

My website displays a table within a bootstrap container, row, and column. While everything looks good on larger screens, the content within the table is causing a horizontal scroll on smaller screens, making the footer look distorted. This results in a me ...

javascripthtmlcss

Expanding the `div` element to visually occupy the entire vertical space

I'm facing a design challenge with my webpage layout. I have a fixed header and footer, but I need the content section to dynamically adjust its height between the two. The goal is to fill the remaining vertical space with a background-image in the co ...

htmlcss

What could be the reason for CSS3 PIE failing to work on sub pages when an absolute path is used in the CSS file?

I am struggling with CSS styling and have created the following class: a.greenbutton, input.greenbutton { /*background: url("../image/button.png") repeat-x scroll left top transparent;*/ behavior: url("/css3pie/PIE.php"); -webkit-border-radiu ...

htmlcsscss3pie

Unable to navigate through images on Bootstrap Carousel using previous and next buttons

Despite following tutorials and examining the HTML code on bootstrap, I'm facing issues while trying to create a carousel. I believed that everything was done correctly, but when I click on the next button, nothing happens. <!DOCTYPE html> < ...

javascripthtmlcssbootstrap-4carousel

Issue with Jquery Fatnav - active state not functioning properly

Currently, I am implementing a Jquery plugin known as fatNav. The documentation for the plugin can be found here: https://github.com/Glitchbone/jquery-fatNav Although everything is functioning properly, I am encountering difficulty getting my active stat ...

jqueryhtmlcss

Guide to implementing a real-time countdown timer for days, hours, minutes, and seconds leading up to a specific date and time with JavaScript

Implement a dynamic countdown timer in JavaScript that counts up to a specific date. See the example image for reference: here ...

javascripthtmlcss

The min-vh-50 class in Bootstrap CSS is not working as anticipated

I need to create two rows containing buttons in each row (10 buttons each). My goal is to center these two rows on the page while ensuring they are not too close together. To achieve this, I used the min-vh-50 class on both rows to align them in the upper ...

htmlcssbootstrap-5

css issue with opacity transition not functioning properly

My website is designed to display images in a table, but some of them are Stock Photos, so I need to indicate the source. I want the source to appear when the user hovers over the picture. For this purpose, I have assigned the source tag to a class (.PicSo ...

htmlcsshoveropacity

Retrieving data from a Bootstrap range slider

Trying to retrieve a variable from a price range slider for my online store. I aim to display the value using PHP. Here is the snippet from my test.php file: <script> var slidervalue = $('#output').val(); </script> <?php ...

javascriptphpjqueryhtmltwitter-bootstrap

Once all the fields are filled, I would like for my button to trigger the opening of my

I need help figuring out how to summon my modal only when all fields are filled: <form action="" id="myForm"> <fieldset> <input type="hidden" name="action" value="contact_s ...

javascripthtmlbootstrap-4