Displaying text around columns and images using Bootstrap 4

Hello, I am facing an issue with my text not wrapping around the images while using Bootstrap 4. Instead of wrapping around, it stays on the right side. Could it be because I placed the images in separate columns?

I want the two images to stack on top of each other, with the text aligned to the right side. Moreover, when the screen size decreases and the text height exceeds the combined height of the two images, I need it to wrap around them.

Additionally, is there a way to prevent the images from resizing when the browser window is resized, so that they always maintain their original size?

Contact CSS support for further assistance or information.

htmlimagecssbootstrap-4word-wrap

Answer №1

For optimal layout, ensure that both images and text are placed within the same col. Utilize float-left on the images to allow the text to wrap around them seamlessly.

Check out this link for more information!

<div class="row">
    <div class="col-12 mb-3">
        <img src="http://via.placeholder.com/350x150" class="float-left mr-3 about-img">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Illo suscipit facilis ipsum ullam reiciendis odio error
        iste neque ratione libero rem accusamus voluptatibus, nihil
        unde maiores sunt nisi. Assumenda, consectetur.
    </p>
    </div>
    <div class="col-12 mb-3">
        <img src="http://via.placeholder.com/350x150" class="float-left mr-3 about-img">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Illo suscipit facilis ipsum ullam reiciendis odio error
            iste neque ratione libero rem accusamus voluptatibus, nihil
            unde maiores sunt nisi. Assumenda, consectetur.
        </p>
    </div>
</div>

You seem to have unnecessary nesting with row>col. Remove width:100% if resizing of images is not desired.

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

Deleting an object with javascript in django: A step-by-step guide

Is there a way to use JavaScript to create a confirmation window before deleting an item? <div class="card-footer"> <a href="{% url 'course_delete' student.slug %}"><button>Delete</button>&l ...

javascripthtmldjangoajax

Tips for designing a tabbed interface using HTML

I am attempting to design a tabbed interface in HTML on my Google Sites page. I want it to behave similarly to this example: http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_pills_dynamic&stacked=h However, when I insert the code into an HT ...

htmlgoogle-sites

Dynamic mouse parallax effect enhances the experience of a full-screen responsive background

I am looking to create a background that covers the entire viewport, similar to the example shown here: https://css-tricks.com/perfect-full-page-background-image/ Additionally, I want to have 5 images stacked on top of each other (essentially 5 layers of ...

htmlcss

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

I attempted the example provided below, but unfortunately, it did not function as expected. The reason behind my endeavor is that adding numerous modifiers (--tuned) to achieve the desired outcome seemed impractical. Therefore, I decided to try and link ...

javascriptcsstypescriptvue.js

Tips for presenting a returned list of Objects from the AdminController to the Admin interface in asp.net MVC5

Two methods have been configured in the AdministrationController to handle locked accounts. One method will collect all locked accounts, and the other method will unlock an account when the user id is passed to it. public bool unlockUserById(String userId ...

c#htmlasp.netasp.net-mvc-5

Incorporating mootools scripts into a gwt application

My issue involves creating an animation on a Composite that should start when data is loading. To test this, I created animations on regular divs using HTML: <div class="LoadDataWidget"> <div id="arrow" class="greenArrow"></div> < ...

javascriptcssgwtmootools

What is the reason behind the inconsistency of calling a function on click not always functioning properly in Chrome and FF, while working seamlessly in IE?

Consider a scenario where the code below is being used: <HTML> <HEAD> <SCRIPT> function myFunction(atlasTrackingURL) { var atlasURL = atlasTrackingURL; if (!atlasURL) return; //Creating a cache busting mechanism ...

javascripthtml

Tips for adjusting an svg component to suit various screen sizes

I inserted the following SVG component into my HTML file. It fits perfectly on my tablet, but it's too large for my smartphone. How can we automatically adjust the size of the SVG to fit different screens? <svg viewBox="310 -25 380 450" w ...

javascripthtmlcssionic3

Deactivate the attribute in the media query

I made some website with pure html/css. I defined overflow-y: scroll to some element when browser is full screen. But when screen's width is less than 400px, I want to disable that. (like, overflow-y: none. But overflow-y doesn't have none) Is ...

css

Is it impossible to use CSS for absolute positioning of text?

I am currently learning CSS and HTML, as I'm working on a project for my final school assignment. My goal is to position the text "Welcome" absolutely within a specific div that I've created. However, despite multiple attempts, I can't seem ...

htmlcss

Example of Image Slider using AngularJS

<body ng-app="myApp"> <div ng-controller="slideShowController" class="imageslide" ng-switch='slideshow' ng-animate="'animate'"> <div class="slider-content" ng-switch-when="1"> <img src="../images/ship.png" /> & ...

angularjscss

Comparison of Head.js screen size and CSS3 @media query: benefits of prioritizing the former

What are the benefits of using Head.js screen size detection instead of CSS3 media queries? Head.js Screen Size Detection .lt-1024 #hero { background-image: (medium.jpg); } CSS3 @media query @media only screen and (max-width: 1024px) { #hero { back ...

csshead.js

Aligning text to the left center

I am looking to center left-aligned text in the yellow box (txtbox). The current look is like this: and I want it to appear like this: HTML: <div class="content container small"> <div class="txtbox"> ...

htmlcss

No matter how tall I make it, the scroll bar just won't stop showing

Check out this fiddle for more information: http://jsfiddle.net/LAueQ/ Even after increasing the height of the campaignDiv div, the scrollbar keeps showing up. If possible, I would like to avoid using overflow: hidden. ...

htmlcss

Any ideas on how to fix the error that pops up during the installation of the bootstrap package in Node

The npm command is not recognized as a valid cmdlet, function, script file, or operable program. Please double check the spelling of the command and ensure that the path is correct before trying again. This error occurred at line 1. npm i bootstrap + ...

javascriptcssnode.jsjsontwitter-bootstrap

Is there a way to divide this constantly changing list into 3 separate columns?

I'm currently tackling updates on an older web application, and instead of completely rewriting everything to conform to modern standards, I am endeavoring to keep the changes as straightforward as possible. Displayed below is a dynamically generated ...

phphtmlcssmultiple-columns

Chakra UI: Trouble with Styling Multi-part Components - StyleProvider Missing

Attempting to style multipart components as outlined in this documentation is proving to be challenging. Despite my efforts, I keep encountering the following error: ContextError: useStyles: styles is undefined. It appears that I may have forgotten to wr ...

cssreactjsnext.jschakra-ui

When clicking initially, the default input value in an Angular 2 form does not get set

I am currently learning angular2 as a beginner programmer. My goal is to create a form where, upon clicking on an employee, an editable form will appear with the employee's current data. However, I have encountered an issue where clicking on a user f ...

javascripthtmlangulartypescript

Is there a way to position the input directly above the div in the center?

In my HTML code, I have a div container with an input and another nested div element that contains various other elements. My goal is to center the input element in relation to the parent div, where error messages are displayed. Currently, both elements s ...

cssangular

Is the indigo-pink color scheme fully implemented after installing @angular/material and scss using ng add command?

After running ng add @angular/material, we are prompted to choose a CSS framework and theme. I opted for indigo-pink and scss. Will the material components automatically inherit this theme, or do we need to take additional steps? When using normal CSS (wi ...

javascriptcssangulartypescriptangular-material