Tips for resizing an image to fit within a col-sm-12 column in Bootstrap

I have a dilemma with two columns - I want to place my image in the first column so that the second column can move down. see image here

Here is my HTML code:

 <div class="container-fluid">
        <div class="row">
            <div class="col-lg-6 col-sm-12">
                <div class="hero-image container-fluid">
                    <img class="man-with-laptop img-fluid"
                        src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
                </div>
            </div>
            <div class="col-lg-6 col-sm-12">
                <div class="hero-text-area container-fluid">
                    <p>HELLO!</p>
                </div>
            </div>
        </div>

    </div>
htmlcssresponsive-designbootstrap-5

Answer №1

Give this a try below and observe the outcome... just 1 container, 1 row.

It appears that you are incorporating a lot of custom CSS based on your class attributes. This additional CSS may be affecting your design and causing confusion for Bootstrap.

<div class="container-fluid">
    <div class="row">
        <div class="col-lg-6 col-sm-12">
             <img class="man-with-laptop img-fluid" src="https://demo.templateflip.com/super/images/illustrations/hello3.svg" alt="">
         </div>
        <div class="col-lg-6 col-sm-12">
           <p>HELLO!</p>
        </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

$_POST is unable to read POST parameters when using AJAX

I've been facing an issue with sending data to my PHP script. Interestingly, everything works smoothly when using POSTMAN and the results are displayed correctly. However, when attempting to send the data through AJAX in my HTML project, the PHP scrip ...

phphtmlajax

Is there a way to align my horizontal menu with the top of the screen without encountering the hover problem?

I'm trying to make my horizontal navigation bar stay at the top of the screen. The issue is that when I set the top property to 0, the menu sticks to the top but the initial menu item is obscured when hovered over. If I remove the top property, the ho ...

phphtmlcss

Updating div visibility based on form content in PHP

I am struggling to find a way to filter a page filled with divs based on form input to determine whether they should be displayed or not. The layout is akin to a collection of articles, where each div showcases an image and some text that links to the comp ...

phpjqueryhtmlcss

Two interdependent select fields

I am currently working on creating two select fields where, upon selecting an option in the first field, some options in the second field should be hidden. I have almost achieved this, but my script is unable to locate certain options in the first select f ...

javascriptjqueryhtmlcssselect

The Issue of Missing HTML Registration Form Data in Django

My configurations in demo\urls.py, user\urls.py, views.py, and HTML form seem to be set up correctly. However, upon pressing the submit button on the HTML form, I encounter a "File Not Found" error. Even after seeking assistance from ChatGPT, fol ...

htmldjangoformsdjango-rest-frameworkdjango-views

Concealing an Automatically Updated Section when Devoid of Content -- Ruby on Rails Version 4

I have come across various solutions to this problem, but none of them seem to be effective for my specific project. In my application, the user's previous choices are displayed in multiple divs. Initially, all the divs are empty. As the user progress ...

javascriptjquerycssruby-on-rails

If the ID (i.e. document.getElementById) is not found, then keep JavaScript running

I'm currently working on a JavaScript project where I need the script to gracefully handle missing div-ids and continue executing. I've looked into various solutions, but many involve either replacing the missing ID or placing information into an ...

javascripthtml

Forms for uploading and submitting multiple files

On my single page, I have several file upload forms that are generated in a loop. The issue is that the first file upload control works fine, but the others do not. <div> <form action="/docs/1046/UploadDocument?Id=1046&amp;propertyTypeId ...

javascripthtml

How to sync two carousels in Bootstrap 5 to slide simultaneously with just one click on the next and previous buttons

I am trying to implement dual sliding carousels using Bootstrap 5, but I am encountering issues with getting them to slide simultaneously. Despite incorporating data-bs-target=".carousel", the synchronization isn't working as intended in my ...

javascriptbootstrap-5bootstrap-carousel

The best approach to incorporating interactive animation in next.js

My vision is to develop a character creation application using next js. The app should empower users to customize the character using sliders and gender selection buttons. The ultimate goal is to have a 2D animated version of the character that dynamicall ...

javascriptcssnext.jsfrontendcss-animations

Textbox value disappears after being updated

When I click on the edit link (name), the value from the database is displayed as a textbox. However, when I update another normal textbox (age), the value in the edit link textbox disappears. Strangely, if I input a new value into the edit link textbox, i ...

javascriptphphtmljquerymysql

The CSS selector within the website's URL

When a URL like www.example.com/#signup is entered, the browser focuses its view on the HTML element with the ID signup. Is this correct? Can the CSS style of the element be changed if it is focused in this way? For example, if there is a div element wit ...

htmlcssurlcss-selectors

What is the best way to grasp the concepts behind MaterialUI styled components?

Can someone please help me understand how to apply styles to a component using MaterialUI? I've been reading the documentation but it's all very confusing to me. What exactly are classes and how do I connect the const style to the BeerList compon ...

cssreactjsmaterial-ui

What is the best way to showcase a div on top of all other elements in an HTML page?

As a newcomer to html and css, I have successfully created a div that contains city names. The issue I am currently facing is when I click on a button to display the div, it gets hidden behind the next section of my page. Take a look at the image below for ...

javascriptjquerycsshtml

The system has detected an invalid NSStringEncoding value of 0x8000100 while converting NSAttributedString to HTML

I encountered a warning in the debugger while using XCode: It detected an incorrect NSStringEncoding value of 0x8000100 when converting an NSAttributedString to html data. I am unsure of what is causing this issue or how to resolve it. Below is the code sn ...

htmlnsattributedstring

Adjust the JavaScript variable upon pressing the "c" key

I'm trying to figure out how I can toggle the value of variable x in JavaScript when the key "c" is pressed. Specifically, I want x to change from 0 to 1 when "c" is pressed and revert back to 0 when it's released. I have already defined and name ...

javascripthtmlcssvariablesfrontend

Changing the color of an SVG as I scroll to the bottom of the page

On my React page, I am looking to change the color of an SVG element from black to white at the bottom of the page. Is there a React-specific method for accomplishing this task? The div container located at the bottom of the page is not the parent div fo ...

cssreactjssvg

Exploring the world of jQuery animation and background colors with Animate()

I'm currently attempting to implement a basic pulse effect by utilizing JQuery to modify the background color. However, I am facing issues with animating the backgroundColor property. function show_user(dnid) { /* dnid represents the HTML ID of a ...

javascriptjquerycss

An iframe for the Vimeo player set to 100% of

I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw. I was able to adjust the wi ...

cssvue.jsvimeo-player

Retrieve the 'computed' CSS for the entire webpage

We operate multiple websites, each referencing 3-5 CSS files. Some of these files are shared across sites while others are specific to certain pages. Our aim is to streamline the CSS structure by consolidating into fewer files without altering the end res ...

csscode-generation